Activité 3 - Utilisez un serveur web externe [Résolu]

Messages postés
5
Date d'inscription
samedi 3 novembre 2018
Dernière intervention
5 novembre 2018
- 3 nov. 2018 à 12:37 - Dernière réponse :
Messages postés
5
Date d'inscription
samedi 3 novembre 2018
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();
}

             








Afficher la suite 

Votre réponse

7 réponses

Meilleure réponse
Messages postés
23260
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 3 nov. 2018 à 12:45
1
Merci
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...

Merci jordane45 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 87 internautes ce mois-ci

Messages postés
23260
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 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
Messages postés
5
Date d'inscription
samedi 3 novembre 2018
Dernière intervention
5 novembre 2018
- 4 nov. 2018 à 21:09
ok merci du conseil
Messages postés
5
Date d'inscription
samedi 3 novembre 2018
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 () {});
});

Messages postés
23260
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 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 ).
Messages postés
5
Date d'inscription
samedi 3 novembre 2018
Dernière intervention
5 novembre 2018
- 5 nov. 2018 à 09:41
ok merci du conseil pas faux t'as raison il faut du php mais je voulais savoir si y avait un moyen soit de faire appel au serveur pour l'affichage ou bloqué l'évenement clic à l'affichage du liens et pour l'exemple il fait l'envois du liens c'est tout c'est ajaxGet qui charge les donnés du serveur mais j'arrive pas à l'afficher pour qu'il reste sur la page meme après un rechargement voilà mais vraiment merci du conseil ça fait du bien encore merci
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.