Sujet Précédent Sujet Suivant

Activité 3 - Utilisez un serveur web externe

Résolu
yamishibai Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 5 novembre 2018 - Modifié le 3 nov. 2018 à 12:38
yamishibai Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 5 novembre 2018 - 5 nov. 2018 à 09:41
Bonjour je suis sur Activité 3 - Utilisez un serveur web externe dans le cours Créez des pages web interactives avec JavaScript sur openclassrooms pour le moment j'obtient ce resultat au lien https://codepen.io/yamishibai/pen/EdBzNR?editors=0110

mais je voudrais ce résultat :

https://static.oc-static.com/prod/courses/files/creez-des-pages-web-interactives-avec-javascript/activite_3_demo.gif

comment faire pour l'obtenir?

et voici mon code 

// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", "https://oc-jswebsrv.herokuapp.com/api/liens");
    req.addEventListener("load", function() {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);

        } else {
            console.error(req.status + " " + req.statusText + " " + "https://oc-jswebsrv.herokuapp.com/api/liens");
        }
    });
    req.addEventListener("error", function() {
        console.error("Erreur réseau avec l'URL " + "https://oc-jswebsrv.herokuapp.com/api/liens");
    });
    req.send(null);
}




function ajaxPost(url, data, callback, isJson) {
    var req = new XMLHttpRequest();
    req.open("POST", "https://oc-jswebsrv.herokuapp.com/api/lien");
    req.addEventListener("load", function() {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + "https://oc-jswebsrv.herokuapp.com/api/lien");
        }
    });
    req.addEventListener("error", function() {
        console.error("Erreur réseau avec l'URL " + "https://oc-jswebsrv.herokuapp.com/api/lien");
    });
    if (isJson) {
        // Définit le contenu de la requête comme étant du JSON
        req.setRequestHeader("Content-Type", "application/json");
        // Transforme la donnée du format JSON vers le format texte avant l'envoi
        data = JSON.stringify(data);
    }
    req.send(data);
}





/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)


// TODO : compléter ce fichier pour ajouter les liens à la page web

// ci-dessous toute les variable pour les boutons et input
var element = document.getElementById('contenu');
var button = document.createElement("button");
button.id = "boutton"
element.appendChild(button);
button.appendChild(document.createTextNode("Ajouter un lien"));
button.style.marginBottom = "15px";
button.onclick = ajouter;

var push = document.createElement("button");
push.id = "bitton";
element.appendChild(push);
push.style.position = "absolute";
push.style.bottom = "88.9%";
push.style.left = "45.5%";
push.appendChild(document.createTextNode("Ajouter "));
document.getElementById("bitton").style.visibility = "collapse";
var nomElt = document.createElement("input");
nomElt.id = "valeur1;"
var lienElt = document.createElement("input");
lienElt.id = "valeur2";
var eltUrl = document.createElement("input");
eltUrl.id = "valeur3";
var input = document.querySelector("input");
var forma = document.createElement("form");
forma.id = "formi";
element.appendChild(forma);

element.insertAdjacentElement("beforebegin", button);


//fonction qui compose le formaulaire 
function ajouter(e) {
 e.stopPropagation();
    var push = document.createElement("button");
    push.id = "bitton";
    document.getElementById("boutton").style.visibility = "collapse";
    document.getElementById("bitton").style.visibility = "visible";

    forma.appendChild(nomElt);
    forma.appendChild(lienElt);
    forma.appendChild(eltUrl);
    this.onclick = undefined;
    button.style.position = "relative";
    button.style.left = "45.5%";
    nomElt.style.position = "absolute";
    nomElt.style.bottom = "88.9%";
    lienElt.style.position = "absolute";
    lienElt.style.bottom = "88.9%";
    lienElt.style.left = "16.8%";
    eltUrl.style.position = "absolute";
    eltUrl.style.bottom = "88.9%";
    eltUrl.style.left = "31.2%";
    nomElt.placeholder = "Ajouter votre Nom";
    lienElt.placeholder = "Entrer le titre du Lien";
    eltUrl.placeholder = "Entrer l'URL du lien";
}


//fonction qui fait apparaitre le résultat de la saisie 
push.addEventListener("click", majouter);
function majouter(e) {

    var temoignage = {

        titre: lienElt.value,

        url: eltUrl.value,

        auteur: nomElt.value
       
    }

ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", temoignage,
        function() {
if ((temoignage.auteur === "") || (temoignage.titre === "") || (temoignage.url === "")) {
                alert("Salut, tu dois remplir le formulaire")
            } else {
               
               var w = document.createElement("p");
                w.appendChild(document.createTextNode("Le lien" + " " + temoignage.titre + " " + "a été ajouté"));
                var myWindow = document.createElement("div");
                myWindow.setAttribute("class", "lien");
                myWindow.style.width = "97%";
                myWindow.style.position = "relative";
                myWindow.style.bottom = "5px";
                myWindow.style.backgroundColor = "#99e6ff";
                myWindow.style.color = "#428bca";
                element.appendChild(myWindow);
                myWindow.appendChild(w);
                setTimeout(function() {
                    myWindow.style.display = "none"
                }, 2000);
              element.insertAdjacentElement("beforebegin", myWindow);
                ajaxGet();

            }
    
          
         }, true) 

  
        }


function transferComplete(req) {
    // se déclenche quand la requete revien du serveur
    // verifie les status http
    try {
        // si erreur envoie directement au catch sans exécuter la suite du code
        if (req.status < 200 && req.status >= 400) throw req.status;
        // pas d'erreur execute la fonction modifyDom
        modifyDom(req.responseText); 
    } catch (error) {
        // envoie a la fonction de gestion des erreurs
        errorHandler(error);
    }
}

function errorHandler(error) {
    // se déclenche en cas d'erreur http
    console.log("Erreur http :" + error);
}

function modifyDom(data) {
    // affiche le data ( les liens) ici tu peu placer la modification du dom
    obj = JSON.parse(data);
var divo = document.createElement("div");
divo.setAttribute("class", "lien");
divo.style.width ="97%"
element.appendChild(divo);




var titreElt = document.createElement("a"); 
titreElt.href = obj[0].url;
titreElt.appendChild(document.createTextNode(obj[0].titre));
titreElt.style.textDecoration = "none";
titreElt.style.fontSize = "20px";
titreElt.style.fontWeight = "bolder";
titreElt.style.backgroundColor = "white";
titreElt.style.padding = "6px";

var urlElt = document.createElement("string"); 
urlElt.textContent = " "+ obj[0].url
urlElt.style.backgroundColor = "white";
if ((obj[0].url.indexOf("https://") === -1) && (obj[0].url.indexOf("http://") === -1)) {
           urlElt.innerHTML = "http://" + obj[0].url;
        }
var auteurElt = document.createElement("p"); 
auteurElt.appendChild(document.createTextNode("Ajouter par" + " " + obj[0].auteur));
auteurElt.style.backgroundColor = "white";
auteurElt.style.marginBottom = "4px";
auteurElt.style.marginLeft = "6px";
auteurElt.style.marginTop = "0px";
auteurElt.style.width ="98%";
titreElt.style.color = "#428bca";


divo.appendChild(titreElt);
divo.appendChild(urlElt);
divo.appendChild(auteurElt);
element.appendChild(divo);
element.insertAdjacentElement("beforebegin",divo );


 

    console.log(obj[0].titre)
    console.log(obj[0].url)
    console.log(obj[0].auteur)
    console.log(data);
}

 
function ajaxGet() {
    var req = new XMLHttpRequest();
    // load est trigger quand le serveur a répondu quelque chose
    req.addEventListener("load", function() {
        transferComplete(req);
    });
    // error trigger quand le serveur est indisponible
    req.addEventListener("error", function() {
        errorHandler(req.status);
    });
    // toujour mettre open après avoir mis des events listeners
    req.open("GET", "https://oc-jswebsrv.herokuapp.com/api/liens");
    req.send();
}
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 37542 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juin 2023 341
3 nov. 2018 à 12:45
Bonjour,
Pourrais tu détailler ce que tu souhaites obtenir ?
Là comme ça, en regardant les deux "fonctionnement" je ne constate pas vraiment de différence... ton code semble bien fonctionner...
1
yamishibai Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 5 novembre 2018
4 nov. 2018 à 11:03
alors ce que je voudrais obtenir c'est ajouter un lien comme tu l'as vu avec mon code mais que quand tu recharge la page il ne disparait pas car le serveur continue de l'afficher et ça je sais pas trop comment faire avec ma fonction click et ajaxget ou avec une autre fonction que j'ai fais ci-dessous : 
// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", "https://oc-jswebsrv.herokuapp.com/api/liens");
    req.addEventListener("load", function() {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);

        } else {
            console.error(req.status + " " + req.statusText + " " + "https://oc-jswebsrv.herokuapp.com/api/liens");
        }
    });
    req.addEventListener("error", function() {
        console.error("Erreur réseau avec l'URL " + "https://oc-jswebsrv.herokuapp.com/api/liens");
    });
    req.send(null);
}




function ajaxPost(url, data, callback, isJson) {
    var req = new XMLHttpRequest();
    req.open("POST", "https://oc-jswebsrv.herokuapp.com/api/lien");
    req.addEventListener("load", function() {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + "https://oc-jswebsrv.herokuapp.com/api/lien");
        }
    });
    req.addEventListener("error", function() {
        console.error("Erreur réseau avec l'URL " + "https://oc-jswebsrv.herokuapp.com/api/lien");
    });
    if (isJson) {
        // Définit le contenu de la requête comme étant du JSON
        req.setRequestHeader("Content-Type", "application/json");
        // Transforme la donnée du format JSON vers le format texte avant l'envoi
        data = JSON.stringify(data);
    }
    req.send(data);
}





/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)


// TODO : compléter ce fichier pour ajouter les liens à la page web

// ci-dessous toute les variable pour les boutons et input


var element = document.getElementById('contenu');
var button = document.createElement("button");
button.id = "boutton"
element.appendChild(button);
button.appendChild(document.createTextNode("Ajouter un lien"));
button.style.marginBottom = "15px";
button.onclick = ajouter;


var push = document.createElement("button");
push.id = "bitton";
element.appendChild(push);
push.style.position = "absolute";
push.style.bottom = "88.9%";
push.style.left = "45.5%";
push.appendChild(document.createTextNode("Ajouter "));
document.getElementById("bitton").style.visibility = "collapse";
var nomElt = document.createElement("input");
nomElt.id = "valeur1"
var lienElt = document.createElement("input");
lienElt.id = "valeur2";
var eltUrl = document.createElement("input");
eltUrl.id = "valeur3";
var input = document.querySelector("input");
var forma = document.createElement("form");
forma.id = "formi";
element.appendChild(forma);

element.insertAdjacentElement("beforebegin", button);



//fonction qui compose le formaulaire 
function ajouter(e) {

    var push = document.createElement("button");
    push.id = "bitton";
    document.getElementById("boutton").style.visibility = "collapse";
    document.getElementById("bitton").style.visibility = "visible";
    forma.appendChild(nomElt);
    forma.appendChild(lienElt);
    forma.appendChild(eltUrl);
    this.onclick = undefined;
    button.style.position = "relative";
    button.style.left = "45.5%";
    nomElt.style.position = "absolute";
    nomElt.style.bottom = "88.9%";
    lienElt.style.position = "absolute";
    lienElt.style.bottom = "88.9%";
    lienElt.style.left = "16.8%";
    eltUrl.style.position = "absolute";
    eltUrl.style.bottom = "88.9%";
    eltUrl.style.left = "31.2%";
    nomElt.placeholder = "Ajouter votre Nom";
    lienElt.placeholder = "Entrer le titre du Lien";
    eltUrl.placeholder = "Entrer l'URL du lien";
}


//fonction qui fait apparaitre le résultat de la saisie 
push.addEventListener("click", majouter);
function majouter(e) {
   
    var temoignage = {

        titre: lienElt.value,

        url: eltUrl.value,

        auteur: nomElt.value
       
    }


    

ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", temoignage,
        function(e) {
if ((temoignage.auteur === "") || (temoignage.titre === "") || (temoignage.url === "")) {
                alert("Salut, tu dois remplir le formulaire")
            } else {
               var w = document.createElement("p");
                w.appendChild(document.createTextNode("Le lien" + " " + temoignage.titre + " " + "a été ajouté"));
                var myWindow = document.createElement("div");
                myWindow.setAttribute("class", "lien");
                myWindow.style.width = "97%";
                myWindow.style.position = "relative";
                myWindow.style.bottom = "5px";
                myWindow.style.backgroundColor = "#99e6ff";
                myWindow.style.color = "#428bca";
                element.appendChild(myWindow);
                myWindow.appendChild(w);
                setTimeout(function() {
                    myWindow.style.display = "none"
                }, 2000);
              element.insertAdjacentElement("beforebegin", myWindow);
                ajaxGet();
                retour()
            }
          
          
         }, true) 

  
        }

function retour(){
	
	document.getElementById("boutton").style.visibility = "visible";
    document.getElementById("bitton").style.visibility = "collapse";
    button.style.left = "0";
    document.getElementById("valeur1").style.visibility = "collapse";
    document.getElementById("valeur2").style.visibility = "collapse";
    document.getElementById("valeur3").style.visibility = "collapse";
}


function transferComplete(req) {
    // se déclenche quand la requete revien du serveur
    // verifie les status http
    try {
        // si erreur envoie directement au catch sans exécuter la suite du code
        if (req.status < 200 && req.status >= 400) throw req.status;
        // pas d'erreur execute la fonction modifyDom
        modifyDom(req.responseText); 
    } catch (error) {
        // envoie a la fonction de gestion des erreurs
        errorHandler(error);
    }
}

function errorHandler(error) {
    // se déclenche en cas d'erreur http
    console.log("Erreur http :" + error);
}

function modifyDom(data) {
    // affiche le data ( les liens) ici tu peu placer la modification du dom
    obj = JSON.parse(data);
var divo = document.createElement("div");
divo.setAttribute("class", "lien");
divo.style.width ="97%"
element.appendChild(divo);




var titreElt = document.createElement("a"); 
titreElt.href = obj[0].url;
titreElt.appendChild(document.createTextNode(obj[0].titre));
titreElt.style.textDecoration = "none";
titreElt.style.fontSize = "20px";
titreElt.style.fontWeight = "bolder";
titreElt.style.backgroundColor = "white";
titreElt.style.padding = "6px";

var urlElt = document.createElement("string"); 
urlElt.textContent = " "+ obj[0].url
urlElt.style.backgroundColor = "white";
if ((obj[0].url.indexOf("https://") === -1) && (obj[0].url.indexOf("http://") === -1)) {
           urlElt.innerHTML = "http://" + obj[0].url;
        }
var auteurElt = document.createElement("p"); 
auteurElt.appendChild(document.createTextNode("Ajouter par" + " " + obj[0].auteur));
auteurElt.style.backgroundColor = "white";
auteurElt.style.marginBottom = "4px";
auteurElt.style.marginLeft = "6px";
auteurElt.style.marginTop = "0px";
auteurElt.style.width ="98%";
titreElt.style.color = "#428bca";


divo.appendChild(titreElt);
divo.appendChild(urlElt);
divo.appendChild(auteurElt);
element.appendChild(divo);
element.insertAdjacentElement("beforebegin",divo );


 

    console.log(obj[0].titre)
    console.log(obj[0].url)
    console.log(obj[0].auteur)
    console.log(data);
}

 
function ajaxGet() {
    var req = new XMLHttpRequest();
    // load est trigger quand le serveur a répondu quelque chose
    req.addEventListener("load", function() {
        transferComplete(req);
    });
    // error trigger quand le serveur est indisponible
    req.addEventListener("error", function() {
        errorHandler(req.status);
    });
    // toujour mettre open après avoir mis des events listeners
    req.open("GET", "https://oc-jswebsrv.herokuapp.com/api/liens");
    req.send();
}
0
jordane45 Messages postés 37542 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juin 2023 341
4 nov. 2018 à 14:35
Pour ça, tu dois envoyer les données à sauvegarder au serveur afin qu'il les stocke (en bdd par exemple)
C'est ce qui est expliqué au chapitre 4... envoie des données au serveur
https://openclassrooms.com/fr/courses/3306901-creez-des-pages-web-interactives-avec-javascript/3626521-envoyez-des-donnees-a-un-serveur-web
0
yamishibai Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 5 novembre 2018
4 nov. 2018 à 21:09
ok merci du conseil
0
yamishibai Messages postés 5 Date d'inscription samedi 3 novembre 2018 Statut Membre Dernière intervention 5 novembre 2018
5 nov. 2018 à 00:54
mais je dois me servir du formdata ou je garde ma fonction ajaxPost tel quel


formdata : 
var form = document.querySelector("form");
// Gestion de la soumission du formulaire
form.addEventListener("submit", function (e) {
    e.preventDefault();
    // Récupération des champs du formulaire dans l'objet FormData
    var data = new FormData(form);
    // Envoi des données du formulaire au serveur
    // La fonction callback est ici vide
    ajaxPost("http://localhost/javascript-web-srv/post_form.php", data, function () {});
});
0
jordane45 Messages postés 37542 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juin 2023 341
5 nov. 2018 à 09:21
Je n'ai pas regardé...
Mais es tu sûr que l'exemple qu'ils proposent te permette de stocker les liens ?
Je ne pense pas... sinon, si tous ceux qui font des tests s'amusent à ça..ça remplirait vite leur base de données...

Pense qu'il ne s'agit que de tutos....
Si tu veux créer un gestionnaire de liens, il faudrait également que tu codes la partie serveur (en php / sql par exemple ).
0

Discussions similaires

Erreur du serveur dans l'application '/'
cs_ange_sali -
Dr_shaman -

5 réponses
Comment interroger un serveur externe ( comme wampserv en local)
shortint -
shortint -

9 réponses
Single Sign On (ou SSO) sur site web
rmic210282 -
sylvunix -

4 réponses
Lancer un scanner à partir d'une page WEB
SEVY29 -
Nerolph -

5 réponses
recuperation de données d'un serveur distant dans android
jasminejas -
BunoCS -

6 réponses
Executer application Java dans un page Web
floflo69290 -
DARKSIDIOUS -

9 réponses
Rejoignez-nous