Guardar y recuperar la entrada del usuario de la base de datos con javascript?

Estoy trabajando en un sitio pequeño y temporal que se usará para recostackr algunos nombres.

La idea es que las personas completen el número de su clase y su nombre y, una vez que presionen un botón, estos dos valores se agreguen a la página y puedan ser vistos por todos los que visiten el sitio.

Ya he hecho un concepto de esto usando javascript: www.googledrive.com/host/0B_eZKT0Ni3-tOXF5OVVQeWZRRjQ

El único problema es que los artículos realmente no están almacenados en el sitio. Por lo que yo sé, solo puedes lograr esto usando una base de datos, pero no tengo experiencia en vincular una base de datos a una página web.

¿Alguien puede ayudarme con esto o alguien sabe una fuente donde puedo encontrar una solución para esto? Mis búsquedas no encontraron nada.

Lo siento si estoy sonando como un “vampiro de ayuda”. Solo busqué una solución para ustedes porque no puedo encontrarla en ningún otro lado.

HTML:

 

Ploeg 1


Reeds ingeschreven mensen:

    Ploeg 2


    Reeds ingeschreven mensen:

      Ploeg 3


      Reeds ingeschreven mensen:

        Ploeg 4


        Reeds ingeschreven mensen:

          CSS es irrelevante

          Javascript:

            //eerste ploeg function changeText1() { var klas1 = document.getElementById('klas1').value; var naam1 = document.getElementById('naam1').value; if (document.getElementById('klas1').value != "" && document.getElementById('naam1').value != "") { var node = document.createElement("LI"); var textnode1 = document.createTextNode(klas1 + " " + naam1); node.appendChild(textnode1); document.getElementById("lijst1").appendChild(node); } } //tweede ploeg function changeText2() { var klas2 = document.getElementById('klas2').value; var naam2 = document.getElementById('naam2').value; if (document.getElementById('klas2').value != "" && document.getElementById('naam2').value != "") { var node = document.createElement("LI"); var textnode2 = document.createTextNode(klas2 + " " + naam2); node.appendChild(textnode2); document.getElementById("lijst2").appendChild(node); } } //derde ploeg function changeText3() { var klas3 = document.getElementById('klas3').value; var naam3 = document.getElementById('naam3').value; if (document.getElementById('klas3').value != "" && document.getElementById('naam3').value != "") { var node = document.createElement("LI"); var textnode3 = document.createTextNode(klas3 + " " + naam3); node.appendChild(textnode3); document.getElementById("lijst3").appendChild(node); } } //vierde ploeg function changeText4() { var klas4 = document.getElementById('klas4').value; var naam4 = document.getElementById('naam4').value; if (document.getElementById('klas4').value != "" && document.getElementById('naam4').value != "") { var node = document.createElement("LI"); var textnode4 = document.createTextNode(klas4 + " " + naam4); node.appendChild(textnode4); document.getElementById("lijst4").appendChild(node); } } 

          @SpencerWieczorek no está equivocado, PHP y MySql funcionarán para lo que necesita. Sin embargo, hay un poco de una curva de aprendizaje allí.

          Para un principiante, recomendaría usar Parse . Es gratis y hace que guardar y recuperar datos sea trivial. A continuación se muestra una aplicación sencilla que permite al usuario ingresar un año de clase y su nombre y guardarlos para que otros puedan verlos en la misma página.

          El fragmento aquí no funcionará debido a las restricciones SO …

          … pero aquí está un jsfiddle de trabajo

          Esto se logra con simple ole javascript BTW


          Para que esto funcione por su cuenta, deberá:

          1. Tendrá que ir a https://www.parse.com/#signup y crear una cuenta con ellos

          2. Vaya a https://www.parse.com/apps/new y cree una aplicación

          3. agréguelo en la etiqueta principal de su html

          4. Vaya a https://www.parse.com/apps/quickstart#parse_data/web/new , seleccione su aplicación del menú desplegable (arriba a la derecha), la función Parse.initialize() se mostrará aquí con la ID de la aplicación de su aplicación. y la clave de JavaScript , copie esta línea para más adelante

          5. Reemplace la función Parse.initialize() en mi ejemplo con la que copió en el paso 4

          6. Lea en su guía de JavaScript aquí para ver todo lo que puede hacer con el análisis

          7. para una mirada más profunda, consulte el Parke JavaScript SDK & Cloud Code Reference

          También puede interactuar con análisis con otros lenguajes de scripting si lo desea.


          Parse es gratis hasta una cierta cantidad de uso. Tengo una aplicación que usan diariamente más de 100 usuarios y que no llega a tener que pagar nada.

           Parse.initialize("Application ID", "JavaScript key"); function saveInput(){ //get our new values var klassYear = document.getElementById('klassYear').value.trim(); var studentName = document.getElementById('studentName').value.trim(); // dont continue if either value is blank if(klassYear=="" ||studentName=="" ){ alert ('Please fill in both fields.') ; return; } // create the `Parse` object var Klass = Parse.Object.extend("Klass"); var _klass = new Klass(); // set the object's values to our input values _klass.set("klassYear", klassYear); _klass.set("studentName", studentName); // save the object _klass.save(null, { success: function(_klass) { // if the save succeeded, add the new info to our page retrieveSavedInputs() }, error: function(_klass, error) { // save failed, do error handeling here console.log('Failed to create new object, with error code: ' + error.message); } }); } function retrieveSavedInputs(){ // create a query to search for our `Klass` items var Klass = Parse.Object.extend("Klass"); var query = new Parse.Query(Klass); query.find({ success: function(results) { // get our table's `tbody` and clear it var myTbl = document.getElementById('mytbl'); myTbl.innerHTML=''; // `results` is an array of all the matches // loop through each for(var i =0; i < results.length; i++){ // get the values from the saved object // note that `klassYear` and `studentName` // are not available within the scope of the `success` function var k = results[i].get("klassYear") var s = results[i].get("studentName") // create a table row with the info and add it at the top of `contents` myTbl.innerHTML = ''+k+''+s+'' + myTbl.innerHTML; } }, error: function(error) { console.log("Error: " + error.code + " " + error.message); } }); } // load all previously saved items window.onload = retrieveSavedInputs(); //clcik handeler for the btn document.getElementById("myBtn").addEventListener('click', saveInput , false); 
           table{ margin-top:50px; } 
            Class Year:  
          Name:

          Add a ame and year above and see it added to the list below
          Class Year Student Name
          Class Year:
          Name:

          Add a ame and year above and see it added to the list below
          Class Year Student Name