Foros del Web - Ver Mensaje Individual - Wall Share

mktalternativa · #1 (**permalink**) 03/04/2014, 08:53

Hola estoy armando una mini red social y tengo este script para el muro! funciona barbaro pero quiero agregar la posibilidad como face de agregar una foto y otra opcion para agregar un albun! como podria sumarlo a este codigo , probe de algunas formas y no logro hacerlo

index.php

Código:

<!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" lang="en_US" xml:lang="en_US">
<!--
 * Creado el 25/08/2011
 *
 * Autor: Daniel Mora
 * Email: [email protected]
 * 
-->
 <head>
  <title>Social Tablero de comando</title>
  
  <!-- Se incluye el framework de JavaScript "JQuery" -->
  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
  function loadWall(){
     //Funcion para cargar el muro
     $("#wall").load('wall.php');
     //Devuelve el campo message a vacio
     $("#msg").val("")
  }
  
  //Cuando el documento esta listo carga el muro
 $(document).ready(function(){
   loadWall();
 });
  </script>
  
  <!-- Le doy un poco de estilo-->
  <style type="text/css">
     body{
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
     }
     label{
        color: #808080;
        font-size: 11px;
        font-weight: bold;
        line-height: 30px;
     }
     #wrapper{
        width: 605px;
        margin-left: auto;
        margin-right: auto;
     }
     #msg{
        border: thin solid #B4BBCD !important;
        padding: 5px;
     }
     #submit{
        color: #fff;
        font-size: 13px;
        background-color: #5B74A8;
        background-image: url("background.png");
        background-position: 0 -98px;
        background-repeat: no-repeat;
        border-color: #29447E #29447E #1A356E;
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
       display: inline-block;
       font-weight: bold;
       line-height: normal !important;
       padding: 4px 6px 4px;
       text-align: center;
       text-decoration: none;
       vertical-align: top;
       white-space: nowrap;
     }
     #wall{
        width: 430px;
        min-height: 200px;
        border: solid thin #B4BBCD;
        margin-top: 10px;
     }
     #wall ul{
        list-style: none;
        font-size: 12px;
        line-height: 20px;
     }
     #wall ul #date{
        font-style: italic;
        font-size: 11px;
        color: #ccc;
        padding-left: 5px;
     }
     #loading{
        float: left;
        position:relative;
        top: 10px;
        left: 450px;
        display: none;
     }
  </style>
  
 </head>
 <body>
 <div id="wrapper">
 
    <div id="form">
       <form action="javascript: addMessage();" method="post" id="form_wall">
          <label for="msg">Escribi texto para compartir...</label>
          <br />
          <input type="text" name="msg" id="msg" maxlength="200" size="50" />
		  <input type="file" name="img" id="img" >
          <input type="submit" name="submit" id="submit" value="Publicar" />
       </form>
    <div id="loading"><img src="img/loading.gif" style="width:50px;"/></div>
    </div>
    
    <div id="wall"></div>
    
 </div>
 
<script>
   function addMessage(){
      
      //Tomas el valor del campo msg      
      var msg = $("#msg").val();
      
	 
      
      //Si empieza el ajax muestro el loading
      $("#loading").ajaxStart(function(){
         $("#loading").show();
      });
      
      //Cuando termina el ajax oculta el loading
      $("#loading").ajaxStop(function(){
         $("#loading").hide();
      });
      
      //Se envian los datos a url y al completarse se recarga el muro
      //con la nueva informacion
      $.ajax({
         url: 'action.php',
         data: 'msg='+ msg,
         type: 'post',
         error: function(obj, msg, obj2){
            alert(msg);
         },
         success: function(data){
            loadWall();
         }
      });      
   };
</script>
 </body>
</html>

wall.php

Código:

<?php
/*
 * CREATE DATABASE wall;
 * CREATE TABLE message (id int AUTO_INCREMENT , message tinytext, date timestamp, PRIMARY KEY(id));
 * 
 */

//Conecto al servidor
$cx = mysql_connect("localhost", "tabla", "pass") or die("Error connect: ".mysql_error());
 
//Seleccion la base de datos
mysql_select_db("base") or die("Error select db: ".mysql_error());

//Realizo la consulta de la tabla y ordeno por fecha (El ultimo mensaje de primero)
$query = mysql_query("SELECT * FROM muromensajes ORDER BY date DESC", $cx);

//Muestro los mensaje en una lista desordenada
echo '<ul id="message">';
//Si la consulta es verdadera
if($query == true){
   //Recorro todos los campos de la tabla y los muestro
   while ($row = mysql_fetch_array($query)){
      echo "<li><p>".$row['message']." <span id=\"date\">".$row['date']."</span></li>";
   }
}
echo '</ul>'
?>

action.php

Código:


<?php
//Defino mi variable mensaje
$msg = $_POST['msg'];

//Si no esta vacia
if(!empty($msg)){
   //Conecto con la base de datos
   $cx = mysql_connect("localhost", "tabla", "pass") or die("Error connect: ".mysql_error());
   //Selecciono la base de datos
   mysql_select_db("base") or die("Error select db: ".mysql_error());
   //Inserto el mensaje al tabla
   mysql_query("INSERT INTO muromensajes (message) VALUES ('".$msg."')", $cx);
}
?>