Por:

Cesar Alfonso Castillo Martínez

Mauricio López Morales

Isaac López Medina

Grupo 602

Cecytem Plantel Tecamac

ÍNDICE(haga clic sobre el hipervinxulo)

INTRODUCCIÓN

INSTALACIÓN DE WAMP

EJECUCIÓN DE WAMP

CREACIÓN DE LA BASE DE DATOS

CREACIÓN DE UN SITIO EN DREAMWEABER

CREACIÓN DE LA PLANTILLA DEL SITIO

CREACIÓN DE LA RED SOCIAL

1

INTRODUCCIÓNAntes de comenzar es importante que tengas instalados 2 programas con los cuales vamos a trabajar, el primero es WAMP server (el cual puedes descargar desde su pagina oficial) y Dreamweaber.

INSTALACIÓN DE WAMP

Una vez que te has bajado el instalador de WAMP, lo vamos a ejecutar, para esto tendrás que buscar el lugar en el cual se descargó (por lo general en la carpeta de descargas) y dar doble clic sobre él.

Como puedes ver nos abre una nueva ventana, a la cual daremos clic sobre la opción NEXT ó Siguiente.

2

Aceptamos los términos del programas y daremos clic en NEXT

Se nos muestra una ventana en la cual seleccionamos el directorio de la instalación, lo dejamos como esta y damos clic sobre NEXT, inmediatamente nos muestra otra ventana para agregar accesos directos al escritorio y a la barra de inicio, si lo queremos podemos marcarlas.

Después de esto, el programa muestra otra ventana la cual rectifica nuestra selección, daremos clic sobre Install y comenzara la instalación del programa.

3

Después de que termina la instalación, nos muestra la siguiente ventana preguntando si queremos ejecutar la aplicación, marcamos la casilla y damos clic en finish.

4

EJECUCIÓN DE WAMP

Al ejecutar WAMP debemos conocer las 3 formas en las que trabaja, las cuales se muestran a continuación.

Icono verde sobre la barra de tareas:

El programa esta funcionando correctamente, el servidor y todos los servicios están activos

Icono naranja sobre la barra de tareas:

Los servicios del programa están activos, pero el servidor no.

Icono rojo sobre la barra de tareas:

El servidor esta activo, pero los servicion como phpmyadmin o Mysql no.

Para un óptimo funcionamiento de WAMP el icono tiene que estar verde, de no ser asi, puedes ver las siguientes soluciones:

Soluciones al icono naranja:

Verifica que este encendido el servidor

Desactiva tu firewall del sistema o antivirus

Verifica que ningún otro programa este utilizando el puerto de conexión de apache (80), programas como ares, metin u otros creadores de base de datos como Microsoft SQL server entre otros suelen ocuparlo

Soluciones al icono rojo:

Verifica que los servicios estén activados

Reinicia los servicios

Reinstala el programa

5

CREACIÓN DE LA BASE DE DATOS

Iremos a la barra de tareas y seleccionaremos el icono de WAMP, activaremos el servidor y los servicios, después de que inicien, daremos clic en phpMyAdmin o ingresaremos en nuestro navegador y escribimos en la barra de direcciones lo

siguiente:

Después de ingresar la dirección a nuestro navegador, nos mostrara una página como la siguiente

En el “desplegable de cotejamiento de las conexiones MySQL” seleccionaremos la opción utf-8_spanish_ci, después damos clic en “bases de datos” que se muestra en la parte superior izquierda de la página y nos mandara a una nueva página.

6

http://localhost/phpmyadmin

En esta nueva página crearemos nuestra base de datos, la cual se llamara Red social y daremos clic en crear.

CREACIÓN DE LA TABLA USUARIOS

Después dentro de la base de datos crearemos una nueva tabla, la cual se llamara "usuarios" y llevara 13 campos, los cuales serán:

usuario pasword nombre apellidopaterno apellidomaterno sexo edad telefono email alias hobbie ocupacion foto

El campo de usuarios será de tipo VARCHAR con una longitud de valores de 30, y con índice PRIMARY.

Todos los de mas campos, a excepción de teléfono y edad serán del tipo VARCHAR con una longitud de 30.

Los campos de teléfono y edad serán de tipo INT, el campo de edad tendrá una longitud de 2 y el de teléfono una longitud de 10.

Al final deberemos verificar que el motor de almacenamiento de la base de datos sea InnoDB, si es así, daremos clic en grabar.

CREACIÓN DE LA TABLA PUBLICACIONES

7

Después crearemos otra tabla con el nombre de "publicaciones", que contara con 5 campos.

los campos son los siguientes:

id usuario titulo texto fecha

El campo id será del tipo INT con una longitud de 11 y con índice PRIMARY. los campos usuario y titulo serán del tipo VARCHAR con longitud de 30, el campo texto será del tipo VARCHAR con longitud de 100, y el campo fecha será del tipo timestamp, agregaremos índice ÍNDEX al campo de usuarios.

Al final deberemos verificar que el motor de almacenamiento de la base de datos sea InnoDB, si es así, daremos clic en grabar.

CREACIÓN DE LA TABLA COMENTARIOS

Ahora crearemos una nueva tabla con nombre comentarios y con 4 campos.

id usuario comentario fecha idpublicacion

La fecha será del tipo timestamp, el comentario será de tipo VARCHAR con longitud de 100, el usuario de tipo VARCHAR con longitud de 30 y con índice de tipo ÍNDEX, el idpublicacion será de tipo INT con INDEX por último el campo de id será del tipo INT con longitud de 11 caracteres, con autoincremento (A_I) e índice PRIMARY.

Al final deberemos verificar que el motor de almacenamiento de la base de datos sea InnoDB, si es así, daremos clic en grabar.

CREACIÓN DE LA TABLA CONTACTOS

Ahora crearemos una nueva tabla con nombre contactos y con 3 campos, los cuales serán:

id usuario contacto

El campo id será del tipo INT y tendrá una longitud de 11 caracteres, tendrá un índice PRIMARY y contara con A_I.

El campo de usuario es de tipo INT, tendrá longitud de 11 caracteres y contara con índice ÍNDEX.

El campo de contacto será del tipo INT, con longitud de 11, verificamos que nuestro motor de almacenamiento sea InnoDB y guardamos.

8

CREACIÓN DE LA TABLA INTERESES.

Procedemos a crear una nueva tabla en nuestra base de datos de nombre intereses, con 3 campos que serán:

id usuario interés

El campo de id será del tipo INT y llevara A_I, el de usuario será con ÍNDEX y Varchar con longitud de 30 el de interés lo dejamos como estaba.

CREACIÓN DE LA TABLA AVATARS

Crearemos una nueva tabla de nombre avatars, con dos campos: id y foto, El id es de tipo INT, con A_I e índice PRIMARY, el campo de foto es de tipo VARCHAR, con 30 caracteres de longitud.

Guardamos nuestra nueva tabla, si cumplimos con todo los procedimientos, al final nuestra base de datos se debe ver así:

9

AÑADIENDO LAS VISTAS DE RELACIONES.

Ahora lo que sigue es añadir las vistas de relaciones a nuestra base de datos, para esto debemos ir a tabla de publicaciones e ir a VISTA DE RELACIONES.

Lo que sigue es relacionar los campos de usuario con “redsocial”.”usuarios”.”usuario” y seleccionar cascade en los 2 siguientes desplegables como se muestra a continuacion.

Ahora añadiremos una nueva vista de relaciones en la tabla de comentarios.

Relacionaremos la tabla usuarios con con “redsocial”.”usuarios”.”usuario” y idpublicaciones con “redsocial”.”publicaciones”.”id”seleccionar cascade en los 2 siguientes desplegables como se muestra a continuacion:

Ahora iremos a contactos, despues a la vista de relaciones y relacionamos el campo usuario con “redsocial”.”usuarios”.”usuario” y en los desplegables pondremos cascade como se muestar:

Igual con idpublicacion en publicaciones.

10

Vamos a anexar privilegios para poder usar la base de datos.

Para esto vamos al panel de privilegios y ahí tenemos 2 opciones, crear un nuevo usuario o usar el ROOT de la base de datos, nosotros usaremos el Root para evitar problemas al exportar la base de datos.

CREACIÓN DE UN SITIO EN DREAMWEABERPasaremos a la creación de nuestra red social, primero que nada ejecutaremos WAMP, abrimos Dreamweaber y después de vamos a donde dice sitio y crearemos un sitio.

NOTA: Escribiremos todo tal y como se muestra en las fotos.

Escribimos el sitio y su dirección.

Escogemos que tipo de tecnología PHP MySQL.

Seleccionamos la manera en la que editamos los archivos.

11

Seleccionamos la URL de raiz del sitio.

Completamos y todo estaría listo.

12

CREACIÓN DE LA PLANTILLA DEL SITIOAhora vamos a crear una plantilla seleccionando el tema que más nos guste.

Vamos a insertar, objetos de plantilla y creamos la plantilla.

Después abrimos el botón + donde dice base de datos para anexar nuestra base de datos a la plantilla.

13

Escribimos los siguientes datos para poder crear nuestra base de datos utilizando el usuario que creamos anteriormente para lograr que abra nuestra base de datos y seleccionamos la base de datos, después de damos clic en aceptar.

Vamos a el menu insertar y donde diga objetos de plantilla seleccionamos así mismo le damos donde dice región editable para poder ponerle regiones editables a nuestra plantilla.

NOTA: Hay que poner esas regiones donde creamos conveniente usarlas.

Ya podemos cerrar nuestro documento guardando los cambios.

CREACIÓN DEL SITIO Abrimos un documento nuevo usando la plantilla de nuestra red social y después lo guardamos como index.php, así mismo creamos otras llamadas perfil.php, registro.php y error.php.

Después de hacer eso vamos a insertar, de ahí insertamos un campo de formulario y dentro de el 2 campos de texto, uno llamado usuarios y otro llamado password, anexamos un botón.

14

Después de vamos a insertar, objetos de aplicación, autentificación de usuarios y ponemos donde dice conectar usuario, seleccionamos nuestros dos campos de texto, la base de datos, que necesitamos, y la tabla usuarios, si la conexión falla nos enviara a error.php, si no falla nos enviara a perfil.php.

En la página error.php vamos a crear un vínculo que diga Regresar (le daremos vinculo a index.php) y si deseamos una breve información.

En la página de index.php crearemos un apartado que se diga registrarse, y lo enviaremos con un vínculo a registro.php, guardamos y cerramos el documento.

Abrimos registro.php y crearemos un asistente de intersección de registros, seleccionaremos la tabla usuarios y solo cambiara el campo contraseña que será tipo contraseña, vamos a anexar una lista de menú con un valor dinámico de foto a foto, cerramos y guardamos.

15

Bien, ahora ya acabamos nuestras páginas de inicio de nuestra red social, ahora iniciaremos con el aspecto de perfil.php, Abrimos nuestro documento, vamos a vinculaciones y anexamos dos juegos de registros uno que se llame usuario que se llenara de la siguiente forma.

El siguiente se llamara amigos que se llenara de la siguiente forma

Anexaremos un escrito que diga Desconectarse donde queramos y en la misma sección autentificación de usuarios pulsamos el que nos mande a desconectar, después de vamos a proseguir con nuestra página, vamos a ordenar los datos.

16

Nombre, Apellido Paterno, Apellido materno, etc,etc y vamos a arrastrar de nuestro juego de registros los datos hacia donde pusimos estos datos para que podamos ver los datos de nuestro usuario, algo repetitivo pero necesario.

Quedaría de la siguiente forma.

La foto es un caso especial lo que haremos es que iremos a nuestra base de datos y anexaremos en la tabla avatars dos fotos que serán de una carpeta llamada fotos que debemos guardar en la carpeta de nuestra página, después de hacer eso anexamos una imagen cualquiera y después vamos a copiar el siguiente código a nuestra lista de código de nuestra foto <img src="fotos/<?php echo $row_usuario['foto']; ?>" width="200" height="200" />

Una vez terminado esto crearemos otro documento llamado muro.php y otro llamado comentar.php guardamos y cerramos., Abrimos muro.php y crearemos dos juegos de registros con los siguientes datos.

17

Después de hacer eso vamos a crear un juego de registros donde vamos a poner la tabla publicaciones el id, lo vamos a eliminar el usuario va a ser oculto y tener en el valor el código <?php echo $row_usuario['usuario']; ?>, titulo va a ser tipo texto y la fecha va a estar oculta.

Abajo de vamos a poner un apartado que diga No hay publicaciones y le vamos a insertar objetos de aplicación y vamos a donde dice mostrar si esta vacío y seleccionamos la tabla publicaciones.

Después vamos abajo y arrastramos de nuestro juego de registros publicaciones, titulo, texto, fecha los ordenamos y listo.

Abajo pondremos Comentar y vamos a darle vínculo con comentar.php, vamos a nuestra línea de código y copiamos el siguiente código.

?usuario=<?php echo $row_publicaciones['usuario']; ?> & idpublicacion=<?php echo $row_publicaciones['id']; ?>

Ya acabamos con nuestra pagina de muro guardamos y cerramos, ahora abrimos comentar.php y vamos a crear tres juegos de registros uno llamado usuario, otro publicaciones y otro comentarios y serán llenados de la siguiente forma.

18

19

Arrastraremos del juego de registros publicaciones, titulo, texto, fecha, ponemos una regla horizontal.

Abajo ponemos un asistente de intersección de registros y vamos a seleccionar la tabla comentarios al usuario le vamos a dar un valor dinamico a usuario del juego de registros usuario, fecha sera oculto y idpublicacion tendra un valor a id del juego de registros publicaciones.

Abajo de arrastraremos del juego de registros comentarios, el usuario comentario y la fecha le ordenamos y le ponemos en la opción region repetida, repetir todos los registros, y ponemos mostrar si el juego de registros no esta vacio.

Después pondremos una oración que diga No hay comentarios por el momento y le pondremos mostrar si los registros estan vacios.

Hemos acavado con la pagina comentar.php guardamos y cerramos.

Abrimos un nuevo documento basado en nuestra plantilla que sera llamado perfilamigo.php y así mismo creamos otros llamados muroamigo.php y comentaramigo.php.

En perfil.php anexaremos una tabla con 1 fila y 1 columna con un tamaño de 50 pixeles donde arrastraremos de el juego de registros amigos contacto.

Le daremos vinculo a perfilamigo y como queremos que se lleve nuestros datos y los del amigo vamos a copiar el siguiente codigo.

"perfilamigo.php?amigo=<?php echo $row_amigos['contacto']; ?>&usuario=<?php echo $row_amigos['usuario']; ?>"><?php echo $row_amigos['contacto']; ?>”

Guardamos (No cerramos), después seguimos con perfil amigo donde crearemos dos juegos de registros uno llamado perfilamigo y otro llamado usuario llenados de la siguiente forma.

20

De perfil.php copiaremos todos los datos a perfilamigo.php ecepto la imagen y la tabla de amigos, y borramos datos que arrastramos del juego de registros usuario, después de anexamos los datos de la misma forma como lo hisimos en perfil.php del juego de registros usuario y hacemos el mismo procedimiento con la foto, ponemos un vinculo que diga Muro amigo enlasado con muroamigo.php y otro que diga Perfil o regresar a mi perfil, con un vinculo a perfil.php, con esto acavamos, guardamos y cerramos.

Abrimos muroamigo.php y creamos tres juegos de registros llenamos de la siguiente forma.

21

22

Después vamos a crear un asistente de intersección de registros, y vamos a seleccionar la tabla publicaciones así mismo vamos a ocultar usuario y pondremos el siguiente codigo

<?php echo $row_usuario['usuario']; ?> en valor dinamico, la fecha va a ser campo oculto, titulo como campo de texto, texto como area de texto.

Repetimos el mismo proceso de muro solo que ahora copiaremos los valores del juego de registros publicaamigo y anexamos usuario, En el botón comentar anexamos este codigo.

"comentaramigo.php?usuario=<?php echo $row_usuario['usuario']; ?>&amigo=<?php echo $row_amigo['usuario']; ?>&idpublicacionesamigo=<?php echo $row_publicacionesamigo['id']; ?>" Así acavamos con muroamigo.php guardamos y cerramos.

Abrimos comentaramigo.php, creamos cuatro juegos de registros llenados de la siguiente forma.

23

24

Del juego de registros publicaamigo arrastramos los campos titulo, texto, fecha, usuario.

Insertamos un asistente de intersección de registros seleccionamos la tabla comentarios ocultamos el usuario y le ponemos un valor dinamico a usuario del juego de registros usuario, fecha como valor oculto, idpublicación le damos un valor dinamico a id de el juego de registros publicaamigo, quitamos el campo id.

Ya casi acavamos del juego de registros comentarios, vamos a arrastrar abajo del asistente de registro el campo usuario, comentario, fecha y hacemos lo mismo que con comentar.php

Vamos a perfil.php y anexamos un vinculo con el documento ini.php.

25

Abrimos ini.php y vamos a insertar una tabla con 1 fila y 1 columna de ahí vamos a crear un juego de registros que se llame todaslaspublicaciones seleccionamos en modo avanzado y copiamos este codigo SQL

SELECT publicaciones.id, publicaciones.usuario, publicaciones.amigo, publicaciones.titulo,publicaciones.texto, publicaciones.fecha, COUNT (comentarios.id) AS

numcom, usuarios.fotoFROM usuarios INNER JOIN (publicaciones LEFT JOIN comentarios ON

publicaciones.id=comentarios.idpublicacion)ON publicaciones.amigo=usuarios.usuarioGROUP BY publicaciones.id, publicaciones.titulo,publicaciones.texto,publicaciones.fecha

ORDER BY publicaciones.fecha DESC

De ahi adentro de la tabla anexamos usuario, titulo, texto, fecha.

Ya hemos acavado podemos disfrutar de nuestra redsocial o si bien prefieres anexale un bonito diseño.

26