Reporte creacion de red social
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Reporte creacion de red social

  • 1,270 views
Uploaded on

creacion de una red social

creacion de una red social

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,270
On Slideshare
1,270
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. C REACIÓN DE UNA RED SOCIALCON WAMP Y D REAMWEABERCecytem Plantel Tecamac Por: Cesar Alfonso Castillo Martínez Mauricio López Morales Isaac López Medina Grupo 602Profesor René Domínguez Escalona
  • 2. [Seleccionar fecha]CREACIÓN DE UNA RED SOCIAL CON WAMP YDREAMWEABERCecytem 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ÓNAntes de comenzar es importante que tengas instalados 2 programas con los cuales vamos atrabajar, el primero es WAMP server (el cual puedes descargar desde su pagina oficial) yDreamweaber.INSTALACIÓN DE WAMPUna vez que te has bajado el instalador de WAMP, lo vamos a ejecutar, para esto tendrás quebuscar el lugar en el cual se descargó (por lo general en la carpeta de descargas) y dar doble clicsobre é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 NEXTSe nos muestra una ventana en la cual seleccionamos el directorio de la instalación, lo dejamoscomo esta y damos clic sobre NEXT, inmediatamente nos muestra otra ventana para agregaraccesos 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, daremosclic 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 queremosejecutar la aplicación, marcamos la casilla y damos clic en finish. 4
  • 6. [Seleccionar fecha]EJECUCIÓN DE WAMPAl ejecutar WAMP debemos conocer las 3 formas en las que trabaja, las cuales se muestran acontinuación.Icono verde sobre la barra de tareas: El programa esta funcionando correctamente, el servidor y todos los servicios están activosIcono 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, puedesver las siguientes soluciones:Soluciones al icono naranja:Verifica que este encendido el servidorDesactiva tu firewall del sistema o antivirusVerifica que ningún otro programa este utilizando el puerto de conexión de apache (80), programascomo ares, metin u otros creadores de base de datos como Microsoft SQL server entre otros suelenocuparloSoluciones al icono rojo:Verifica que los servicios estén activadosReinicia los serviciosReinstala el programa 5
  • 7. [Seleccionar fecha]CREACIÓN DE LA BASE DE DATOSIremos a la barra de tareas y seleccionaremos el icono de WAMP,activaremos el servidor y los servicios, después de que inicien, daremosclic en phpMyAdmin o ingresaremos en nuestro navegador y http://localhost/phpmyadminescribimos en la barra de direcciones lo siguiente:Después de ingresar la dirección a nuestro navegador, nos mostrara una página como la siguienteEn 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 superiorizquierda 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 clicen crear.CREACIÓN DE LA TABLA USUARIOSDespués dentro de la base de datos crearemos una nueva tabla, la cual se llamara "usuarios" yllevara 13 campos, los cuales serán: usuario pasword nombre apellidopaterno apellidomaterno sexo edad telefono email alias hobbie ocupacion fotoEl 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 unalongitud de 30.Los campos de teléfono y edad serán de tipo INT, el campo de edad tendrá una longitud de 2 y elde 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 esasí, daremos clic en grabar.CREACIÓN DE LA TABLA PUBLICACIONESDespués crearemos otra tabla con el nombre de "publicaciones", que contara con 5 campos.los campos son los siguientes: id usuario titulo texto fechaEl campo id será del tipo INT con una longitud de 11 y con índice PRIMARY. los campos usuario ytitulo serán del tipo VARCHAR con longitud de 30, el campo texto será del tipo VARCHAR conlongitud de 100, y el campo fecha será del tipo timestamp, agregaremos índice ÍNDEX al campo deusuarios.Al final deberemos verificar que el motor de almacenamiento de la base de datos sea InnoDB, si esasí, daremos clic en grabar.CREACIÓN DE LA TABLA COMENTARIOSAhora crearemos una nueva tabla con nombre comentarios y con 4 campos. id usuario comentario fecha idpublicacionLa fecha será del tipo timestamp, el comentario será de tipo VARCHAR con longitud de 100, elusuario 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 esasí, daremos clic en grabar.CREACIÓN DE LA TABLA CONTACTOSAhora crearemos una nueva tabla con nombre contactos y con 3 campos, los cuales serán: id usuario contactoEl campo id será del tipo INT y tendrá una longitud de 11 caracteres, tendrá un índice PRIMARY ycontara 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 dealmacenamiento 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 camposque serán: id usuario interésEl campo de id será del tipo INT y llevara A_I, el de usuario será con ÍNDEX yVarchar conlongitud de 30 el de interés lo dejamos como estaba.CREACIÓN DE LA TABLA AVATARSCrearemos una nueva tabla de nombre avatars, con dos campos: id y foto, El id es de tipo INT, conA_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 basede 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 ira tabla de publicaciones e ir a VISTA DE RELACIONES.Lo que sigue es relacionar los campos de usuario con “redsocial”.”usuarios”.”usuario” y seleccionarcascade 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 semuestra 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 elROOT de la base de datos, nosotros usaremos el Root para evitar problemas al exportar la base dedatos.CREACIÓN DE UN SITIO EN DREAMWEABERPasaremos a la creación de nuestra red social, primero que nada ejecutaremos WAMP, abrimosDreamweaber 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 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 laplantilla. 6
  • 15. [Seleccionar fecha]Escribimos los siguientes datos para poder crear nuestra base de datos utilizando el usuarioque creamos anteriormente para lograr que abra nuestra base de datos y seleccionamos labase de datos, después de damos clic en aceptar.Vamos a el menu insertar y donde diga objetos de plantilla seleccionamos así mismo le damosdonde 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 SITIOAbrimos un documento nuevo usando la plantilla de nuestra red social y después lo guardamoscomo 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 deel 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 ponemosdonde 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 nosenviara a perfil.php.En la página error.php vamos a crear un vínculo que diga Regresar (le daremos vinculo aindex.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 conun vínculo a registro.php, guardamos y cerramos el documento.Abrimos registro.php y crearemos un asistente de intersección de registros, seleccionaremos latabla usuarios y solo cambiara el campo contraseña que será tipo contraseña, vamos a anexaruna 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 iniciaremoscon el aspecto de perfil.php, Abrimos nuestro documento, vamos a vinculaciones y anexamosdos 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ónautentificación de usuarios pulsamos el que nos mande a desconectar, después de vamos aproseguir con nuestra página, vamos a ordenar los datos.Nombre, Apellido Paterno, Apellido materno, etc,etc y vamos a arrastrar de nuestro juego deregistros los datos hacia donde pusimos estos datos para que podamos ver los datos denuestro 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 yanexaremos en la tabla avatars dos fotos que serán de una carpeta llamada fotos quedebemos guardar en la carpeta de nuestra página, después de hacer eso anexamos unaimagen cualquiera y después vamos a copiar el siguiente código a nuestra lista de código denuestra foto <imgsrc="fotos/<?php echo $row_usuario[foto]; ?>" width="200" height="200" />Una vez terminado esto crearemos otro documento llamado muro.php y otro llamadocomentar.php guardamos y cerramos., Abrimos muro.php y crearemos dos juegos de registroscon los siguientes datos. 10
  • 19. [Seleccionar fecha]Después de hacer eso vamos a crear un juego de registros donde vamos a poner la tablapublicaciones el id, lo vamos a eliminar el usuario va a ser oculto y tener en el valor elcódigo<?php echo $row_usuario[usuario]; ?>, titulo va a ser tipo texto y la fecha va a estaroculta.Abajo de vamos a poner un apartado que diga No hay publicaciones y le vamos a insertarobjetos de aplicación y vamos a donde dice mostrar si esta vacío y seleccionamos la tablapublicaciones.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íneade 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 abrimoscomentar.php y vamos a crear tres juegos de registros uno llamado usuario, otro publicacionesy 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 reglahorizontal.Abajo ponemos un asistente de intersección de registros y vamos a seleccionar la tablacomentarios al usuario le vamos a dar un valor dinamico a usuario del juego de registrosusuario, fecha sera oculto y idpublicacion tendra un valor a id del juego de registrospublicaciones.Abajo de arrastraremos del juego de registros comentarios, el usuario comentario y la fecha leordenamos y le ponemos en la opción region repetida, repetir todos los registros, y ponemosmostrar si el juego de registros no estavacio.Después pondremos una oración que diga No hay comentarios por el momento y le pondremosmostrar 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 yasí 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 dondearrastraremos de el juego de registros amigos contacto.Le daremos vinculo a perfilamigo y como queremos que se lleve nuestros datos y los del amigovamos 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 juegosde 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 deamigos, y borramos datos que arrastramos del juego de registros usuario, después deanexamos los datos de la misma forma como lo hisimos en perfil.php del juego de registrosusuario y hacemos el mismo procedimiento con la foto, ponemos un vinculo que diga Muroamigo enlasado con muroamigo.php y otro que diga Perfil o regresar a mi perfil, con un vinculoa 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 latabla 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, titulocomo campo de texto, texto como area de texto.Repetimos el mismo proceso de muro solo que ahora copiaremos los valores del juego deregistros 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 siguienteforma. 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 comentariosocultamos 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 registrospublicaamigo, quitamos el campo id. 18
  • 27. [Seleccionar fecha]Ya casi acavamos del juego de registros comentarios, vamos a arrastrar abajo del asistente deregistro el campo usuario, comentario, fecha y hacemos lo mismo que con comentar.phpVamos 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 unjuego de registros que se llame todaslaspublicaciones seleccionamos en modo avanzado ycopiamos 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.fechaDESCDe ahi adentro de la tabla anexamos usuario, titulo, texto, fecha.Ya hemos acavado podemos disfrutar de nuestra redsocial o si bien prefieres anexale un bonitodiseño. 19