Recurro a ustedes ya que me han ayudado en otras ocaciones y espero que en este tema me pudiesen ayudar y también les sirba para quienes buscan una solución.
Estoy confeccionado un sistema de comentaros en una paginilla (HTML, JS, PHP), funciona super, pero el problema que tengo es que NO quedan posteados los mensajes cuando refresco la pagina o inmgreso nuevamente.
¿Que puedo hacer?, ¿que hay que hacer?, ¿hay que aplicar base de datos?, si es así, ¿me pueden ayudar?, ya que no sé como se trabaja con BD y menos en msql.
Si lo completo lo dono para que quede como aporte al foro.
HTML: Estructura del sistema de comentarios:
Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>comentarios</title>
<!--CSS-->
<link type="text/css" rel="stylesheet" href="css/mx.css" media="all" />
<!--JS-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mx.js"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
if(!Modernizr.input.autofocus){
$('input[autofocus]').trigger('focus');
}
});
</script>
</head>
<body>
<div id="wrapper-comment">
<div id="tittle-comment1"><h3>Envíanos tu comentario:</h3></div>
<div id="contenedor">
<form action="#" method="post">
<ul>
<li><input type="text" id="name" class="name" name="name" size="20" placeholder="Nombre / Alias(*)" /></li>
<li><textarea name="comment" id="comment" class="comment" rows="6" cols="55" placeholder="Ingresa tu comentario (*)"></textarea></li>
<li><input name="submit" type="submit" value="Comentar" id="enviar-btn" class="submit" /></li>
</ul>
</form>
</div><!--fin contenerdor form-->
<div id="tittle-comment2"><h1>Tus Comentarios:</h1></div>
<div id="wrapper-new-comment">
<h2 id="mensaje">No hay comentarios</h2>
<div id="comentarios">
<!-- aca apareceran los nuevos comentarios -->
</div><!--fin de nuevos comentarios-->
</div><!--fin wrapper resultados de lo comentarios-->
</div><!--fin wrapper-comment-->
</body>
</html>
PHP:Recopila los datos y entrega el mensaje en un ID llamado comentarios en html:
Código PHP :
?php
$nombre = $_POST['nombre'];
$comentario = $_POST['comentario'];
$fecha = date("d-m-Y");
$hora = date("H:i:s");
//aca podriamos guardar los datos en la base de datos
?>
<!-- Le damos formato al comentario (html) -->
<style type="text/css">
<!--
.wrapper-comment {
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px #666666;
border-radius: 2px 2px 2px2px;
list-style: none outside none;
padding: 10px;
margin-top: 15px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
width: 500px;
}
.wrapper-comment .comment-avatar {
float: left;
position: relative;
width: 70px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.wrapper-comment .comment-autor {
float: left;
padding-left: 5px;
padding-top: 10px;
position: relative;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #0D6928;
margin: 10px;
}
.wrapper-comment .comment-text {
margin-right: 10px;
padding-left: 10px;
padding-top: 5px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #666;
clear: both;
}
.wrapper-comment .comment-autor .alias {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
font-weight: bold;
color: #165A3B;
}
.wrapper-comment .comment-autor .date {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #338C26;
text-decoration: none;
}
-->
</style>
<body style="border:0px; margin:0px">
<div class="wrapper-comment"><div class="comment-avatar"><img src="images/avatar.png" width="70" height="70" border="0" /></div>
<div class="comment-autor"><strong class="alias"><?=$nombre?></strong> dice:<br/><small class="date"><?=$fecha?>|<?=$hora?></small></div>
<div class="comment-text"><?=$comentario?></div></div>
</body>
</html>
JS: Estructura del sistema de comentarios::Valida el form para que no agregue comentarios fantasmas y llama al archivo php.
Código Javascript :
$(document).ready(function(){
$('#enviar-btn').click(function(event){
event.preventDefault();
var nombre = $('#name').val();
var comentario = $('#comment').val();
if (nombre != '' && comentario != ''){
$("#mensaje").fadeOut(1000, function(){
$.post(
"datamejora.php",
{ nombre: nombre, comentario: comentario },
function(data) {
$("#comentarios").append(data);
},
"html");
$('#mensaje').text('Comentario agregado!');
});
$('#name').val('');
$('.comment').val('');
$('#name').focus();
}
else{
alert('Llene todos los datos, por favor');
}
});
});
Espero que me ayuden
Slds.
