SoloCodigo

Programación Web y Scripting => PHP => Mensaje iniciado por: Ivannightcrawler en Jueves 11 de Agosto de 2011, 15:46

Título: Graaan problema con mi examen final =P
Publicado por: Ivannightcrawler en Jueves 11 de Agosto de 2011, 15:46
Hola que tal a todos,    estoy trabajando en hacer una specie de wall, como la de facebook.   Y me he vuelto loco buscando maneras, pero de ninguna manera me salee,  quisiera saber si por favor me dan consejo de que me falta, o que deberia hacer xD.

Es algo my básico lo que quiero conseguir, pero vaya que es complicado. lo que tengo es,  una hoja HTML con la siguente tabla:

Código: [Seleccionar]
<form name="postbar_add_post" id="postbar_add_post" action="" method="post">
<fieldset>
    <legend>Type your text below...</legend>
        <input type="text" name="addcontentbox" id="addcontentbox" maxlength="200" />
        <input type="submit" name="addpost" value="Submit" class="submit" />
</fieldset>
</form>
<ul id="pared"></ul>


Y lo que quisiera hacer es que una vez se submita lo escrito, que se desplegue en el "ul"  y haga una especie de wall de facebook.     Posteo en el foro de PHP porque creo que es con php que se puede lograr.. pero no estoy seguroo.

Fijense como he dejado en el atributo "action" de la primera linea en la tabla en blanco,  pues he pensado que si linkeo un php quizas sea posible.  pero he ahi donde estoy estancado....   no tengo ni idea de como hacer para un php postee lo escrito en el ul..

habuia pensado algo que llame a la funcion de postear, algo asi:

Código: [Seleccionar]
<?php
function post(text) {
if(text.value=="") {return;}
post2("post.php?text="+text.value);
}
?>  

Y luego, poner en la cabeza, un script que entonces haga la funcion de postear. .. pero he aqui hasta donde he podido avanzar xD. mis conocimientos de php son my limitados >.<  ...      me imagino es algo como
Código: [Seleccionar]
echo $text; ,  pero siento que me falta Muuuuuuuuuuchoo mas que solo eso.          Tampoco se si me haría falta algo en el "ul"

Esto es algo un poco avanzado para mi, pero de verdad quiero aprender xD.

lol. Alguien me puede ayudar o dar guia en esta odisea? :P
Título: Re:Graaan problema con mi examen final =P
Publicado por: ibito en Viernes 12 de Agosto de 2011, 18:06
No se que tan lejos quieras llevar esto, supongo que al hablar de PHP, lo que tu quieres es que se guarde el mensaje en una base de datos.

Si no, creo que lo mas fácil sería JavaScript, donde te recomendaría que cambies el submit a un simple button y en un onclick llamar una función que haga lo que quieres.

Título: Re:Graaan problema con mi examen final =P
Publicado por: Ivannightcrawler en Viernes 12 de Agosto de 2011, 22:17
Cita de: ibito en Viernes 12 de Agosto de 2011, 18:06
No se que tan lejos quieras llevar esto, supongo que al hablar de PHP, lo que tu quieres es que se guarde el mensaje en una base de datos.

Si no, creo que lo mas fácil sería JavaScript, donde te recomendaría que cambies el submit a un simple button y en un onclick llamar una función que haga lo que quieres.

Gracias!!!!

Estoy trabajando en javascript exactamente de esa maenraaa,  pero creo que el proposito maximo es que se quede guardado en el website,  supongo que si, debo hacer que guard en una base de datos....   Pero, como logro hacer una base de datos?        te refieres a  SQL ?           
Título: Re:Graaan problema con mi examen final =P
Publicado por: Ivannightcrawler en Sábado 13 de Agosto de 2011, 02:05
lol, olvidenlo, creo que mejor espero a aprender php mejor, loool.    sorryy
Título: Re:Graaan problema con mi examen final =P
Publicado por: RadicalEd en Martes 23 de Agosto de 2011, 22:55
Lo que pides se puede hacer con una DB tipo MySQL y para que la página no se te refresque puedes usar AJAX o en su defecto el JQuery y que todo te lo acomode en ul como tú lo quieres, cualquier duda postea
Título: Re:Graaan problema con mi examen final =P
Publicado por: danmoracr en Viernes 26 de Agosto de 2011, 16:07
Buenas!!! Yo se que es un poco tarde pero tengo algo que talvez te pueda ayudar.

Esta sería la página donde está el muro:
Código: HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
  5. <!--
  6. * Creado el 25/08/2011
  7. *
  8. * Autor: Daniel Mora
  9. * Email: danmoracr@gmail.com
  10. *
  11. -->
  12.  <head>
  13.   <title>Wall Tipo Facebook</title>
  14.  
  15.   <!-- Se incluye el framework de JavaScript "JQuery" -->
  16.   <script type="text/javascript" src="jquery.js"></script>
  17.   <script type="text/javascript">
  18.   function loadWall(){
  19.         //Funcion para cargar el muro
  20.         $("#wall").load('wall.php');
  21.         //Devuelve el campo mensaje a vacio
  22.         $("#msg").val("")
  23.   }
  24.  
  25.   //Cuando el documento esta listo carga el muro
  26.  $(document).ready(function(){
  27.         loadWall();
  28.  });
  29.   </script>
  30.  
  31.   <!-- Le doy un poco de estilo-->
  32.   <style type="text/css">
  33.         body{
  34.                 font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  35.         }
  36.         label{
  37.                 color: #808080;
  38.                 font-size: 11px;
  39.                 font-weight: bold;
  40.                 line-height: 30px;
  41.         }
  42.         #wrapper{
  43.                 width: 605px;
  44.                 margin-left: auto;
  45.                 margin-right: auto;
  46.         }
  47.         #msg{
  48.                 border: thin solid #B4BBCD !important;
  49.                 padding: 5px;
  50.         }
  51.         #submit{
  52.                 color: #fff;
  53.                 font-size: 13px;
  54.                 background-color: #5B74A8;
  55.                 background-image: url("background.png");
  56.                 background-position: 0 -98px;
  57.                 background-repeat: no-repeat;
  58.                 border-color: #29447E #29447E #1A356E;
  59.             border-style: solid;
  60.             border-width: 1px;
  61.             cursor: pointer;
  62.             display: inline-block;
  63.             font-weight: bold;
  64.             line-height: normal !important;
  65.             padding: 4px 6px 4px;
  66.             text-align: center;
  67.             text-decoration: none;
  68.             vertical-align: top;
  69.             white-space: nowrap;
  70.         }
  71.         #wall{
  72.                 width: 430px;
  73.                 min-height: 200px;
  74.                 border: solid thin #B4BBCD;
  75.                 margin-top: 10px;
  76.         }
  77.         #wall ul{
  78.                 list-style: none;
  79.                 font-size: 12px;
  80.                 line-height: 20px;
  81.         }
  82.         #wall ul #date{
  83.                 font-style: italic;
  84.                 font-size: 11px;
  85.                 color: #ccc;
  86.                 padding-left: 5px;
  87.         }
  88.         #loading{
  89.                 float: left;
  90.                 position:relative;
  91.                 top: 10px;
  92.                 left: 450px;
  93.                 display: none;
  94.         }
  95.   </style>
  96.  
  97.  </head>
  98.  <body>
  99.  <div id="wrapper">
  100.  
  101.         <div id="form">
  102.                 <form action="javascript: addMessage();" method="post" id="form_wall">
  103.                         <label for="msg">Type text below...</label>
  104.                         <br />
  105.                         <input type="text" name="msg" id="msg" maxlength="200" size="50" />
  106.                         <input type="submit" name="submit" id="submit" value="Share" />
  107.                 </form>
  108.         <div id="loading"><img src="loading.gif" /></div>
  109.         </div>
  110.        
  111.         <div id="wall"></div>
  112.        
  113.  </div>
  114.  
  116.         function addMessage(){
  117.                
  118.                 //Tomas los valores del form_wall
  119.                 var str = $("#form_wall").serialize();
  120.                
  121.                 //Si empieza el ajax muesta el loading
  122.                 $("#loading").ajaxStart(function(){
  123.                         $("#loading").show();
  124.                 });
  125.                
  126.                 //Cuando termina el ajax oculta el loading
  127.                 $("#loading").ajaxStop(function(){
  128.                         $("#loading").hide();
  129.                 });
  130.                
  131.                 //Se envian los datos a url y al completarse se carga el muro
  132.                 //con la nueva informacion
  133.                 $.ajax({
  134.                         url: 'action.php',
  135.                         data: str,
  136.                         type: 'post',
  137.                         error: function(obj, msg, obj2){
  138.                                 alert(msg);
  139.                         },
  140.                         success: function(data){
  141.                                 loadWall();
  142.                                
  143.                         }
  144.                 });            
  145.         };
  147.  </body>
  148. </html>
  149.  

wall.php
Código: PHP
  1. <?php
  2. /*
  3.  * CREATE DATABASE wall;
  4.  * CREATE TABLE message (id int AUTO_INCREMENT , message tinytext, date timestamp, PRIMARY KEY(id));
  5.  *
  6.  */
  7.  
  8. //Conecto al servidor
  9. $cx = mysql_connect("localhost", "root", "") or die("Error connect: ".mysql_error());
  10.  
  11. //Seleccion la base de datos
  12. mysql_select_db("wall") or die("Error select db: ".mysql_error());
  13.  
  14. //Realizo la consulta de la tabla y ordeno por fecha, el ultimo mehsaje de primero
  15. $query = mysql_query("SELECT * FROM message ORDER BY date DESC", $cx);
  16.  
  17. //Muestro los mensaje en una lista desordenada
  18. echo '<ul id="message">';
  19. //Si la consulta es verdadera
  20. if($query == true){
  21.         //Recorro todos los campos de la tabla y los muestro
  22.         while ($row = mysql_fetch_array($query)){
  23.                 echo "<li><p>".$row['message']." <span id=\"date\">".$row['date']."</span></li>";
  24.         }
  25. }
  26. echo '</ul>'
  27. ?>
  28.  

action.php
Código: PHP
  1. <?php
  2. //Defino mi variable mensaje
  3. $msg = $_POST['msg'];
  4.  
  5. //Si no esta vacia
  6. if(!empty($msg)){
  7.         //Conecto con la base de datos
  8.         $cx = mysql_connect("localhost", "root", "") or die("Error connect: ".mysql_error());
  9.         //Selecciono la base de datos
  10.         mysql_select_db("wall") or die("Error select db: ".mysql_error());
  11.         //Inserto el mensaje al tabla
  12.         mysql_query("INSERT INTO message (message) VALUES ('".$msg."')", $cx);
  13. }
  14. ?>
  15.