Comment enregistrer et récupérer des données contented

Je veux les admins de mon site web pour être en mesure de modifier le texte de quelques pages. À l'aide de contentediteble serait parfait pour moi.
Le problème est que je ne sais comment programmer en PHP. J'ai cherché sur internet pendant des heures à essayer de le faire fonctionner pour moi, mais je ne comprends pas les langages de programmation utilisés pour stocker les données assez pour le faire fonctionner.

C'est la façon dont je voudrais que cela fonctionne:
1. Admin frappe un bouton "modifier"
2. div devient modifiable.
3. Lorsque l'administrateur est prêt edditing, il appuie sur un bouton "enregistrer"
4. Les données sont enregistrées dans un fichier ou une base de données (ne sais pas vraiment quelle serait la meilleure option).
5. Le contenu modifié s'affiche 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 de la div pour un contenteditable div lorsque l'administrateur hits "modifier".
Mon problème est que je n'ai vraiment aucune idée de comment enregistrer les données modifiées.
Aussi, je ne sais pas si il serait difficile de récupérer les données à partir d'un fichier, depents sur la manière dont les données sont enregistrées. S'il est enregistré dans une base de données que je n'aurais aucun problème à le retrouver, mais je ne sais pas si c'est possible et si c'est la meilleure option.

Merci pour votre aide,

Samuël

EDIT:

@charabia, je vous remercie beaucoup pour votre super-réponse rapide!
J'ai essayé de le faire fonctionner, mais il 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 aide précieuse!
Pouvez-vous également m'aider à faire la div modifiable uniquement lorsque l'utilisateur appuie sur un bouton?

la SOLUTION:

Il m'a fallu plus de 2 semaines pour enfin faire everyting travail. J'ai dû apprendre le javascript, jQuery et Ajax. Mais maintenant, il fonctionne parfaitement. J'ai même ajouté quelques extras pour la fanciness 🙂
Je voudrais partager comment j'ai fait cela, si quelqu'un veut faire la même chose.

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 c'est assez long et compliqué de fichier, j'ai essayé de traduire la plupart de mes commentaires en anglais.
Si vous voulez traduire quelque chose qui est pas déjà traduits, 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>";
}
?>

source d'informationauteur Samuël Visser | 2014-09-11