Tema: Sección de comentarios con PHP y MySQL
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 07/10/2014, 16:26
javonocc
 
Fecha de Ingreso: octubre-2014
Ubicación: Distrito Federal
Mensajes: 8
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Sección de comentarios con PHP y MySQL
Muchas gracias Mcruzmx!! Al no saber justamente cómo se realizan estos procesos me costaba mucho trabajo discernir qué era lo que necesitaba y cómo hacerlo, tienes toda la razón al mencionar que se deben hacer varios archivos php con tal de economizar el trabajo y no realizarlo de una forma perdida o ambigua. Fijate que he encontrado un método para realizarlo quizá de una forma más rápida pero con mayores elementos, tales como script en ajax, jquery, base de datos y mismo php, te lo comparto para que también le eches un ojo, seguramente esto ya lo conoces pero no está demás justamente compartir la información.

He redactado las variables de una manera más práctica y al momento de realizar las pruebas en sitio local, está mandando la información de forma efectiva, bien lo comentas que con distintos archivos es más funcional.

Te lo dejo:

Código PHP: 
Ver original
  1. <!--?php include('header2.php');?--><html><head>
  2. <link type="text/css" href="css/style.css" rel="stylesheet">
  3. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  4. <script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7.  
  8.     $("#enviar-btn").click(function() {
  9.  
  10.         var name = $("input#name").val();
  11.         var title = $("input#title").val();
  12.         var comment = $("textarea#comment").val();
  13.         var now = new Date();
  14.         var date_show = now.getDate() + '-' + now.getMonth() + '-' + now.getFullYear() + ' ' + now.getHours() + ':' + + now.getMinutes() + ':' + + now.getSeconds();
  15.  
  16.         var dataString = 'name=' + name + 'title=' + title + '&comment=' + comment;
  17.  
  18.         $.ajax({
  19.             type: "POST",
  20.             url: "addcomment.php",
  21.             data: dataString,
  22.             success: function() {
  23.                 $('#newmessage').append('<div class="comfinal"><div class="titulo">'+title+'</div><p><div class="nombre">'+name+' dice:</div><p><div class="datecom">'+date_show+'</div><p><div class="comentariotxt">'+comment+'</div></div>');
  24.             }
  25.         });
  26.         return false;
  27.     });
  28. });
  29. </script>
  30.  
  31.  
  32. </head><body>
  33. <div class="content">
  34.     <div class="principal">
  35.         <div class="contenedor">
  36.         <div class="formulario">
  37.             <h2 class="nombre-user">Cuenta el chisme</h2>
  38.             <span class="calificap">Califica</span>
  39.                 <form method="post" action="">
  40.                 <span class="tit">Nombre:</span><br/>
  41.                 <input type="text" class="cajanom" id="name" name="name" size="40" /><br/><br/>
  42.                 <span class="tit">Titulo del chisme:</span><br/>
  43.                 <input type="text" class="cajatit" id="title" name="title" size="40" /><br/><br/>
  44.                 <span class="tit">Tu chisme:</span><br/>
  45.                 <textarea name="comment" class="cajatxt" id="comment" rows="6" cols="65"></textarea>
  46.                 <br/><br/>
  47.                 <input name="submit" class="btn-default" type="submit" value="Envia tu Chisme" id="enviar-btn" />
  48.                 </form>
  49.         </div><!-- #formulario -->
  50.         <div class="clear"></div>
  51.         <div id="newmessage">
  52.         </div>
  53.         
  54.     </div><!-- #contenedor -->
  55. <!--?php include('sidebar.php');?-->
  56.  
  57. </div><!-- #principal -->
  58. </div><!-- #content -->
  59. <div class="clear"></div>
  60. <!--?php include('footer.php');?--></body></html>


La hoja de estilo:

Código CSS: 
Ver original
  1. /*LA RESENIA.php*/
  2.  
  3. .contenedor{
  4.     height: 600px;
  5.     width: auto;
  6.     float: left;
  7.     margin-right: 0px;
  8.     margin-left: 0px;
  9.     margin-bottom: 20px;
  10. }
  11. .formulario{
  12.     width: 550px;
  13.     height: auto;
  14.     float: left;
  15.     padding-left: 10px;
  16.     clear: left;
  17. }
  18. .chisme{
  19.     width: 550px;
  20.     color: #001489;
  21.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  22.     font-size: 28px;
  23.     font-style: normal;
  24.     font-weight: bold;
  25.     width: 550px;
  26.     margin: auto;
  27.     padding: 10px;
  28.     text-align: left;
  29.     margin-bottom: 10px;
  30.     height: none;
  31.     clear: left;
  32.     float: left;
  33. }
  34. .cajatit {
  35.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  36.     font-size: 12px;
  37.     font-style: normal;
  38.     font-weight: normal;
  39.     color: #000000;
  40.     background-color: #FFFFFF;
  41.     float: left;
  42.     width: 300px;
  43.     -webkit-border-radius: 5px;
  44.     border-radius: 5px;
  45. }
  46. .cajanom {
  47.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  48.     font-size: 12px;
  49.     font-style: normal;
  50.     font-weight: normal;
  51.     color: #000000;
  52.     background-color: #FFFFFF;
  53.     float: left;
  54.     width: 300px;
  55.     -webkit-border-radius: 5px;
  56.     border-radius: 5px;
  57. }
  58. .cajatxt {
  59.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  60.     font-size: 12px;
  61.     font-style: normal;
  62.     font-weight: normal;
  63.     background-color: #FFFFFF;
  64.     float: left;
  65.     height: auto;
  66.     width: 540;
  67.     min-width: 540px;
  68.     max-width: 540px;
  69.     min-height: 50px;
  70.     max-height: 50px;
  71.     -webkit-border-radius: 5px;
  72.     border-radius: 5px;
  73. }
  74. .tit{
  75.     font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  76.     font-size: 14px;
  77.     font-style: normal;
  78.     font-weight: bold;
  79.     color: #0085ca;
  80. }
  81. .btn-default {
  82.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  83.     font-size: 13px;
  84.     font-style: normal;
  85.     font-weight: bold;
  86.     color: #001489;
  87.     background-color: #0f8734;
  88.     border-style: none;
  89.     border-radius: 10px;
  90.     -webkit-border-radius: 10px;
  91.     width: 170px;
  92.     height: 30px;
  93.     margin-top: 30px;
  94. }
  95. .newmessage {
  96.     width: 550px;
  97.     height: auto;
  98.     float: left;
  99.     padding-left: 10px;
  100.     clear: left;
  101.     margin-top: 30px;
  102. }
  103. .comfinal {
  104.     width: 540px;
  105.     height: auto;
  106.     float: left;
  107.     padding-left: 10px;
  108.     clear: left;
  109.     margin-top: 20px;
  110. }
  111. .titulo{
  112.     width: 530px;
  113.     height: auto;
  114.     float: left;
  115.     clear: left;
  116.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  117.     font-size: 20px;
  118.     font-weight: bold;
  119.     color: #29BD33;
  120.     float: left;
  121.     margin-top: 5px;
  122.     margin-left: 10px;
  123. }
  124. .nombre{
  125.     width: 530px;
  126.     height: auto;
  127.     float: left;
  128.     clear: left;
  129.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  130.     font-size: 16px;
  131.     font-weight: bold;
  132.     color: #270ECC;
  133.     margin-top: 5px;
  134.     margin-left: 10px;
  135. }
  136. .datecom {
  137.     width: 530px;
  138.     height: auto;
  139.     float: left;
  140.     clear: left;
  141.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  142.     font-size: 10px;
  143.     font-weight: normal;
  144.     color: #270ECC;
  145.     float: left;
  146.     margin-top: 5px;
  147.     margin-left: 10px; 
  148. }
  149. .comentariotxt {
  150.     width: 530px;
  151.     height: auto;
  152.     float: left;
  153.     clear: left;
  154.     font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  155.     font-size: 12px;
  156.     font-weight: normal;
  157.     color: #000000;
  158.     float: left;
  159.     margin-top: 5px;
  160.     margin-left: 10px;
  161. }
  162. .calificap{
  163.     color: #00689F;
  164.     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  165.     font-style: normal;
  166.     font-weight: bold;
  167.     font-variant: normal;
  168.     font-size: x-large;
  169.     line-height: normal;
  170.     text-align: left;
  171.     margin-bottom: 5px;
  172.     margin-top: 5px;
  173. }


El PHP para agregar los datos a la tabla en la base de datos:

Código PHP: 
Ver original
  1. <?php
  2. require('config.php');
  3.  
  4. $name = utf8_decode($_POST['name']);
  5. $title = utf8_decode($_POST['title']);
  6. $comment = utf8_decode($_POST['comment']);
  7.  
  8.  
  9. $insert = mysql_query("INSERT INTO tbs_comentarios (nombre, titulo, comentario, comentarioip, hora, respuesta) VALUES ('$name', '$title', '$comment', now())", $conexion);
  10. ?>


El PHP de conexión con la base de datos:

Código PHP: 
Ver original
  1. <?php
  2.  
  3. $servername='localhost';
  4. $dbusername='';  //*****Debe cambiarse*****//
  5. $dbpassword='';  //*****Debe cambiarse*****//
  6. $dbname='';  //*****Debe cambiarse*****//
  7.  
  8. connecttodb($servername,$dbname,$dbusername,$dbpassword);
  9. function connecttodb($servername,$dbname,$dbuser,$dbpassword){
  10.     global $link;
  11.     $link=mysql_connect ("$servername","$dbuser","$dbpassword");
  12.     if(!$link){die("En este momento no se puede conectar con la base de datos");}
  13.     mysql_select_db("$dbname",$link) or die ("No se puede abrir la base de datos".mysql_error());
  14.     }
  15. ?>

Al realizar este proceso, he seguido tu consejo de divertirme, inicialmente me había sacado canas verdes, sin embargo con el paso del tiempo y al ver que estaba respondiendo localmente más me inspiraba a terminar el código y pulirlo poco a poco con ayuda de la lógica de la programación.

Así mismo, estoy buscando agregarle al código que de forma oculta se envíe la dirección IP de donde se comenta a la base de datos junto con los demás datos guardados, esto es únicamente porque como no pido un login para comentar, me gustaría tener la seguridad de que al recibir comentarios mal intencionados o inclusive de spam, pueda bloquear al comentarista utilizando su dirección IP. Sabes cómo puedo complementar esto que menciono en alguno de los archivos que tengo?

Así mismo quiero agregar un botón para responder sobre los comentarios que aparezcan, esto sería increíble para tener mayor contacto con los que comenten en la página, sabrías cómo complementarlo utilizando este mismo código?

Yo creo que para agregar el botón de respuesta sobre cada comentario, debe incluirse en la hoja de estilos el div junto con la referencia de la imagen y de esta manera tenerlo activo en invocarlo en el script de ajax, sin embargo cómo podría invocar a un cuadro de texto para realizar la respuesta?