Aller au contenu

Utilisez AJAX pour créer des pages Web à la volée

Et voici une mise en pratique de la technologie AJAX pour un partenaire.

Ce script PHP, JavaScript effectue :

  • Un formulaire récupère les informations de la page.
  • Appel via AJAX de php.
  • Création du répertoire et du fichier php suivant un modèle.
  • Retour via une réponse AJAX.
  • Affiche l’url de la page créée.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez AJAX pour créer des pages Web à la volée

Bonjour à tous et bienvenu sur Développement Facile, dans ce cours j’avais envie de partager avec vous, j’ai fait un script pour un partenaire donc en Ajax, qui permet de créer des pages PHP en direct à partir d’une structures, Donc je voulais vous montrer comment implémenter le format Ajax avec PHP, les modèles justement de création de pages très, très, rapidement.

Création de Pages

Donc ce script en fait, vous avez un formulaire, l’utilisateur renseigne tous les éléments de la page ensuite via Ajax, vous appelez un fichier PHP, le fichier PHP va créer le chemin sur le serveur donc avec le répertoire le fichier PHP suivant un modèle et vous avez une réponse via Ajax et ensuite ça affiche l’URL qui a été créé et vous pouvez réutiliser pour appeler cette URL, là où vous en avez besoin tout simplement.

Exemple d’application

Donc on va voir ensemble le code source et même il y a une démonstration juste derrière. En fait, c’est un script qui est utiliser pour faire de l’affiliation dans le marketing, donc ça ne vous parlera peut être pas, l’important c’est de regarder le côté technique. C’est ce que je voulais partager avec vous. Donc vous avez la page pour créer un mot de passe. C’est-à-dire, ici vous tapez votre mot de passe, on va enlever … voilà, vous pouvez mettre des majuscules et vous cryptez votre mot de passe et donc ça vous donne un résultat ici donc vous mettez ici sur create_page … sur write_page par exemple ici, le mot de passe, donc la création de cette page est protégée par mot de passe, ce formulaire il faut saisir le mot de passe ici. Donc si un internaute tombe par hasard sur cette page, il ne pourra pas utiliser votre script de création de page.
Donc qu’est-ce que ça fait ? On a un formulaire HTML 5, il y a du CSS 3 pour créer un bouton assez sympa juste en CSS, on peut utiliser le framework jQuery UI en fait aussi pour créer le bouton, ça c’est vous qui choisissez moi j’ai préféré faire sans le framework jQuery pour ce script par ce que je voulais aller assez rapidement. C’est un script juste pour créer des pages Web en fait, tout simplement. Et donc là on a plusieurs fonctions pour le getXMLHttpRequest pour Ajax en fait tout simplement ici. Là, c’est le script de création de pages où on indique à chaque fois création en cour ici dans la barre bleu, là on indique rien parce qu’on ne fait rien. Là, voilà, tous ces champs sont obligatoires. On clique directement là, et à chaque fois, voilà la réponse Ajax après lorsque le fichier a été créer le fichier PHP a été créé, avec là, le retour du serveur tout simplement. Donc qu’est-ce qu’on fait ? là, on a tout notre champs HTML 5, donc le titre avait des aides, renseignez le type de la page, la page ciblée, la largeur, le chemin donc avec un champ pré rempli, ici le champ est pré rempli, là, avec la value pré rempli, ici la largeur, le nombre max, ici pour un nombre, l’aide … enfin vous avez vraiment tout ce qu’il vous faut pour vous aider dans ce script. Donc là pour convertir un code couleur HTML donc, c’était utile puisqu’on travaille avec de l’HTML donc on avait du code couleur, montrer, tout simplement. Voilà on récupère les valeurs que l’on rensegin après ici, teinte, rouge, vert, bleu, nuance, et saturation. Et puis vous avez le mot de passe à renseigner. Donc tout ça c’est un formulaire HTML 5, dès qu’on clique sur le bouton valider, qu’est-ce qu’il se passe ? Et bien on va ici sur le bouton valider, c’est action JavaScript, on appelle la fonction create_page et on va appeler ce fichier write_page.php, tout simplement, la fonction create_page avec l’URL donc ça fait de l’Ajax, ça va appeler ce fichier, et qu’est-ce qu’on fait dans ce fichier ? on vérifie les donnée en post si le mot de passe est renseigné, si le mot de passe est correct, si les valeurs en post, toutes ces valeurs sont renseignées et on les récupère une par une pour enlever les slash, les espaces, si il y a eu d’erreur lors de la réception des variables. Et là en fait, comment je fonctionne ? Moi je crée toujours une variable ici, qui contient le code HTML. Là, elle contient le code HTML et avec #LINK, #NAME_FILE, #WIDTH, #COLOR et qu’est-ce que je fais ? je fais des str_replace avec ce que j’ai reçu ici par exemple NbRow, Color par exemple avec la couleur que j’ai reçue. Donc j’ai ma page HTML, HTML 5, classique et avec des balises, je fais des str_replace tout du long, pareil il y a 2 fichiers en fait qui vont être créés FileTop et File fichier à appeler et ensuite est-ce que le répertoire existe ? Non, je le crée. Je récupère le lien de la page. Erreur lors de l’ouverture du fichier, je referme le fichier, pareil je vérifie si le fichier existe, j’écris dans le fichier ensuite je referme le fichier et s’il n’y a pas d’erreur, page créée, c’est ce que je renvoi via Ajax, page créée, sinon je renvoi une erreur, il y a eu une erreur lors de la fermeture du fichier, tout simplement. Voilà un petit peu comment çà fonctionne, donc qu’est-ce que ça donne ? il suffit de tout renseigner donc j’ai préparé un formulaire pré renseigné, vous cliquez ici, ça crée votre page et donc là vous avez l’URL et donc ici avec URL vous avez la première partie c’est une frame ici comme vous pouvez le voir c’est une frame qui est créée ici, tout simplement, avec le logo et tout donc avec la structure des 2 pages qui sont ici et ici.
Donc voilà ce que je voulais partager avec vous. Concrètement un cas que j’ai eu avec un partenaire pour utiliser Ajax via un simple formulaire. Donc, si vous avez des questions posez-les directement sous cette vidéo. Sur développement facile sous cette vidéo retrouver image le code source complet de cet exemple avec les commentaires en téléchargement, et moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple AJAX Pages Web

Et voici le code source commenté de ce script de création de pages web à la volée.

Téléchargement du code source Exemple AJAX création de pages web

Cliquez ici pour télécharger le code source Exemple AJAX création de pages web

Partagez vos codes source également !

Profitez-en pour vous aussi, partager vos meilleurs codes source dans la zone commentaires.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>