संतोषजनक डेटा को कैसे सहेजना और पुनर्प्राप्त करना

Question

मैं चाहता हूं कि मेरी वेबसाइट से व्यवस्थापक कुछ पृष्ठों के टेक्स्ट को बदलने में सक्षम हों। Contentediteble का उपयोग करना मेरे लिए सही होगा।
समस्या यह है कि मुझे केवल PHP में प्रोग्राम करने का तरीका पता है। मैंने इसे मेरे लिए काम करने की कोशिश करने के लिए घंटों तक इंटरनेट पर खोज की है, लेकिन मैं इसे प्रोग्रामिंग भाषाओं को समझ नहीं पा रहा हूं ताकि इसे काम करने के लिए पर्याप्त डेटा स्टोर किया जा सके।

यह मैं कैसे यह काम करना चाहते हैं:
1. व्यवस्थापक एक बटन 'संपादन'
2. div संपादन योग्य हो जाता है पूरी करता है।
3. जब व्यवस्थापक तैयार संपादन कर रहा है, तो वह बटन 'सेव'
पर क्लिक करता है 4. डेटा को फ़ाइल या डेटाबेस में सहेजा जाता है (वास्तव में यह नहीं पता कि सबसे अच्छा विकल्प क्या होगा)।
5. संपादित सामग्री तब दिखाई देती है जब पृष्ठ खोला जाता है।

यह सब मेरे पास है अब के लिए:

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

मुझे पता है कि एक contenteditable div जब व्यवस्थापक हिट 'संपादन' करने के लिए div परिवर्तित करने के साथ हिस्सा बनाने के लिए।
मेरी समस्या यह है कि मुझे वास्तव में कोई जानकारी नहीं है कि संपादित डेटा को कैसे सहेजना है।
मुझे यह भी नहीं पता कि फ़ाइल से डेटा पुनर्प्राप्त करना मुश्किल होगा या नहीं, डेटा को कैसे सहेजा जाता है, इस पर निर्भर करता है। यदि इसे किसी डेटाबेस में सहेजा जाता है तो मुझे इसे पुनर्प्राप्त करने में कोई समस्या नहीं होगी, लेकिन मुझे नहीं पता कि यह संभव है या नहीं और यदि यह सबसे अच्छा विकल्प है।

आपकी मदद के लिए धन्यवाद,

शमूएल

संपादित करें:

@gibberish, बहुत बहुत अपने सुपर त्वरित जवाब के लिए धन्यवाद!
मैंने इसे काम करने की कोशिश की, लेकिन यह अभी तक काम नहीं करता है। मैं यह नहीं समझ सकता कि मैं क्या गलत कर रहा हूं।
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 सप्ताह से अधिक लग गए अंत में everyting काम करने के लिए। मुझे जावास्क्रिप्ट, jQuery और अजाक्स सीखना पड़ा। लेकिन अब यह बेकार ढंग से काम करता है। मैंने फैननेस के लिए कुछ अतिरिक्त भी जोड़ा :)
मैं यह साझा करना चाहता हूं कि अगर कोई ऐसा करना चाहता है तो मैंने यह कैसे किया।

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: JavaScript जैसी

<?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

उपयोग एक क्लाइंट-साइड भाषा, (या सबसे अच्छा, jQuery), यह प्रबंधित करने के लिए कि क्या इनपुट बॉक्स संपादित किए जा सकते हैं।

फ़ील्ड डेटा को पकड़ने के लिए AJAX का उपयोग करें और उसे एक PHP फ़ाइल में आग लगाना, जो आपके डेटाबेस में डेटा चिपक जाएगा।

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

PHP फ़ाइल: some_php_file.php

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

---

यहाँ jQuery का उपयोग कर सक्रिय करने के प्रबंधन करने के लिए/इनपुट क्षेत्रों को निष्क्रिय करने के लिए एक बहुत ही सरल उदाहरण है

AJAX का उपयोग करना काफी है एसवाई। मैंने एक बहुत ही संक्षिप्त उदाहरण दिया कि यह कैसा दिखता है। moreTxt चर के लिए HTML या jQuery में न देखें - मैंने यह भी दिखाया कि आप AJAX में डेटा के दूसरे var को कैसे जोड़ देंगे।

यहाँ ajax पर लाने के लिए आप को लाने के लिए कुछ बुनियादी उदाहरण हैं:

AJAX request callback using jQuery

---

jQuery या AJAX सीखने के लिए कोई छोटा रास्ता नहीं है। उदाहरण और प्रयोग पढ़ें।

आप कुछ उत्कृष्ट, नि: शुल्क jQuery यहाँ ट्यूटोरियल पा सकते हैं:

http://thenewboston.com

http://phpacademy.org

---

अद्यतन संपादित करें:

अपनी टिप्पणी पूछताछ का उत्तर करने के लिए:

एक डीआईवी से एक PHP फ़ाइल में डेटा भेजने के लिए, पहले आपको ईवेंट की आवश्यकता है जो कोड को ट्रिगर करता है। जैसा कि आपने बताया है, एक इनपुट फ़ील्ड पर, यह blur() ईवेंट हो सकता है, जो फ़ील्ड छोड़ने पर ट्रिगर करता है। <select> पर, यह change() ईवेंट हो सकता है, जो आप चयन चुनते समय ट्रिगर करता है। लेकिन एक डीआईवी पर ... अच्छा, उपयोगकर्ता एक div के साथ बातचीत नहीं कर सकता है, है ना? ट्रिगर ऐसा कुछ होना चाहिए जो उपयोगकर्ता करता है, जैसे बटन क्लिक करना।

तो, उपयोगकर्ता एक बटन क्लिक करता है - आप .html() कमांड का उपयोग कर डीआईवी की सामग्री प्राप्त कर सकते हैं। (इनपुट बॉक्स का चयन करें और नियंत्रण पर, आप .val() का प्रयोग करेंगे, लेकिन divs और तालिका सेल पर आप .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 
    }); 

});