creacion de una red social

1. C REACIÓN DE UNA RED SOCIAL
CON WAMP Y D REAMWEABER
Cecytem Plantel Tecamac
Por:
Cesar Alfonso Castillo Martínez
Mauricio López Morales
Isaac López Medina
Grupo 602
Profesor René Domínguez Escalona

2. [Seleccionar fecha]
CREACIÓN DE UNA RED SOCIAL CON WAMP Y
DREAMWEABER
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

3. [Seleccionar fecha]
INTRODUCCIÓN
Antes 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

4. [Seleccionar fecha]
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

5. [Seleccionar fecha]
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

6. [Seleccionar fecha]
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

7. [Seleccionar fecha]
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
http://localhost/phpmyadmin
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ésdamos 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

8. [Seleccionar fecha]
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 VARCHARcon una longitud de valores de 30, y con
índicePRIMARY.
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.
7

9. [Seleccionar fecha]
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
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.
1

10. [Seleccionar fecha]
El campo de contacto será del tipo INT, con longitud de 11, verificamos que nuestro motor de
almacenamiento sea InnoDB y guardamos.
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 yVarchar 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í:
2

11. [Seleccionar fecha]
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:
3

12. [Seleccionar fecha]
Igual con idpublicacion en publicaciones.
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 DREAMWEABER
Pasaremos 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íaPHP MySQL.
4

13. [Seleccionar fecha]
Seleccionamos la manera en la que editamos los archivos.
Seleccionamos la URL de raiz del sitio.
Completamos y todo estaría listo.
5

14. [Seleccionar fecha]
CREACIÓN DE LA PLANTILLA DEL SITIO
Ahora 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.
6

15. [Seleccionar fecha]
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.
7

16. [Seleccionar fecha]
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.
8

17. [Seleccionar fecha]
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
9

18. [Seleccionar fecha]
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.
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 <imgsrc="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.
10

19. [Seleccionar fecha]
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ánllenados de la siguiente forma.
11

20. [Seleccionar fecha]
12

21. [Seleccionar fecha]
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 estavacio.
Después pondremos una oración que diga No hay comentarios por el momento y le pondremos
mostrar si los registros estanvacios.
Hemos acavado con la paginacomentar.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.
13

22. [Seleccionar fecha]
De perfil.php copiaremos todos los datos a perfilamigo.phpecepto 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.
14

23. [Seleccionar fecha]
15

24. [Seleccionar fecha]
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.
16

25. [Seleccionar fecha]
17

26. [Seleccionar fecha]
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.
18

27. [Seleccionar fecha]
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.
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.foto
FROM usuarios INNERJOIN (publicaciones LEFTJOIN comentarios ON
publicaciones.id=comentarios.idpublicacion)ONpublicaciones.amigo=usuarios.usuario
GROUPBY publicaciones.id, publicaciones.titulo,publicaciones.texto,publicaciones.fecha
ORDERBYpublicaciones.fechaDESC
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.
19