How to allow users to edit content of webpage and save it for all viewers? [closed]
I am trying to make a website where it starts with simple text, "Hello". Then, anyone who comes to the website can change the content to whatever they like, saving it not just for themselves but for the website itself. Then another viewer can come in and change it, and so on. I'd like to also keep a database of all edited content, but only for myself.
So my question is, what tools/languages would be helpful to this? Or can anyone point to any tutorials? I am such a beginner, that I have no clue really where to start. This seems really helpful, but it seems to make changes only for yourself.: http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/
Sorry if this is a very simple question that I am overcomplicating. I appreciate any help!
There are many aspects to your question. First, you may need a registration/login system. For that, you will need both front-end (javascript/jQuery) and back-end (PHP) programming.
If you have a login system, you should learn about PHP sessions.
You will need to read/write into a database. This would be back-end (PHP). Many tutorials currently cover only the older mysql_ commands; you must learn either mysqli_ or PDO format (as the older style still works but is deprecated).
You should learn jQuery and javascript. jQuery will be very helpful, and don't listen to those who say you must learn javascript first -- I didn't and I am now filling-in what I missed about javascript after having designed numerous sites.
There are many places to find tutorials, but I can recommend these:
PHPAcademy.org - used to be free, but is now just low-priced
Registration and Login tutorial
PHP and MySQL with PDO and mysqli_TheNewBoston.com -- try this one:
Project Lisa - Unfinished tutorial but very good
Intro to PHP
Intro to jQuery
You are correct that the example you posted only saves edits for the current user (and for future visits by that same user). The changes are saved on the user's local computer, not on the server. The easiest way to store edits on the server is to write them to a database, such as MySQL.
Here is an example of why you might prefer to learn jQuery over plain javascript:
The javascript way:
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
The jQuery way:
function saveEdits() {
//get the edited element content
var userVersion = $("#edit").var();
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
$("#update").val("Edits saved!");
}
Much less typing -- especially over an entire project -- using the jQuery way. Also, jQuery takes care of all cross-browser issues for you. With javascript you must code for each browser yourself. For most developers, jQuery is faster and easier.