Profesor René Domínguez Escalona

CREACIÓN DE UNA RED SOCIAL

CON WAMP Y DREAMWEAVER

Cecytem Plantel Tecamac

Por:

Cesar Alfonso Castillo Martínez

Mauricio López Morales

Grupo 602

[Seleccionar fecha]

1

CREACIÓN DE UNA RED SOCIAL CON WAMP Y

DREAMWEAVER

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

[Seleccionar fecha]

2

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.

[Seleccionar fecha]

3

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.

[Seleccionar fecha]

4

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.

[Seleccionar fecha]

5

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

[Seleccionar fecha]

6

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é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.

http://localhost/phpmyadmin

[Seleccionar fecha]

7

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.

[Seleccionar fecha]

1

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.

[Seleccionar fecha]

2

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 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í:

[Seleccionar fecha]

3

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:

[Seleccionar fecha]

4

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ía PHP MySQL.

[Seleccionar fecha]

5

Seleccionamos la manera en la que editamos los archivos.

Seleccionamos la URL de raiz del sitio.

Completamos y todo estaría listo.

[Seleccionar fecha]

6

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.

[Seleccionar fecha]

7

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.

[Seleccionar fecha]

8

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.

[Seleccionar fecha]

9

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

[Seleccionar fecha]

10

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 <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.

[Seleccionar fecha]

11

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.

[Seleccionar fecha]

12

[Seleccionar fecha]

13

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.

[Seleccionar fecha]

14

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.

[Seleccionar fecha]

15

[Seleccionar fecha]

16

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.

[Seleccionar fecha]

17

[Seleccionar fecha]

18

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.

[Seleccionar fecha]

19

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 INNER JOIN (publicaciones LEFT JOIN comentarios ON

publicaciones.id=comentarios.idpublicacion)ON publicaciones.amigo=usuarios.usuario

GROUP 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.