Ing.

Moiss Torres

 Base

de Datos MySQL

 Qu
Qu

es el index.php?
hace el index.php?

Esta pagina har que nosotros al ingresar al index.php, nos muestre todas las noticas y estados publicados.

Creamos el archivo index.html

 Conexin

a la base de datos?

Crearemos el archivo que permitira recuperar informacion desde la base de datos.

Creamos el archivo db.php

travs del Bucle While mostraremos todos los estados que sean recuperados por el la consulta en la base de datos. El div con class "noticia" es el que mostrara el estado.

Creamos el archivo consulta.php

 Lo

que hace este cdigo , es verificar que se envo valores por el formulario, se conecta a la base de datos y guarda los datos, luego utiliza el mismo cdigo de "consulta.php", porque solo mostrara el estado que guardamos recin , es decir : Guarda la publicacin en la base de datos y luego la muestra.

Creamos el archivo insertarEstado.php

"$(".enviar_noticia".click(function()"lo que hace este cdigo es capturar el evento click del boton de Compartir de class "enviar_noticia" y activa la funcin que se escribe entre las llaves, en este caso recupera los valores de lo que escribimos y crea una variable con ese contenido "var textarea_noticia = $("#textarea_noticia".val();" . Luego crea la variable dataString , que contiene lo que se enviara mediante POST al archivo "insertarEstado.php". Con un condicional If , verifica que el campo "textarea_noticia" no este vacio, si no lo esta , muestra el div "#cargando" y le aade mediante al atributo ".html" una imagen .gif de cargando mientras espera la respuesta del metodo "$.ajax" de jquery. "$.ajax" se encarga de anviar los datos al "insertarEstado.php" , como veran usa el tipo "POST" , la url a la que enviara los datos "insertarEstado.php" , el string que contiene esos datos , y una vez que esto se completo sin errores , hace aparecer el div "#mostrar" con una animacion y con el estado que acabamos de crear, borra el contenido del campo de texto donde escribimos nuestro estado , y esconde el div "#cargando" para que desaparezca la animacion.

Creamos nuestro archivo Js/funRed.js"

 En

este archivo se definen la manera como veremos nuestro sitio web, colores, tamao y tipo de texto, etc.

Creamos el archivo Css/estilo.css

Ing. Moiss Torres

 Lo

primero que haremos sera crear los archivos que utilizaremos, estos son:
header.php footer.php

Luego

de crearlos vamos a incluir el codigo HTML y php correspondiente a cada uno.

Crear el archivo header.php

</div> </body> </html>

Aqu

no hay mucho que explicar , solamente se cierra lo que se abrio en el "header.php" : el Div "contenedor_web" y los tags de HTML

Creamos el footer.php

<? include("header.php");?> <!-- Nuestro Formulario de Post ! --> <div class="contenedor_muro"> <form name="form" method="post"> <textarea cols="30" rows="2" name="textarea_no ticia" class="textarea_noticia" id="textarea_notici a"></textarea><br /> <input type="submit" value="Compartir" class="e nviar_noticia" /> </form> </div> <div id="cargando"></div> <div id="mostrar"></div> <?php include("consulta.php");?> <? include ("footer.php"); ?>

 Lo

siguiente sera agregar los estilos de : ".contenedor_web" y ".arriba". Solo agregamos estas lneas a nuestro "estilo.css"

--- Estructura de tabla para la tabla `usuarios` -CREATE TABLE IF NOT EXISTS `usuarios` ( `id` int(11) NOT NULL auto_increment, `email` varchar(32) NOT NULL default '', `password` varchar(40) NOT NULL default '', `nombre` varchar(40) NOT NULL default '', `nacimiento` date NOT NULL default '0000-0000', PRIMARY KEY (`id`), UNIQUE KEY `email` (`email`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUT O_INCREMENT=17 ;

 Este

es mucho ms fcil, lo primero que hace es verificar que el usuario no este ya logueado mediante un condicional If , si lo esta, se informa, si no esta muestra el formulario de Login, una vez introducidos los datos, el mismo script los recoge , hace la consulta a la base de datos y si estan correctos, crear las variables de sesion con un nombre y el valor de cada una y luego lo redirecciona al "index.php" .

Creamos el archivo login.php

 Lo

primero es verificar que se hizo click en el boton "registrar" , hace las validaciones como ver que el email sea correcto,que en la base de datos no exista el email,que el pass y la verifacion sean iguales Lo que sigue en el script es mediante Javascript, hacer la primer validacin antes de enviar los datos, que esten todos los campos completos. Cuando todo esto esta correcto, guarda los datos, Email,Pass, Nombre y fecha de Nacimiento, luego de guardarlo.

Crear el archivo registro.php

Lo que hacemos es destruir las sesiones creadas , nuestro Id , email y nombre de usuario

<? session_start(); unset($_SESSION['logueado_id']); unset ($_SESSION['logueado_usuario']); unset($_SESSION['logueado_usuario']); echo '<script languaje="Javascript">location.href="ind ex.php"</script>'; ?>

Crear el archivo logout.php

 Incluimos

nuestro "header" , verificamos que la sesion "logueado_usuario" tenga algn valor, si no lo tiene, llamamos a nuestro "login.php" para que el usuario inicie sesion, si el usuario ya esta logueado, recogemos sus datos en variables y mostramos el formulario para postear algun estado.

 Ahora

hay que agregar a nuestro "estilo.css" las propiedades de los div's nuevos.

Vamos a modificar el script de "consulta.php" para que nos muestre el nombre y la imagen del usuario que escribi en el muro !!
Lo que agregamos es una variable con el ID del usuario que escribio el estado, como veran tambien ahora se muestra la imagen con nombre igual que el id del usuario, que es la que creamos cuando nos registramos, en un nuevo div muestra el nombre del usuario.Lo que sigue es verificar que el usuario logueado, sea el mismo que escribio el estado, para habilitar el boton de borrar el estado: "$id_us==$_SESSION['logueado_id']"

 Este

script es practicamente igual al anterior, salvo que se crea una nueva variable : "$msg_limpio" la cual evita que los mensajes a postear contengan algun cdigo que no querriamos en nuestra base de datos , tambien se agrega el id del usuario que escribio el estado

 drop

table messages;

CREATE

TABLE IF NOT EXISTS `messages` ( `msg_id` int(11) NOT NULL auto_increment, `estado` text, `gustar` int(11) default NULL, `user_id` int(40) NOT NULL, PRIMARY KEY (`msg_id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=30 ;

 Aprender

HTML: http://www.htmlya.com.ar Aprender CSS: http://www.cssya.com.ar Aprender PHP: http://www.phpya.com.ar Aprender JAVASCRIPT: http://www.javascriptya.com.ar Post Fuente: http://www.getvay.com/Muro%20Facebook Buscador: http://www.google.com.bo