Conexión de una base de datos con MySQLy Php

 Bueno en esta ocasión haremos un ejercicio acerca de como se logra una conexión con una base de datos, para esta practica utilizaremos mysql.

en la siguiente imagen se muestra como validar para que los campos no estén vacíos , esto es necesario para el login en el cual necesitamos datos de entrada como son en el nombre de usuario y la contraseña los cuales están previamente en la base de datos.

Siguiendo con las imágenes esta que te mostramos ahora es una función la cual manejamos con expresión regular  para validar el campo del cual vamos a extraer los datos de tipo fecha, esto es necesario dado que en la base de datos al declarar los campos hemos definido estos que son de tipo date y esos campos requieren un formato especifico de fecha.

Aquí estamos definiendo los campos y las etiquetas para indicar los datos que  necesitamos que el usuario introduzca.

Al final de la siguiente imagen podemos notar que tenemos un botón para enviar los datos siempre y cuando los campos estén debidamente rellenados

Aquí mostramos como dar formato a el html que sera presentado, puedes definir tamaños, color, forma, insertar alguna imagen, en este caso le damos formatos a las etiquetas, al header, a los campos, etc.

En esta imagen se muestra la conexión con la base de datos pero a una tabla especifica en este caso es para verificar si los datos introducidos en el login son datos existentes en la base de datos en la tabla usuarios. esta es una forma de realizar la conexión y la otra la mostramos en la imagen que sigue, en la cual la estamos realizando en otro .php y podremos acceder a el mediante el include (login.php).

Esta imagen muestra como realizamos la conexión con la base de datos de mysql .

como les decía anteriormente con ese include (login.php) llamamos a la conexión con la que estaremos trabajando para la administración de los datos correspondientes, en esta imagen que los campos no deben estar vacíos , el orden en el que entren los datos deben ser el orden en los campos en que se va a guardar la información en la base de datos.

Asi nos queda la interfaz de inicio donde el usuario tiene que colocar los datos que allí se piden

Al acceder esto nos muestra , lo cual contiene los campos que necesitamos que el usuario rellene para guardarlos en la base de datos.

Esta es la parte en la cual la función de la expresión regular que nos valida el formato de fecha entra.

Cuando ya todos los campos tienen la información requerida se le da click en el botón de enviar y nos muestra el mensaje que se muestra en la segunda imagen... "datos correctos" esto nos indica que se ha guardado con éxito la información en un registro de la base de datos.

Aquí te mostramos como efectivamente los datos fueron ya almacenados en nuevo registro en la base de datos en la que estamos trabajando, puedes verificar y comparar los datos, veras que se realizo exitosamente la conexión con la base de datos

Unidad Académica de Ingeniría.

Interfaces Gráficas.

Elaborado por :

*Guadalupe Lucero Durán

*Arely Medina Soto

Expresiones Regulares en JavaScript

Una expresión regular es una secuencia de caracteres que tiene una función definida, como es describir un conjunto de cadenas.

Se muestra el código en JavaScript que permite realizar la validación de expresiones regulares en un campo de texto, este ejemplo tiene relación con el ejemplo del login y la validación de datos en Mysql, en esta ocasión se validara el campo de contraseña con la finalidad de que se cree una contraseña segura, la condición es que los primeros 4 caracteres sean letras mayúsculas seguidas de 6 números y terminando con 3 letras minúsculas, si esta condición no se cumple se mandara el mensaje de error.

Si el usuario introduce en el campo password los datos correctos, al momento de pulsar el botón "Enter" se validara la cadena de caracteres, si es correcta mostrara el mensaje:

Si no se introducen los caracteres correctos, se mandara el  siguiente mensaje:

Interfaces Gráficas.

*Arely Medina Soto.

*Guadalupe Lucero Duran.

Instalación de Xampp

XAMPP es un servidor capaz de interpretar páginas dinámicas. Consiste principalmente en la base de datos Mysql, el Servidor web Apache y los interpretes para lenguajes de script PHP y PERL, El nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, Mysql, Php, Perl.

• Pasos para instalar Xampp: 

 1. Se puede descargar del siguiente enlace:  https://www.apachefriends.org/index.html.

  2. Se ejecuta el archivo .exe.    

     

      

   3. Se selecciona el lenguaje para realizar la instalación.    

      4. Nos aparece el asistente de instalación. 

    


        5.  Elegimos los componentes que se desean instalar. 

     
        6. Se elige la  ruta de instalación.

       7. Se empieza a  realizar la instalación.   

             8.  Se completa la instalación.

     10. En esta ultima imagen se muestra su entorno y podemos apreciar que tiene los botones Actions los   cuales le dan al usuario la facilidad detener o iniciar los servicios que ofrece esta herramienta, también en la parte donde tenemos las letras color rojo podemos apreciar que es el status que tiene así como la hora.

Interfaces Gráficas.

UAI.

**Arely Medina Soto.

       **Guadalupe Lucero Duran.

Tag deHTML5

Hola en esta ocasión vamos a utilizar etiquetas de html5 ,  es un ejemplo simple,  colocaremos las imágenes  sobre como fuimos agregando elementos para personalizar la página con estas etiquetas , las cuales ofrecen una mejor experiencia al usuario al momento de interactuar con paginas hechas con html.

como podemos notar creamos las funciones de header con sus propiedades , al igual que section, footer y body, siempre que se haga referencia a ellas tendrán esas propiedades por default algunas como color, borde, tamaño, etc.

En la imagen que sigue comenzamos a definir algunos elementos con los que se realiza esta práctica como son la imagen, audio, y algunos más en los que se puede visualizar en la imagen.

 Aquí ya mostramos los resultados de la aplicación de esos tags de html5

como podemos notar es agradable visualmente .

En el articulo que encuentras con el fondo color azul, en la ultima imagen, damos una pequeña descripción para que nos sirve cada una de ellas.

Primeramente puedes puedes visualizar el encabezado el cual tiene un fondo gris, después tenemos la imagen, despues un audio el cual inicia al cargar la pagina en el navegador, dentro del recuadro color azul tenemos la descripción de algunos Tags y finalmente tenemos el pie de pagina con fondo negro y letras color amarillas.

Interfaces Gráficas
UAI
*Guadalupe Lucero Duran
*Arely Medina Soto
Chilpancingo, Guerrero,México

Validacion con javascript

Primeramente vamos a definir que es y para que empleamos javaScript.
JavaScript es un lenguaje interpretado orientado a las páginas web, con una sintaxis semejante a la del lenguaje Java.

Se utiliza en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación cliente.

El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda 

definir el código JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>):

Para que la página XHTML resultante sea válida, es necesario añadir el atributo type a la etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados y para el caso de JavaScript, el valor correcto es text/javascript.

Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.

La principal utilidad de JavaScript en el manejo de los formularios es la validación de los datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se recomienda validar mediante JavaScript los datos insertados por el usuario. De esta forma, si el usuario ha cometido algún error al rellenar el formulario, se le puede notificar de forma instantánea, sin necesidad de esperar la respuesta del servidor. La validación de un formulario consiste en llamar una función de validación cuando el usuario cumple las restricciones impuestas por la aplicación.

Así, si el evento onsubmit devuelve el valor true, el formulario se envía como lo haría normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario no se envía. La clave de esta técnica consiste en comprobar todos y cada uno de los elementos del formulario. En cuando se encuentra un elemento incorrecto, se devuelve el valor false. Si no se encuentra ningún error, se devuelve el valor true.

Esta imagen es el complemento de la entrada anterior en la cual se trabajo con login, en esta ocasión realizamos la validación.

se muestra los resultados al momento de validar los campos de texto.

Interfaces Gráficas.

UAI

Ingeniería en computación

Séptimo Semestre

Práctica 2

*Guadalupe Lucero Duran

*Arely Medina Soto

php

Conexión de una Base de Datos con PHP.

¿Qué es PHP?

PHP  es un lenguaje de código abierto, diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento html en lugar de llamar a un archivo externo que produce los datos. El código es interpretado por un servidor web con un modulo de procesador de php que genera la pagina web resultante.

       

Para poder utilizar PHP se tiene que instalar XAMPP, es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor Web Apache y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia GNU y actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas dinámicas. Como editor de código usaremos NetBeans 7.3.1. 

El siguiente proyecto es un ejemplo  de código HTML que se encuentra incorporado a PHP donde se crea un formulario con dos campos de texto y dos botones uno para poder ingresar datos y el otro para borrar, se crea el enlace a una base de datos creada en mysql:

Código generado en php:

Se muestra la página que dio resultado del código que se generó en html y php:

se muestra el resultado después de introducir datos validos.

Unidad Académica de Ingeniería. 
Interfaces Gráficas.
Integrantes del Equipo:
 **Arely Medina Soto.
** Guadalupe Lucero Durán.
Chilpancingo, Guerrero.