ITSSNP

ADMINISTRACIN DE SERVICIOS DE INTERNET

1

PROFESOR:

OSCAR IBARRA DONCEL

PRESENTAN:

LIZETH NADIN VARELA ESCORSIA JOS LUIS ESTEBAN JIMNEZ ROSENDO OMAR CERON CRUZ

EL PROYECTO
CREACIN DE LA PGINA WEB PERIDICO MURAL DEL CASTOR PARA LOS ALUMNOS DEL INSTITUTO TECNOLGICO SUPERIOR DE LA SIERRA NORTE DE PUEBLA QUE ALMACENA SUS DATOS EN UNA BASE DE DATOS MYSQL.

A 21 DE MAYO DE 2013

ASI

ITSSNP
Introduccin

En el transcurso de la materia Administracin de servicios de internet impartida por el profesor Oscar Ibarra Doncel se abordaron temas de suma importancia e inters para nosotros como alumnos, se aprendieron muchas cosas interesantes pero de igual manera nos dimos cuenta que podemos implementar an ms nuestros conocimientos como Licenciados en Informtica, en forma de investigacin y llevndolo a la prctica, es por eso que se eligi el siguiente proyecto en el cual daremos a conocer cmo fue que realizamos una pgina web con ayuda del lenguaje PHP, el programa Dreamwever y MySQL del software Xampp con el que creamos la base de datos de nuestro sitio web.

ASI

ITSSNP
Justificacin y Objetivos

Justificacin Nuestro equipo decidi realizar la pgina web solicitada en el lenguaje de programacin PHP debido a que anteriormente ya se haba trabajado con el lenguaje de programacin ASP con bases de datos en SQL por lo que decidimos implementar un poco ms nuestros conocimientos en un rea distinta, por otro lado decidimos realizar nuestra pgina web sobre un peridico mural para todo alumno del ITSSNP que desee registrarse en ella porque pretendemos que los proyectos realizaos en esta materia y en cualquier otra tengan una aplicacin en el exterior y que no slo se quede en un trabajo entregado, y as estaremos satisfechos como Licenciados en Informtica al permitir que otros usuarios interacten con nuestros sitios mientras nosotros administramos el contenido del mismo. OBJETIVOS Objetivo General: Realizar una pgina web programada en PHP y almacenar los registros deseados en una base de datos MySQL adems de lograr el funcionamiento correcto de la misma. Otros objetivos: Lograr que los alumnos del ITSSNP se registren en nuestra pgina web Peridico mural DEL CASTOR para interactuar con nuestro sitio y as nos permitan administrar nuestro contenido en la base de datos, tal como eliminar usuarios, editarlos o actualizarlos segn sea el caso.

Dar correcta utilizacin a los programas utilizados.

ASI

ITSSNP

NDICE

Introduccin........................................................................................2
4

Justificacin y objetivos.3 Captulo 1. Creacin de un sitio en Dreamweaver CS5.5 Captulo 2. Creacin de Base de Datos MySQL12 Captulo 3. Insercin de registro en Dreamweaver CS517 Captulo 4. Proceso de Login..19 Captulo 5. Mtodo de modificar registros..20 Conclusin..22

ASI

ITSSNP

Captulo 1. Creacin de un sitio en Dreamweaver CS5

Para la creacin de nuestra pgina web utilizamos Dreamweaver CS5 XAMPP servidor (Apache, MySQL, PHP) Plantilla (http://www.templatemonster.com/free-magento-1-6-2template.html) Para el proceso de construccin se realiz lo siguiente Crear nuestro sitio en Dreamweaver CS5 Para la creacin de nuestro sitio debe de estar corriendo (running) XAMPPMySQL, se muestra en la siguiente imagen.

En Dreamweaver nos vamos a la opcin de sitios, est en el idioma de ingls.

ASI

ITSSNP

Seleccionamos la opcin administrar sitio, y nos muestra la siguiente ventana, seleccionamos nuevo.

Con la cual nos da como resultado lo siguiente:

ASI

ITSSNP

En esta imagen nos muestra los parmetros para la creacin de nuestro sitio. El nombre del sitio llevar por nombre el que ustedes deseen. La carpeta del sitio se encuentra en C:\xampp\htdocs\Noticias, ya que ah fue donde guardamos XAMPP.

Por ltimo queda configurado de la siguiente manera:

ASI

ITSSNP

Siguiendo con la creacin del sitio, nos vamos a servidores para aadir nuevo servidor, seleccionamos el signo de ms, con la cual nos muestra lo siguiente.

En la imagen de abajo seleccionamos local/red

ASI

ITSSNP

Por supuesto llenamos las casillas de este modo: Nombre del servidor: admin Conectar usando: local/red Carpeta del servidor: C:\xampp\htdocs\Noticias Url web: http://localhost Al momento del llenado, seleccionamos la opcin de avanzados, y nos muestra lo siguiente.

ASI

ITSSNP
En este apartado seleccionamos el modelo del servidor en la opcin PHP elegimos MySQL como se muestra en la imagen.

10

Para finalizar la configuracin del servidor nos queda de la siguiente forma.

Damos guardar y al trmino nos muestra la siguiente ventana, en esta seleccionamos servidor de prueba, guardamos y le damos listo.

ASI

ITSSNP

11

En la imagen siguiente ya nos muestra la conexin exitosa con las carpetas contenidas dentro de nuestro proyecto nombrado (Noticias).

Captulo 2. Creacin de Base de Datos MySQL

Ahora crearemos una base de datos para nuestra pgina web.

ASI

ITSSNP
Para la creacin de datos en MySQL ingresamos en la parte de phpMyAdmin localizado en XAMPP, accedemos como http://localhost/phpmyadmin/ a una pantalla como la siguiente:

12

En la parte izquierda est el listado de base de datos y a la derecha hay una serie de informacin. Si la base de datos ya existe hacemos clic en la misma, de lo contrario, escribimos en el formulario de la derecha donde dice crear nueva base de datos con el nombre que nosotros queremos, en este caso nuestra BD es admin y hacemos clic en el botn crear. Por el momento nuestra BD no contiene ninguna tabla. Creacin de Tablas Para hacerlo nos vamos al formulario donde dice crear nueva tabla en la base de datos e incluimos el nombre que queremos usar en este caso fue la de (usuarios), y en el siguiente campo (5) del formulario debemos incluir el nmero de campos que queremos que contenga nuestra tabla.

ASI

ITSSNP
Se nos abre un nuevo formulario con los 5 campos para completar, en donde dice campo, ah colocamos el nombre que queremos que tengan nuestros campos. En tipo consiste en poner el tipo de dato que vamos a usar.

13

Los ms utilizados son varchar, char, int, text, datetime, entre otros. A continuacin se muestra la tabla de usuarios con sus respectivas caractersticas.

Posteriormente creamos la siguiente tabla de administrador para tener el control de manejo de datos, prosiguiendo el proceso de usuarios, por su puesto cambiando en nombre de la tabla y los campos lo cual fueron 4. . A continuacin se muestra la tabla de administrador con sus respectivas caractersticas.
ASI

ITSSNP

14

Aadir la Base de Datos creada anteriormente desde Dreamwever Para aadir la base de datos seleccionamos la opcin de Base de Datos, en la parte derecha de la imagen de abajo.

Nos muestra la opcin de Conexin MySQL de la imagen siguiente:

ASI

ITSSNP

15

Nos muestra la siguiente ventana

Donde insertamos los siguientes datos: Nombre de conexin: Nombre que hayan puesto a su Proyecto Servidor MySQL: localhost. Nombre de usuario: root usuario por defecto Contrasea: Dejar en blanco la casilla Base de datos: Seleccionamos el botn seleccionar.

ASI

ITSSNP
Donde nos muestra la base de datos que contiene MySQL y seleccionamos admin (nuestra BD).

16

A continuacin aparecer esta ventana y con esto finalizamos la conexin.

Captulo 3. Insercin de registro en Dreamweaver CS5 Para realizar el registro abrimos Dreamweaver y nos fuimos a la opcin de insertar-objetos de datos-insertar registro-asistente de formulario de insercin de registro.
ASI

ITSSNP

17

Por lo cual nos lanza la siguiente ventana.

Aqu nos muestra la conexin y seleccionamos lo siguiente para realizar registro: Conexin: Nombre del Proyecto Tabla: usuarios Tras insertar, ir a: Iniciar.php

ASI

ITSSNP
En campos de formulario quitamos la opcin de Id de usuarios ya que solo queremos que nos muestre los datos necesarios para el registro. Nos qued de la siguiente manera:

18

Y nos qued as:

En la imagen anterior lo campos son totalmente obligatorios para el registro de cada usuario, para ello seleccionamos el campo de texto y nos vamos a la opcin de Spry-campo de texto de validacin de Spry y nos muestra una etiqueta de color azul, por la cual nos representa de que ya est validada obligatoriamente, realizamos el mismo proceso con los distintos campos del formulario.

ASI

ITSSNP
En el campo de contrasea, en sus propiedades le insertamos la opcin de contrasea para no ver caracteres visibles y solo ver como asteriscos. Tambin en Email del formulario seleccionamos el Spry respectivamente, para poner en tipo correo electrnico para que sea solo correo y no sea otra cosa. Al llenar los campos de registro, los datos ya fueron enviados a la base de datos. Esto fue el proceso para registrar un nuevo registro en la tabla de usuarios.
19

Captulo 4. Proceso de Login Para ello realizamos lo siguiente: Insertamos un formulario, al momento de iniciar sesin, el campo de usuario y contrasea debe de coincidir con la base de datos, si coinciden nos pasara a la siguiente pgina. Para ello creamos un archivo por nombre de Iniciar.php e insertamos el formulario, dos campos de texto y su

respectivo ttulo. En la opcin de contrasea, seleccionamos el campo de texto y en propiedades seleccionamos contrasea para que al ingreso aparezcan solo asteriscos. Insertamos un botn para iniciar sesin, seguimos en autenticacin de usuarios por la cual seleccionamos la opcin de comportamiento del servidor-autenticacin-conectar usuario.
ASI

ITSSNP
En la ventana siguiente insertamos los siguientes datos: Obtener entrada de formulario: form1. Campo de nombre usuario: textfield. Campo de contrasea: textfield2. Validar utilizando conexin: Nombre del Proyecto.
20

Tabla: usuarios. Columna nombre de usuario: Usuario. Columna de contrasea: Contrasea. Si la conexin es correcta, ir a: Inicio.php. Si falla la conexin, ir a: Iniciar.php. Al finalizar el llenado de los campos daremos aceptar para enviar los datos del formulario, si son iguales a nuestra base de datos entonces nos manda a la pgina de inicio.php y si no volver al mismo formulario.

Captulo 5. Mtodo de modificar registros Seleccionamos opcin insertar-actualizar registro asistente de registro, por lo cual nos muestra la siguiente ventana.

ASI

ITSSNP

21

Conexin: Nombre del Proyecto. Tabla de actualizar: Usuarios. Seleccionar registro de: Recorset1. Columna de clave exclusiva: Id. Tras la actualizacin, ir a: formulario.php. Y dar aceptar, por la cual nos da la siguiente ventana.

En la pgina de formulario, el texto de modificar le asignamos la de modificar.php.

ASI

ITSSNP
En la parte de cdigo de modificar insertamos el siguiente dato para imprimir. <a href="modificar.php?Id= <?php echo $row_Recordset1['Id']; ?> , y guardamos el archivo.

22

Conclusin:
Se realiz de manera exitosa la presente prctica por lo cual nos llena de emocin saber que gracias a la investigacin y trabajo se pueden realizar actividades sin saber mucho sobre el tema, gracias tambin al apoyo del profesor y tambin se concluye que es bueno trabajar con diferentes herramientas y en lo personal nos agrad trabajar con un entorno diferente adems de lo rpido que funcionan los programas utilizados.

ASI