You are on page 1of 51

TECNOLOGICO DE ESTUDIOS SUPERIORES DE CUAUTITLAN IZCALLI

Practicas de PHP y HTML Programacin de Web

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Practica 1.

Tablas de multiplicar

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
En esta practica crearemos dos archivos uno de html y otro de php. Primero abriremos Dreamweaver Despus selecciona la opcin que indica que crearemos un archivo HTML

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Esto nos muestra la pantalla de Dreamweaver

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
A continuacin agregaremos un formulario con un cuadro de texto y un botn De la barra de mens seleccionamos la opcin insertar , Formulario, campo de texto En la ventana que nos aparece en la seccin etiqueta, escribiremos la palabra NUMERO y damos clic en Aceptar

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
A continuacion debemos de seleccionar nuestro cuadro de texto

Y en la ventana de propiedades le agregaremos el nombre NUM al cual haremos referencia desde PHP

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora nos aparece el formulario en la pagina de diseo y tenemos que colocar el cursor delante del campo de texto y oprimir la tecla ENTER para que nos quede asi: Ahora agregaremos un botn de la misma manera que el campo de texto

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Nos deber quedar el formulario de la manera siguiente, el contorno de color rojo seala el formulario actual Ahora damos clic sobre la linea roja que delimita nuestro formulario

En la ventana de propiedades escribiremos el nombre del archivo TABLAS.php que crearemos mas adelante .

Para terminar: Guardaremos este archivo dentro de la carpeta C:\xampp\htdocs con el nombre de TABLAS. html

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora crearemos un nuevo archivo En el cuadro de dialogo que nos aparece seleccionaremos de la primer columna la opcin de Pgina dinmica y de la segunda columna la opcin PHP y damos clic en crear

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
En seguida daremos clic sobre el botn Cdigo, para poder ir a la ventana donde escribiremos nuestro cdigo de PHP

Ahora en nuestra ventana de cdigo dentro de la seccin <body> </body>

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora escribiremos el siguiente cdigo:

Este es el nombre de nuestro campo de texto de la pagina anterior, y para extraer la informacin necesitaremos la instruccin $_POST[NUM]

Y guardamos el archivo en la direccin C:\xampp\htdocs con el nombre TABLAS.php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
A continuacin nos regresamos a nuestro archivo TABLAS.html y damos clic en el icono de navegacin y seleccionamos la opcin Vista previa en IExplorer 7.0 o bien oprimimos la tecla F12

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La accin anterior abre el navegador de internet mostrndonos nuestra pagina

Ahora en el cuadro de texto escribiremos algn numero y damos clic en el botn de nuestro formulario

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La pagina anterior manda a llamar a la pagina que contiene el cdigo php mostrando el siguiente resultado:

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Practica 2.

Crear una base de datos en MySQL


Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Primero nos iremos a la pagina principal de XAMPP tecleando en la barra del explorador http://localhost o bien la direccin http://127.0.0.1

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ya que estamos en la pantalla principal de XAMPP damos clic sobre la opcin phpMyAdmin

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Al realizar lo anterior nos lleva ala pagina de phpMyAdmin (MySQL) que es donde crearemos la base de datos

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora crearemos la base de datos escribiendo el nombre Registro damos clic en el botn Crear

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora podemos verificar que nuestra base de datos se ha creado ya que nos lo confirma el software y vemos el nombre del lado izquierdo de nuestra pagina

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora crearemos una tabla dentro de nuestra base de datos la cual le llamaremos DATOS y le diremos que tiene 5 campos esa tabla y damos clic en el botn continuar

En seguida solo falta agregar los nombres de los campos como se ve en la imagen con el tipo de dato y la longitud y damos clic en el botn Grabar

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora solo verificamos que la tabla se haya creado y cerramos el explorador

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Practica 3.

Conexin de MySQL con HTML y PHP


Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora desde Dreamweaver crearemos una pagina con el siguiente formulario NC NOM AP AM

CARR

Ahora le debemos de poner los siguientes nombres a cada campo de texto

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Despus seleccionamos el Formulario completo y en la ventana de propiedades en la seccion de Accin escribimos guardar.php que es el nombre de la pagina en php que se encargara de almacenar los datos en la base y guardamos el archivo en la carpeta C:\\xampp\htdocs con el nombre Formulario.html

guardar.php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora crearemos una nueva pagina dinmica la cual contendr el cdigo en PHP y en la nueva pagina damos clic en el botn de cdigo para comenzar a programar

Con la accin anterior nos abrir el cdigo de la pagina para poder escribir el cdigo php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Dentro de la TAG <body> y </body> Tendremos que escribir el siguiente codigo:

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Explicacin del cdigo lnea por lnea

Contrasea sin definir Nombre del usuario, como no hemos definido ningn usuario escribiremos root que es el sper usuario de MySQL Ubicacin del servidor, aqu podemos escribir localhost o bien la url de xampp 127.0.0.1 Comando para indicar que es una base de datos en MySQL Variable que almacenara la conexin con la base de datos

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Variable que contiene la conexin con el servidor

Nombre de nuestra base de datos

Instruccin que nos ayuda a seleccionar la base de datos

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Recordemos con la instruccin $_POST traemos los datos de una pagina web y lo que esta dentro de los corchetes son los nombres de los objetos

En una variable $sql almacenamos la instruccin sql para guardar un nuevo registro en la base de datos a la cual le estamos concatenando los valores de los objetos del formulario de la pagina Formulario.html

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Comando que termina la instruccin en caso de que exista algn error

Variable que contiene la conexin con el servidor y la base de datos

Variable que contiene el cdigo sql


Instruccin que ejecuta algn comando en sql la cual requiere el cdigo sql y la conexin con la base de datos Variable que almacenar si es que la instruccin se ejecuta correctamente

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

href
Ahora solo mandamos un mensaje de que el registro se guardo Cerramos el cdigo php Escribimos un salto de lnea Agregamos un hipervnculo para la prxima pagina En seguida guardamos nuestro archivo con en la direccion c://xampp/htdocs con el nombre guardar.php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora crearemos otra pagina dinmica de php para mostrar los datos en forma de tabla y escribiremos el siguiente codigo

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Explicacin de los comandos no vistos en alguna de las practicas o paginas Variable que se acopla al resultado de una fila del resultado de la consulta en SQL Instruccin que extrae el resultado de la consulta en SQL en manera de arreglo

Variable que contiene el codigo SQL


Instruccionq ue indica que la consulta se hizo a MySQL

La variable $row contiene la informacion en forma de arreglo, pero hay que indicar como se llama cada campo de nuestra tabla en la base de datos

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Ahora veremos como debe de funcionar nuestro conjunto de paginas Recuerda que para abrir las paginas lo puedes hacer de Dreamweaver oprimiendo la tecla F12

En caso que no funcione as tendrs que escribir la direccin de tu servidor y el nombre del archivo, ejemplo:
http://localhost/Formulario.html O bien: http://127.0.0.1/Formulario.html

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La primer pagina que abriremos es la pagina Formulario.html

Llenamos los campos y damos clic en el botn enviar

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

La siguiente pantalla solo nos dice que el registro se guardo correctamente y damos clic en el vinculo Mostrar datos

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Despus de insertar varios registros la pagina se vera mas o menos asi

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Ahora agregaremos dos vnculos: uno para borrar datos y otro para modificarlos.

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora crearemos en una pagina nueva la cual se llamara: para_modificar.html Esta solo contendr un formulario como el que se muestra abajo
El cuadro de texto deber llamarse NC

En las propiedades del formulario debemos de cambiar las opciones de: ACCION y METODO como se muestra en la imagen.

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
En una nueva pagina de PHP escribiremos el siguiente cdigo y a dicha pagina la llamaremos EXTRAE_DATOS.php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora ejecutaremos el cdigo SQL en una nueva pagina de php la cual estamos mandando llamar desde un formulario creado con cdigo, esta pagina llevara el nombre: DATOS_MODIFICADOS.php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La ejecucin de esta parte del sitio es de la siguiente manera

Damos clic en el vinculo Modificar datos

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
En la siguiente pgina escribimos un numero de control existente damos clic en el botn enviar

Despus nos aparecer esta pagina con los datos del numero de control que escribimos A continuacin cambiamos los datos que necesitemos y damos clic en el botn enviar

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Despus se ejecuta la pagina con el cdigo de SQL y solo nos muestra el mensaje notificando que el registro se modifico

Ahora damos clic en el vinculo Mostrar datos para verificar que los cambios se hayan realizado
Registro modificado

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La parte del borrado es similar a la de la modificacin as que solo mostrare lo que tenemos que escribir y los nombres de las paginas, as como la ejecucin La primer pgina que crearemos ser la que se llama:para_borrar.html

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La siguiente pagina debe de llamarse EXTRAE_DATOS_BORRAR.php y lleva el siguiente cdigo:

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
La siguiente pagina se llama DATOS_BORRADOS.php

Lic. Luis Antonio Snchez Reynoso

Programacin de Web
Ahora solo revisaremos como se ejecuta esta parte del sitio

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

El registro ya no esta VUALA! , MAGIA! , MAGIA! , MAGIA!

Lic. Luis Antonio Snchez Reynoso

Programacin de Web

Lic. Luis Antonio Snchez Reynoso

You might also like