Comment enregistrer et récupérer des données modifiables
Je souhaite que les administrateurs de mon site Web puissent modifier le texte de certaines pages. Utiliser contentediteble serait parfait pour moi.
Le problème est que je ne sais que programmer en PHP. J'ai cherché sur Internet pendant des heures à essayer de le faire fonctionner pour moi, mais je ne comprends tout simplement pas les langages de programmation utilisés pour stocker suffisamment les données pour le faire fonctionner.
Voici comment j'aimerais que cela fonctionne:
1. L'administrateur clique sur un bouton "modifier"
2. div devient modifiable.
3. Lorsque l'administrateur est prêt à modifier, il clique sur un bouton "enregistrer"
4. Les données sont enregistrées dans un fichier ou une base de données (je ne sais pas vraiment quelle serait la meilleure option).
5. Le contenu modifié apparaît lorsque la page est ouverte.
C'est tout ce que j'ai pour l'instant:
<div class='big_wrapper' contenteditable>
PAGE CONTENT
</div>
Je sais comment faire la partie avec la conversion du div en un div contentable lorsque l'administrateur clique sur "modifier".
Mon problème est que je n'ai vraiment aucune idée de comment sauvegarder les données éditées.
Je ne sais pas non plus s'il serait difficile de récupérer les données d'un fichier, cela dépend de la façon dont les données sont enregistrées. S'il est enregistré dans une base de données, je n'aurais aucun problème à le récupérer, mais je ne sais pas si c'est possible et si c'est la meilleure option.
Merci de votre aide,
Samuël
ÉDITER:
@gibberish, merci beaucoup pour votre réponse super rapide!
J'ai essayé de le faire fonctionner, mais cela ne fonctionne pas encore. Je ne peux pas comprendre ce que je fais mal.
Voici mon code:
over_ons.php:
<div class='big_wrapper' contenteditable>
PAGE CONTENT
</div>
<input type='button' value='Send Data' id='mybutt'>
<script type="text/javascript">
$('#mybutt').click(function(){
var myTxt = $('.big_wrapper').html();
$.ajax({
type: 'post',
url: 'sent_data.php',
data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
});
});
</script>
sent_data.php:
<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');
$tekst=$_POST['myTxt'];
$query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'";
mysql_query($query);
?>
Merci encore pour votre grande aide!
Pouvez-vous également m'aider à rendre le div modifiable uniquement lorsque l'utilisateur appuie sur un bouton?
SOLUTION:
Il m'a fallu plus de 2 semaines pour enfin faire fonctionner tout. J'ai dû apprendre javascript, jQuery et Ajax. Mais maintenant, cela fonctionne parfaitement. J'ai même ajouté quelques extras pour la fantaisie :)
J'aimerais partager comment j'ai fait cela si quelqu'un veut faire de même.
over_ons.php:
//Active page:
$pagina = 'over_ons'; ?>
<input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php
} ?>
<!--Editable DIV: -->
<div class='big_wrapper' id='editable'>
<?php
//Get eddited page content from the database
$query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'");
while($inhoud_test=mysql_fetch_array($query)){
$inhoud=$inhoud_test[0];
}
//Show content
echo $inhoud;
?>
</div>
<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
<div id='sidenote'>
<input type='button' value='Bewerken' id='sent_data' class='button' />
<div id="feedback" />
</div>
<?php }
Comme il s'agit d'un fichier assez long et compliqué, j'ai essayé de traduire la plupart de mes commentaires en anglais.
Si vous voulez traduire quelque chose qui n'est pas déjà traduit, la langue d'origine est le néerlandais.
javascript.js:
//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button
if(value == 'Verstuur bewerkingen'){
return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});
//Make content editable
$('#sent_data').click(function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button
if(value == 'Bewerken'){
$('#sent_data').attr('value', 'Verstuur bewerkingen'); //change the name of the edit button
var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div editable
$div.prop('contenteditable',!isEditable).toggleClass('editable')
$('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
}else if(value == 'Verstuur bewerkingen'){
var pagina = $('#pagina').val();
var editor = $('#editor').val();
var div_inhoud = $("#editable").html();
$.ajax({
type: 'POST',
url: 'sent_data.php',
data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor,
success: function(data){
Change the div back tot not editable, and change the button's name
$('#sent_data').attr('value', 'Bewerken'); //change the name of the edit button
var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div not editable
$div.prop('contenteditable',!isEditable).toggleClass('editable')
//Tell the user if the edditing was succesfully
$('#feedback').html(data);
setTimeout(function(){
var value = $('#sent_data').attr('value'); //look up the name of the edit button
if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
$('#feedback').text('');
}
}, 5000);
}
}).fail(function() {
//If there was an error, let the user know
$('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
});
}
});
Et enfin,
sent_data.php:
<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');
//Look up witch page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);
$query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'";
}
if(mysql_query($query)){
echo "<p class='opvallend'>Successfully saves changes.</p>";
}else{
echo "<p class='opvallend'>Saving of changes failed.<BR>
Please try again.</p>";
}
?>
Utilisez un langage côté client, tel que JavaScript (ou mieux, jQuery), pour gérer si les zones de saisie peuvent être modifiées.
Utilisez AJAX pour saisir les données de champ et les tirer vers un fichier PHP, qui collerait les données dans votre base de données.
Voici un exemple très simplifié d'utilisation de jQuery pour gérer l'activation/désactivation des champs de saisie:
$('.editable').prop('disabled',true);
$('.editbutt').click(function(){
var num = $(this).attr('id').split('-')[1];
$('#edit-'+num).prop('disabled',false).focus();
});
$('.editable').blur(function(){
var myTxt = $(this).val();
$.ajax({
type: 'post',
url: 'some_php_file.php',
data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
});
});
Fichier PHP: some_php_file.php
<?php
$myVar = $_POST['varname'];
$secondVar = $_POST['anothervar'];
//Now, do what you want with the data in the vars
Utiliser AJAX est assez facile. J'ai donné un très bref exemple de ce à quoi il ressemblerait. Ne cherchez pas dans le HTML ou jQuery la variable moreTxt - j'ai ajouté cela pour montrer comment vous ajouteriez une deuxième var de données à l'ajax.
Voici quelques exemples de base pour vous familiariser avec ajax:
rappel de demande AJAX utilisant jQuery
Il n'y a pas de court chemin pour apprendre jQuery ou AJAX. Lisez les exemples et expérimentez.
Vous pouvez trouver d'excellents tutoriels jQuery gratuits ici:
MODIFIER LA MISE À JOUR:
Pour répondre à votre demande de commentaire:
Pour envoyer des données d'un DIV vers un fichier PHP, vous devez d'abord un événement qui déclenche le code. mentionné, dans un champ de saisie, il peut s'agir de l'événement blur(), qui se déclenche lorsque vous quittez un champ. Sur un <select>, il peut s'agir de l'événement change(), qui se déclenche lorsque vous choisissez une sélection. Mais sur un DIV ... eh bien, l'utilisateur ne peut pas interagir avec un div, non? Le déclencheur doit être quelque chose que l'utilisateur fait , comme cliquer sur un bouton.
Ainsi, l'utilisateur clique sur un bouton - vous pouvez obtenir le contenu du DIV en utilisant la commande .html(). (Sur les zones de saisie et les contrôles de sélection, vous utiliseriez .val(), mais sur les DIV et les cellules de tableau, vous devez utiliser .html(). Le code ressemblerait à ceci:
Comment envoyer du contenu DIV après avoir cliqué sur un bouton:
HTML:
<div class='big_wrapper' contenteditable>
PAGE CONTENT
</div>
<input id="mybutt" type="button" value="Send Data" />
jQuery:
$('#mybutt').click(function(){
var myTxt = $('.big_wrapper').html();
$.ajax({
type: 'post',
url: 'some_php_file.php',
data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
});
});
Vous pouvez enregistrer la page client entière avec ceci:
<script>
function saveAs(filename, allHtml) {
allHtml = document.documentElement.outerHTML;
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
</script>
hth