¿Conforme añades registros se muestren en una tabla? ¿Con o sin BBDD? Asumo que es sin BBDD por la simpleza de tu enunciado. Te pondré un ejemplo en mi malísimo PHP xD, porque el 99% de los temas en "Desarrollo web" son en PHP (casi no veo Java EE, Python o Ruby).
index.html
script.js
insert.php
table.php
Obviamente cuando cierres sesión o salgas de la página actual, la destruyes la sessión:
Te aviso que lo he hecho muy rápido y al ojo en Notepad++, no lo he probado (no tengo ni Apache instalado xDD), así que es muy probable que haya errores.
Saludos.
index.html
Código (html4strict) [Seleccionar]
<section class="panel">
<section class="panel-head">
<span class="panel-title">Insertar registros</span>
</section>
<section class="panel-body">
<input id="id" name="id" class="txt txt-id" placeholder="ID del producto"/>
<input id="name" name="name" class="txt txt-name" placeholder="Nombre"/>
<input id="description" name="description" class="txt txt-description" placeholder="Descripción"/>
<input id="price" name="price" class="txt txt-price" placeholder="Precio"/>
<button id="insert" class="btn btn-primary">Insertar</button>
<button id="clean" class="btn btn-default">Limpiar</button>
</section>
</section>
<section class="table-wrapper">
</section>script.js
Código (javascript) [Seleccionar]
window.addEventListener("load", init);
function init() {
var txtId = document.querySelector(".txt-id");
var txtName = document.querySelector(".txt-name");
var txtDescription = document.querySelector(".txt-description");
var txtPrice = document.querySelector(".txt-price");
document.querySelector("#insert").addEventListener("click", handleInsert);
function handleInsert() {
var formData = new Object();
formData["id"] = txtId.value;
formData["name"] = txtName.value;
formData["description"] = txtDescription.value;
formData["proce"] = txtPrice.value;
sendByAjax(formData);
}
function sendByAjax(data) {
var request = nre XMLHttpRequest();
request.open("POST", "/insert-product", true);
request.addEventListener("readystatechange", function() {
if(request.readystatechange != 4 || request.status != 200) {
// en caso de error, devolver algo del backend
alert(request.responseText);
} else {
// en caso de exito, el backend devuelve la tabla con todos los elementos
document.querySelector(".table-wrapper").innerHTML = request.responseText;
resetForm();
}
});
request.send("data="+data);
}
function resetForm() {
txtId.value = "";
txtName.value = "";
txtDescription.value = "";
txtPrice.value = "";
txtId.focus();
}
}insert.php
Código (php) [Seleccionar]
<?php
/** insert.php
* @Description This script store the new record into user session
* and return the table with all products
*/
if(!isset($_SESSION))
session_start();
if(!isset($_SESSION["products"]))
$_SESSION["products"] = array();
// convierte el JSON a array asociativo
$data = json_decode($_POST["data"], true);
array_push($_SESSION["products"], $data);
echo "/path/to/table.php"; // devuelve la tabla actualizadatable.php
Código (php) [Seleccionar]
<?php
/** table.php
* @Description This script create a table with all store products
*/
if(!isset($_SESSION))
session_start();
var $products = NULL;
if(!isset($_SESSION["products"]))
$products = $_SESSION["products"];
if (!is_null($products)) {
echo "<table>".
echo "<thead>".
echo "<tr>".
echo "<th>ID</th>".
echo "<th>Nombre</th>".
echo "<th>Descripción</th>".
echo "<th>Precio</th>".
echo "</tr">.
echo "</thead>".
echo "<tbody>".
for($product in $products) {
for($product as $key => $value) {
echo "<tr>".
echo "<td>$value</td>".
echo "</tr>"
}
}
echo "</tbody>".
echo "</table>";
}Obviamente cuando cierres sesión o salgas de la página actual, la destruyes la sessión:
Código (php) [Seleccionar]
session_destroy();Te aviso que lo he hecho muy rápido y al ojo en Notepad++, no lo he probado (no tengo ni Apache instalado xDD), así que es muy probable que haya errores.
Saludos.
