Как сохранить и извлечь данные, доступные для редактирования
Я хочу, чтобы администраторы моего сайта могли изменять текст некоторых страниц. Использование 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>";
}
?>
1 answers
Используйте язык на стороне клиента, такой как JavaScript (или, лучше всего, jQuery), чтобы управлять возможностью редактирования полей ввода.
Используйте AJAX, чтобы захватить данные поля и отправить их в PHP-файл, который сохранит данные в вашей базе данных.
Вот очень упрощенный пример использования jQuery для управления включением/отключением полей ввода:
$('.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 здесь:
ОБНОВИТЬ РЕДАКТИРОВАТЬ:
Чтобы ответить на ваш запрос о комментариях:
Чтобы отправить данные из 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
});
});