php - Cómo guardar y recuperar datos susceptibles de ser editados.

jquery ajax

Question

Quiero que los administradores de mi sitio web puedan cambiar el texto de algunas páginas. Usar contentediteble sería perfecto para mí.
El problema es que solo sé programar en PHP. He buscado en Internet durante horas tratando de que funcione para mí, pero simplemente no entiendo los lenguajes de programación utilizados para almacenar los datos lo suficiente como para que funcione.

Así es como me gustaría que funcione:
1. El administrador pulsa un botón ''editar''
2. div se convierte en editable.
3. Cuando el administrador está listo para editar, pulsa un botón ''guardar''
4. Los datos se guardan en un archivo o base de datos (no sé cuál sería la mejor opción).
5. El contenido editado aparece cuando se abre la página.

Esto es todo lo que tengo por ahora:

<div class=''big_wrapper'' contenteditable>
  PAGE CONTENT
</div>

Sé cómo hacer la parte con la conversión del div a un div contenteditable cuando el administrador pulsa "editar".
Mi problema es que realmente no tengo idea de cómo guardar los datos editados.
Tampoco sé si sería difícil recuperar los datos de un archivo, dependiendo de la forma en que se guardan los datos. Si se guarda en una base de datos, no tendría ningún problema en recuperarlo, pero no sé si eso es posible y si esa es la mejor opción.

Gracias por tu ayuda,

Samuel

EDITAR:

@gibberish, ¡muchas gracias por tu súper rápida respuesta!
Traté de hacerlo funcionar, pero aún no funciona. No puedo entender lo que estoy haciendo mal.

Aquí está mi código:
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);
?>

Gracias de nuevo por tu gran ayuda!
¿Puedes ayudarme a hacer que la división sea editable solo cuando el usuario pulsa un botón?

SOLUCION :

Me tomó más de 2 semanas para finalmente hacer que todo funcionara. Tuve que aprender javascript, jQuery y Ajax. Pero ahora funciona perfectamente. Incluso agregué algunos extras para la fantasía :)
Me gustaría compartir cómo hice esto si alguien quiere hacer lo mismo.

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 }

Como este es un archivo bastante largo y complicado, intenté traducir la mayoría de mis comentarios al inglés.
Si desea traducir algo que no esté traducido, el idioma original es el holandés.
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>'');
                    });
    }
});

Y finalmente,
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>";
    }
?>

Answer 1

Use un lenguaje del lado del cliente, como JavaScript (o mejor, jQuery), para administrar si los cuadros de entrada podrían editarse.

Use AJAX para tomar los datos de campo y dispararlos a un archivo PHP, que pegaría los datos en su base de datos.

Aquí hay un ejemplo muy simplificado de usar jQuery para administrar habilitar / deshabilitar los campos de entrada:

jsFiddle Demo

$(''.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
    });
});

Archivo PHP: some_php_file.php

<?php 
    $myVar = $_POST[''varname''];
    $secondVar = $_POST[''anothervar''];
    //Now, do what you want with the data in the vars

Usar AJAX es bastante fácil. Di un breve ejemplo de cómo se vería. No busque en la variable moreTxt en el HTML o jQuery. moreTxt eso para mostrar cómo agregaría una segunda var. De datos al ajax.

Aquí hay algunos ejemplos básicos para ponerlo al día en ajax:

AJAX solicitud de devolución de llamada utilizando jQuery

No hay un camino corto para aprender jQuery o AJAX. Lee los ejemplos y experimenta.

Puedes encontrar algunos excelentes tutoriales gratuitos de jQuery aquí:

http://thenewboston.com

http://phpacademy.org

ACTUALIZAR EDITAR:

Para responder a su consulta de comentarios:

Para enviar datos de un archivo DIV a un archivo PHP, primero necesita un evento que active el código. Como mencionó, en un campo de entrada, este puede ser el evento blur() , que se dispara cuando deja un campo. En una <select> , puede ser el evento change() , que se activa cuando se selecciona una selección. Pero en un DIV ... bueno, el usuario no puede interactuar con un div, ¿verdad? El activador debe ser algo que haga el usuario, como hacer clic en un botón.

Entonces, el usuario hace clic en un botón; puede obtener el contenido del DIV utilizando el comando .html() . (En los cuadros de entrada y los controles de selección, .val() , pero en DIV y celdas de la tabla, debes usar .html() . El código se vería así:

Cómo enviar contenido DIV después de hacer clic en un botón:

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
    });

});