INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Carrera de Técnico en Mecatrónica Diseño de Aplicaciones Móviles. Integrantes del Equipo: Martinez Villegas Melanie Sarahi Turno: MATUTINO Medina Bustamante Laura Andrea Grupo: ____5IM51_______ Práctica No. 7 Registros por Aplicación Web en Base de Datos. Objetivo de la Práctica: • El alumno llevara a cabo la conexión por medio de PHP y SQL para el almacenamiento de información por medio de una aplicación web, donde guardara y consultara registros de usuarios. Instrucciones Generales • • Desarrollar su práctica por equipo. Crear en una Carpeta llamada (ApellidoPaterno_ApellidoPaterno_PrácticaNo.) y ahí poner los archivos desarrollados en la práctica. • • Poner las anotaciones correspondientes donde se le indica. Al final de la práctica anotar sus conclusiones individuales. Material Necesario • • • Una Computadora con block de notas 1 USB Bata de laboratorio Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 1 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Introducción Teórica: Abrir Scripts PHP El código PHP está incrustado entre medio del código HTML. Por tanto debemos indicar de alguna forma que dejamos de escribir en código HTML y empezamos a escribir en código PHP. También debemos indicar dónde acaba el código PHP y volvemos a escribir en código HTML. Esto se hace indicándolo mediante unas etiquetas especiales que indican dónde empieza y acaba el código PHP. Mandar un formulario a otra página Para poder mandar los datos de un formulario a otra página, el formulario lo escribiremos de manera normal, en lenguaje HTML, y la página del formulario puede ser perfectamente una página HTML, sin código en PHP. Recordemos que la etiqueta form debe llevar siempre los atributos action y method. El atributo action indica el lugar al que se envía el formulario, por lo que escribiremos la ruta al archivo que recoge el formulario, el cual sera una página en php. El atributo method solo admite los valores "post" y "get" en principio utilizaremos el valor "post" aunque también puede enviarse el formulario con el método "get". Datos en campos de texto. Botones tipo radio. Botones checkbox. Listas select. Conectar PHP con MySQL. En la práctica anterior vimos cómo hacer una base de datos con el programa phpMyAdmin. Sin embargo lo realmente interesante es poder ver en una página web los datos guardados en estas bases. MySQL permite no sólo ver los datos guardados mediante phpMyAdmin, sino también introducir nuevos datos o modificar los existentes. La conexión entre la base de datos y la página se realiza de forma automática, de manera que al insertar, cambiar o borrar cualquier dato en la base, se cambia automáticamente en la página. No sólo podemos guardar datos desde la web, sino que podemos incluso crear una nueva base de datos MySQL, insertar las tablas, y luego los datos en esas tablas, es decir, podemos prescindir de phpMyAdmin para crear la base de datos, y crearla completamente desde la página web. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 2 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Para ello MySQL dispone de un lenguaje de programación específico, el cual se inserta dentro del lenguaje PHP. Este lenguaje es bastante fácil, ya que no tiene ni variables propias (sí podemos usar las de php), ni estructuras. Simplemente consiste en decir a la máquina lo que queremos hacer (buscar, insertar, borrar, etc.) Datos necesarios Lo primero que debemos hacer, para trabajar con una base de datos desde nuestra página, es conectar con MySQL, para ello en principio debemos saber los datos que nos permitan localizar y conectar con MySQL, estos son: ▪ Servidor: Es el nombre de la máquina en la que está el programa MySQL. Si trabajamos en local, es decir en nuestro ordenador con XAMPP o algún otro programa que nos lo haya instalado, el nombre es “localhost”. Usuario: Dentro de MySQL puede haber uno o varios usuarios, Cada uno de ellos tiene un nombre diferente. Si trabajamos en local, el usuario por defecto es “root”. Contraseña: Cada usuario tiene una contraseña, trabajando en local, el usuario por defecto "root" no tiene contraseña, sin embargo siempre hay que ponerla por lo que pondremos un valor vacio: "". ▪ ▪ Para tener nuestra página en la web, el servidor debe proporcionarnos estos datos, los cuales, está claro que serán distintos que en en servidor local, por lo que es conveniente guardarlos en variables para, antes de subir la página, cambiarlos. <?php $servidor = ”localhost”; $usuario = “root”; $contraseña = ” ”; ?> Si tenemos varias páginas conectadas a la base de datos, para no tener que cambiarlos en todos, podemos guardarlos como variables de sesión. Conectar con MySQL Ahora ya podemos conectar con MySQL, para ello utilizaremos la siguiente función: $db=mysql_connect($servidor,$usuario,$contrasena); Si trabajamos en local, y lo que estamos haciendo son sólo pruebas, podemos poner también; $db=mysql_connect("localhost","root",""); Como parámetros debemos pasar el servidor, el usuario y la contraseña, en este orden. El funcionamiento es parecido a manejar archivos, es decir, una vez abierta la conexion, la guardamos en una variable, (en este caso $db), esta es la referencia, y funciona igual que el manejador para los archivos. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 3 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Por lo tanto cuando acabemos de manipular los datos de la base, debemos cerrar la conexion, esto se hara mediante la función: mysql_close($db); Donde la variable $db es la variable de referencia que hemos puesto al abrir la conexión. Conectar con una base de datos. Una vez conectado a MySQL, el siguiente paso es indicarle la base de datos con la que queremos conectar, ya que dentro de un mismo usuario, éste puede tener varias bases de datos, por lo que una vez conectados, usaremos la siguiente función: mysql_select_db("nombre_base_datos",$db); Como primer argumento de la función se pone el nombre de la base de datos, y como segundo ponemos la referencia. Actividades Prácticas Actividad 1. 1.1 Dentro de nuestro servidor local WampServer veremos un apartado que pone los menús de "herramientas" dentro del cual encontraremos la opción de "phpMyAdmin", damos clik y se abre el programa de Servicio de Base de Datos ó también podemos abrirlo escribiendo en la ventana del navegador http://localhost/phpmyadmin Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 4 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” 1.2 Una vez abierto obtenemos la siguiente ventana, en esta ventana nos posicionamos donde se encuentra la leyenda de “Crear nueva base de datos”, debajo, en la ventana de la izquierda escribiremos el nombre de la nueva base de datos que queramos crear en este caso será “FormularioGral”, y después pulsamos el botón "crear". 1.3 Nos aparece otra pantalla, en ella en la parte central y nos fijamos en el recuadro "crear nueva tabla en la base de datos PHP_SQL". Donde pone "nombre" escribimos "datos", que será el nombre de la tabla, y donde pone número de campos ponemos "4". De momento vamos a crear la tabla con cuatro campos. 1.4 Definimos aquí los campos o columna que queremos crear, con los siguientes datos: Campo: “nombre”, Tipo: "VARCHAR", Longitud/Valores: “255”, Predeterminado: "NULL" y/o “Ninguno” y/o "NONE", Índice: "PRIMARY", Auto_Increment: “BLANCO” y resto de las casillas las dejamos en “BLANCO”. Campo: “correo”, Tipo: "VARCHAR", Longitud/Valores: “255”, Predeterminado: "NULL" y/o “Ninguno” y/o "NONE", Índice: BLANCO, Auto_Increment: BLANCO y resto de las casillas las dejamos en BLANCO. Campo: “telefono”, Tipo: "VARCHAR", Longitud/Valores: “255”, Predeterminado: "NULL" y/o “Ninguno” y/o "NONE", Índice: BLANCO, Auto_Increment: BLANCO y resto de las casillas las dejamos en BLANCO. Campo: “mensaje”, Tipo: "VARCHAR", Longitud/Valores: “255”, Predeterminado: "NULL" y/o “Ninguno” y/o "NONE", Índice: BLANCO, Auto_Increment: BLANCO y resto de las casillas las dejamos en BLANCO. Una vez escritos todos los datos, vamos a la parte inferior de la página, y pulsamos donde pone "Grabar" y/o “Guardar”. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 5 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Actividad 2. 2.1 Crea una carpeta general llamada “ApellidoPaterno1_ApellidoMaterno1_Nombres1ApellidoPaterno2_ApellidoMaterno2_Nombres2_P5”, Ej.: (ZEPC-ZEPC_P7) y dentro de esta, crea las carpetas necesarias como estructura de aplicación para guardar los archivos (.html), (.jpg), (.mp4), y (.css) como se muestra en la siguiente imagen, para después ejecutarlos en la aplicación web. 2.2 Busca en el directorio de (C:\) de tu equipo de cómputo la carpeta destino “wamp” donde encontraremos la subcarpeta “www” y dentro de esta se alojará tu carpeta de proyecto (ZEPC-ZEPC_P7), como se muestra en la siguiente imagen, para después ejecutarlos en la aplicación web desde tu servidor local. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 6 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” 3 Ahora busca alguna imagen del logotipo de la escuela en formato (.png) y un fondo de pantalla con calidad (HD) en formato (.jpg) y guardarlas dentro de la carpeta “imagenes” para después llamarlas desde los códigos “HTML” y “CSS” respectivamente del proyecto de aplicación. Actividad 3. 3.1 Por medio de un servidor de prueba y con ayuda de la herramienta Dreamweaver realizar el siguiente formulario en PHP. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 7 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Guarda el archivo con la extensión (Index.html), en la carpeta general (ZEPC-ZEPC_P7). 3.2 Ahora edita el siguiente código. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 8 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Guarda el archivo con la extensión (Guardar-reg.php), dentro de la subcarpeta destinada de recursos “php”. 3.3 Edita el siguiente código. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 9 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Guarda el archivo con la extensión (Eliminar-reg.php), dentro de la subcarpeta destinada de recursos “php”. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 10 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 11 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” 3.4 Como último pasó edita el siguiente código css. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 12 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 13 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Guarda el archivo con la extensión (Estilos.css), dentro de la subcarpeta destinada de recursos “css”. 3.5 Dar doble click en el icono de Wampserver para Iniciar los servicios de nuestro servidor local como “localhost”. Y cuando este habilitado el servidor en un navegador predeterminado (explorer, google crome o mozilla Firefox) y ejecuta tu archivo (index.html), que se encuentra en la carpeta (ZEPC-ZEPC_P7), para visualizar el resultado de la aplicación al momento. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 14 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Pantalla de búsqueda del registro. Pantalla de visualización del registro. Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 15 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Conclusiones 1.Por medio de estos códigos inculcamos de manera práctica el php, sql, html y css para generar una pagina con base firme a la red y se pueda implementar fijamente en un espacio web de forma que este tenga un servidor de red amplío. 2.- El poder agregar a una programación de una base de datos dentro de una página web que sea la que recopile dichos datos que pueda retener información dentro de un servidor html es importante para implantar bases por medio de códigos y prácticas que nos permitan establecer medios red como una base principal del gestionamiento de datos pho, sql y css Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 16 INSTITUTO POLITÉCNICO NACIONAL CENTRO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS Nº 1 “GONZALO VÁZQUEZ VELA” Ing. Carlos Alberto Zenil Pérez MECATRÓNICA – DISEÑO DE APLICACIONES MÓVILES – T.M. Página 17