Как сохранить и извлечь данные, доступные для редактирования


Я хочу, чтобы администраторы моего сайта могли изменять текст некоторых страниц. Использование contentediteble было бы идеальным для меня.
Проблема в том, что я знаю только, как программировать на PHP. Я часами искал в Интернете, пытаясь заставить его работать на меня, но я просто не понимаю языков программирования, используемых для хранения данных, достаточно, чтобы заставить его работать.

Вот как я хотел бы, чтобы это работало:
1. Администратор нажимает кнопку "Изменить"
2. div становится доступным для редактирования.
3. Когда администратор готов к редактированию, он нажимает кнопку "Сохранить"
4. Данные сохраняются в файл или базу данных (на самом деле не знаю, что было бы лучшим вариантом).
5. Отредактированный контент отображается при открытии страницы.

Это все, что у меня есть на данный момент:

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

Я знаю, как сделать часть с преобразованием div в div с возможностью редактирования, когда администратор нажимает "редактировать".
Моя проблема в том, что я действительно понятия не имею, как сохранить отредактированные данные.
Я также не знаю, будет ли это трудно извлечь данные из файла, это зависит от способа сохранения данных. Если он сохранен в базе данных, у меня не возникнет проблем с его извлечением, но я не знаю, возможно ли это и является ли это лучшим вариантом.

Спасибо за вашу помощь,

Самуэль


РЕДАКТИРОВАТЬ:

@тарабарщина, большое вам спасибо за ваш супер-быстрый ответ!
Я пытался заставить это работать, но пока не получается. Я не могу понять, что я делаю неправильный.

Вот мой код:
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);
?>

Еще раз спасибо за вашу огромную помощь!
Можете ли вы также помочь мне сделать div редактируемым только тогда, когда пользователь нажимает кнопку?


РЕШЕНИЕ:

Мне потребовалось более 2 недель, чтобы, наконец, заставить все работать. Мне пришлось изучать javascript, jQuery и Ajax. Но теперь он работает безупречно. Я даже добавил некоторые дополнительные функции для причудливости:)
Я хотел бы поделиться тем, как я это сделал, если кто-то захочет сделать то же самое.

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 }


Поскольку это довольно длинный и сложный файл, я попытался перевести большинство своих комментариев на английский.
Если вы хотите перевести что-то, что еще не переведено, язык оригинала - голландский.
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>');
                    });
    }
});


И, наконец,,
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>";
    }
?>
Author: Samuël Visser, 2014-09-11

1 answers

Используйте язык на стороне клиента, такой как JavaScript (или, лучше всего, jQuery), чтобы управлять возможностью редактирования полей ввода.

Используйте AJAX, чтобы захватить данные поля и отправить их в PHP-файл, который сохранит данные в вашей базе данных.

Вот очень упрощенный пример использования jQuery для управления включением/отключением полей ввода:

Демонстрация Jsfiddle

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

PHP-файл: some_php_file.php

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

Использование AJAX это довольно просто. Я привел очень краткий пример того, как это будет выглядеть. Не ищите в HTML или jQuery переменную moreTxt - я добавил ее, чтобы показать, как вы добавите вторую переменную данных в ajax.

Вот несколько основных примеров, которые помогут вам быстро освоиться с ajax:

Обратный вызов AJAX-запроса с помощью jQuery


Нет короткого пути к изучению jQuery или AJAX. Читайте примеры и экспериментируйте.

Вы можете найти некоторые отличные бесплатные учебные пособия по jQuery здесь:

Http://thenewboston.com

Http://phpacademy.org


ОБНОВИТЬ РЕДАКТИРОВАТЬ:

Чтобы ответить на ваш запрос о комментариях:

Чтобы отправить данные из DIV в файл PHP, сначала вам нужно событие , которое запускает код. Как вы упомянули, в поле ввода это может быть событие blur(), которое срабатывает, когда вы покидаете поле. В <select> это может быть событие change(), которое срабатывает, когда вы выбираете выделение. Но на DIV... ну, пользователь не может взаимодействовать с div, верно? Триггер должен быть чем-то, что пользователь делает , например, нажимает кнопку.

Итак, пользователь нажимает кнопку - вы можете получить содержимое DIV с помощью команды .html(). (В полях ввода и элементах управления выбором вы бы использовали .val(), но в разделителях и ячейках таблицы вы должны использовать .html(). Код будет выглядеть следующим образом:

Как отправить содержимое DIV после кнопки нажал:

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

});
 11
Author: gibberish, 2017-05-23 12:17:46