Cours 420-2D7-LL Développement web

Semaine 12 - Paiement - Éditeur - Insertion Angular

Télécharger : ckeditor.zip

Éditeur HTML

1. Qu’est-ce que CKEditor ?

CKEditor est un éditeur de texte open source de type WYSIWYG pouvant servir pour la création de pages web.

Relativement léger et il ne nécessite pas d'installation côté client. La première version a été diffusée en 2003. Son code source est publié sous les licences GPL, LGPL et MPL2 et est rédigé en JavaScript. CKEditor est compatible avec la plupart des navigateurs Internet dont Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Google Chrome , Opera 9.50+ et Camino 1.0+.

WYSIWYG : c’est une interface utilisateur qui permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C'est une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final.

« WYSIWYG » est l’acronyme de la locution anglaise « What you see is what you get », signifiant littéralement en français « ce que vous voyez est ce que vous obtenez ».

Voici un aperçu de CKEditor :

2. Installation :

Télécharger CKEditor et extraire les fichiers dans un répertoire situé à la racine de votre serveur web.

https://ckeditor.com/

Pour la vieille version:

Installer FCKeditor (v 2.4.3) dans votre répertoire racine de site web. (Maintenant appeler CKEditor )

dans php.ini, vérifier que vous acceptez les "upload".

Donnez les droits nécessaires à votre fichier et dossier.

Modifier le fichier suivant pour le "upload" des fichiers. (Payant dans la nouvelle version ?)

/FCKeditor/editor/filemanager/browser/default/connectors/php/config.php.

Meme chose dans /FCKeditor/editor/filemanager/upload/php/config.php

$Config['Enabled'] = true ;

$Config['UserFilesPath'] = '/php/lumiere/' ;

Modifier fckconfig.js à Changer asp pour php

Note : un dossier "image" sera créer automatiquement dans le dossier, donner les permissions en écriture.

La fonction ereg est désuète depuis php 5.3.xxx, donc il faut la remplacer par Preg_match.

Dans le fichier: /var/mers/php/fckeditor/editor/filemanager/browser/default/connectors/php/connector.php

Remplacer les 3 lignes qui contiennent ereg:

//if ( ! ereg( '/$', $GLOBALS["UserFilesPath"] ) )

if ( ! preg_match( '//$/', $GLOBALS["UserFilesPath"] ) )

…

//if ( ! ereg( '/$', $GLOBALS["UserFilesDirectory"] ) )

if ( ! preg_match( '//$/', $GLOBALS["UserFilesDirectory"] ) )

$GLOBALS["UserFilesDirectory"] .= '/' ;

…

// Check the current folder syntax (must begin and start with a slash).

//if ( ! ereg( '/$', $sCurrentFolder ) ) $sCurrentFolder .= '/' ;

if ( ! preg_match( '//$/', $sCurrentFolder ) ) $sCurrentFolder .= '/' ;

3. Utilisation :

Inclure la référence :

include("../ckeditor/ckeditor.php");

Ajouter un objet CKEditor dans une page php :

<?php

$CKEditor = new CKEditor();

// Ne pas écrire le code dans le navigateur, le retourner.

$CKEditor->returnOutput = true;

// Chemin d’accès vers le repertoire de CKEditor directory. Idéalement, utiliser un chemin absolu.

$CKEditor->basePath = '/ckeditor/';

// Largeur par défaut

$CKEditor->config['width'] = 600;

// Modifie les attibuts par défaut du textarea.

$CKEditor->textareaAttributes = array("cols" => 80, "rows" => 10);

//Détermine les barres d’outils présentes

$config['toolbar'] = array(

array( 'Source', '-', 'Preview', 'Bold', 'Italic', 'Underline', 'Strike', 'TextColor','BGColor' ),

array('Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck', 'Image', 'Link', 'Unlink', 'Anchor' ),

array('Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat', 'Style','FontFormat','FontName','FontSize'),

array('JustifyLeft','JustifyCenter','JustifyRight','JustifyFull')

);

$config['UserFilesPath'] = '/image/' ;

// Crée la seconde instance.

echo $CKEditor->editor("contenu", $contenu, $config)

Exemple de fichier qui utilise FCKeditor:

fckeditor0.php

<HTML>

<HEAD>

<TITLE>Fichier de test FCKeditor0</TITLE>

</HEAD>

<BODY>

Ouvrir le fichier:<input type="text" name="nomfichierouvrir" size="20"><br>

<br>

</form>

<P><A HREF="fckeditor0.php">Retour sur la page</A><P>

</CENTER>

</BODY>

</HTML>

fckeditor.php

<HTML>

<HEAD>

<TITLE>Fichier de test FCKeditor</TITLE>

</HEAD>

<BODY>

<?php

include("FCKeditor/fckeditor.php"); //endroit ou se situe FCKeditor

<?php

$nom = $_REQUEST['nomfichierouvrir'];

$fp = fopen($nom,"r"); //ouverture du fichier

while (!feof($fp)) { //on parcoure toutes les lignes

$lefichier .= fgets($fp, 4096); // lecture du contenu de la ligne

}

fclose($fp);

$oFCKeditor = new FCKeditor('FCKeditor1') ; //nouvel instance de FCKeditor

$oFCKeditor->Width = '100%' ;

$oFCKeditor->Height = '400' ;

$oFCKeditor->BasePath = '/FCKeditor/';

$oFCKeditor->Value = $lefichier; //'Entrez votre texte ici!!! Gang de suiveux...';

echo "<table border=1 width='85%' Height='400'><TR><TD>";

$oFCKeditor->Create() ;

echo "</TD></TR></table>";

echo "Enregistrer le fichier sous:<input type='text' name='nomfichier' size='20' value='".$nom."'><br>

<br>

</form>

<P><A HREF="fckeditor0.php">Retour sur la page 1</A><P>

</CENTER>

</BODY>

</HTML>

fckeditor2.php

<HTML>

<HEAD>

<TITLE>Fichier de test FCKeditor2</TITLE>

</HEAD>

<BODY>

<?php

$nomfichier = $_REQUEST['nomfichier'];

$letout=stripslashes($_REQUEST['FCKeditor1']); //endroit ou se situe FCKeditor

//$sValue = stripslashes( $_POST['FCKeditor1'] ) ;

$fp = fopen($nomfichier,"w"); //ouverture du fichier

fputs($fp, $letout); // on écrit dans le fichier

fclose($fp);

echo $letout;

<P><A HREF="fckeditor0.php">Retour sur la page 1</A><P>

</CENTER>

</BODY>

</HTML>

4. Compétition = https://www.tinymce.com/

(html+javascript+css)

Exemple de TinyMCE

TinyMCE 5.0.9 | TinyMCE Documentation

Exemple : https://php.dinf.ca/cours/fckeditor0.php

Semaine 12 - Paiement

Télécharger : Paiement en ligne.zip

Bouton PayPal:

https://www.paypal.com/buttons/

exemple : http://php.dinf.ca/cours/Paiement/paiement.html

CakePHP:

Module de paiement

Pour un retour de PayPall

http://www.lafermeduweb.net/billet/tutorial-integrer-paypal-a-son-site-web-en-php-partie-1-275.html

Pour afficher au format désiré (ex: $ Canadian)

number_format()

$number = 1234.56;

// Notation anglaise (par défaut)

$english_format_number = number_format($number);

// 1,235

// Notation française

$nombre_format_francais = number_format($number, 2, ',', ' ');

// 1 234,56

onApprove: function(data, actions) {

return actions.order.capture().then(function(orderData) {

// Full available details

console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

// Show a success message within this page, e.g.

const element = document.getElementById('paypal-button-container');

element.innerHTML = '';

element.innerHTML = '<h3>Merci pour votre paiement! </h3>';

// Or go to another URL: actions.redirect('thank_you.html');

});

onError: function(err) {

console.log(err);

}

}).render('#paypal-button-container');

}

initPayPalButton();

</script>

Même Version 2026 AVEC variables PHP …

<HTML>

<HEAD>

<TITLE>Fichier de test Paiement PayPal</TITLE>

</HEAD>

<BODY>

<?php

@$montant = $_REQUEST['id'];

@$nom = $_REQUEST['nom'];

$transport = 20;

$taxe = 15;

@$Total = $montant+$transport+$taxe;

echo "<H2>Voulez-vous payer ce montant: $montant $<P>"; //name="lc" value="CA" //name="lc" value="FR"

echo "pour l'achat de la voiture suivante:<P></H1><H1>".@$nom."</H1>";

onApprove: function(data, actions) {

return actions.order.capture().then(function(orderData) {

// Full available details

console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

// Show a success message within this page, e.g.

const element = document.getElementById('paypal-button-container');

element.innerHTML = '';

element.innerHTML = '<h3>Merci pour votre paiement! </h3>';

// Or go to another URL: actions.redirect('thank_you.html');

});

onError: function(err) {

console.log(err);

}

}).render('#paypal-button-container');

}

initPayPalButton();

</script>

</CENTER>

</BODY>

</HTML>

Pour faire un test et payer:

sb-qpned3842935@personal.example.com
mot de passe : =NX2xA_9

J'ai juste 5 000 $ dans mon compte SVP soyez pas trop "dépenseux" ou "dépensière" ??!!??

Vive le service "à clientèle" !!!!

Exemple : https://php.dinf.ca/cours/Paiement/paiement2.php

Insérer une page PHP dans un projet Angular

Exemple:

Choix #1

Envoyer la page PHP dans un nouvel onglet: (-0,5 point, plus facile)

Code à

<a class="nav-link" routerLinkActive="active" href="http://localhost/angular/VoituresFinal/panier/liste.php" target="_blank">Panier</a>

</li>

Choix #2

Envoyer la page PHP dans un component de Angular: (Maximum de points)

Code à

// Exemple avec 3 options possible...

// Dans le fichier tamplate/html de votre component Angular...

<!DOCTYPE html>

<html>

<head>

<title>Test objet</title>

</head>

<body>

</object>

// ou

</iframe>

// ou

</iframe>

</body>

</html>

Exemple de projet final : https://php.dinf.ca/