45m

MANUAL DE PRÁCTICAS

INGENIERÍA EN SISTEMAS COMPUTACIONALES PLAN ISIC-2004-296

PROGRAMACIÓN WEBAEB-1055

ÍndiceINTRODUCCIÓN----------------------------------------------------------------------------------------------------------------1

PRÁCTICA 1Configurar un servidor de base de datos y un servidor web con servicios html y ftp.--------------------------2

PRÁCTICA 2Configurar y Administrar sitios web.----------------------------------------------------------------------------------------6

PRÁCTICA 3Verificar compatibilidad del código y Comprobar cumplimiento de los estándares internacionales de las aplicaciones web.---------------------------------------------------------------------------------------------------------------13

PRÁCTICA 4Realizar programas en lenguaje html sin utilizar hojas de estilo.---------------------------------------------------16

PRÁCTICA 5Realizar programas utilizando controles de formulario.---------------------------------------------------------------21

PRÁCTICA 6Realizar programas del lado del cliente y prototipos de proyectos web completos.----------------------------31

PRÁCTICA 7Realizar programas en donde se implementen mecanismos de seguridad para el acceso de información ---------------------------------------------------------------------------------------------------------------------------------------43

LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR-------------------------------------------------------51

LISTA DE BIBLIOGRAFÍA REQUERIDA--------------------------------------------------------------------------------51

CONTROL DE CAMBIOS DEL MANUAL DE PRÁCTICAS--------------------------------------------------------52

Programación Web [AEB-1055]

INTRODUCCIÓNLa importancia de la materia se centra en conocer y desarrollar cada una de las etapas de la programación para la solución de problemas en un lenguaje de programación en ambiente web, por lo que en el siguiente manual se desarrollan las prácticas que el alumno debe realizar.

Fecha de Actualización 30/08/2013 Página 1


Práctica 1

CONFIGURAR UN SERVIDOR DE BASE DE DATOS Y UN SERVIDOR WEB CON SERVICIOS HTML Y FTP.

Observaciones: Esta práctica incluye a la Práctica #1 del temario de Programación Web, que dice “Instalar y configurar base de datos, servidores web y lenguajes de programación del lado del servidor”.

1.- OBJETIVOEl alumno configurara un servidor de base de datos y un servidor web con servicios html y ftp, que le permitirá realizar aplicaciones web las cuales se conecten al servidor de base de datos.

2.- MARCO TEÓRICOUn servidor web es un programa que se ejecuta continuamente en un ordenador manteniéndose a la espera de peticiones por parte de un cliente y que responde a estas peticiones adecuadamente, mediante una página web que se exhibirá en el navegador o mostrando el respectivo mensaje.

Un servidor web portable: es un servidor web portable, que puede ser instalado y utilizado desde dispositivos como pueden ser tarjetas de memoria, USB, CD o DVD y hasta un e un disco duro. Por lo tanto es más fácil y cómoda su utilización.

Server 2go es un servidor web portable completamente funcional y transportable, que se puede ejecutar desde un Cd o USB ya que se carga en memoria, por lo tanto puede ser llevado a cualquier sitio y ejecutado desde allí.

Las características que ofrece son: Gratuito Servidor basado en WAMP software combo (Windows, Apache, MySQL, PHP y Perl) PHP 5 con muchas extensiones instaladas. SQLite MySQL 5 Perl 5.8 Funciona mediante la apertura del puerto 4001 del equipo local (http://127.0.0.1:4001.)

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR

Computadora. Servidor Server2go. Memoria usb (porque se trabaja con software portable).

4.- COMPETENCIAS ESPECÍFICASPara poder correr alguna aplicación web necesitaremos antes instalar y configurar nuestro servidor web portable en este caso usaremos el Server2go.



Procedimiento la instalación y la configuración del sever2go.

1. Antes de la instalación

Primero es necesario tener en cuenta algunas consideraciones de instalación, si quieres instalar el Server2go en tu memoria tienes que tener memoria liberada de por lo menos 260 MB.Después ejecuta el programa para que se instale en tu memoria y puedas trabajar en tu computadora con el Server2go.

Para instalar: Entrar a la página www.server2go-web.de Entrar al apartado de Downloads. Escoger la opción PHP 5.2.10, SQLITE, MYSQL 5.0.41 APACHE 2.0.63 Presionar el enlace de descarga Descargarlo y guardarlo en tu memoria USB Ya descargado hay que descomprimirlo en la USB en la carpeta con el nombre Server2GO Dentro de esta carpeta hay un block de notas llamado pms_config en este hay que configurar

las siguientes líneas de código:

;--- default temp directory is usedMirrorFolder=c:\MyS2GApp\Data\

Los cambios deben verse así:;--- default temp directory is usedMirrorFolder=F:\MyS2GApp\Data\ (dónde F es la unidad que reconoce la computadora para la memoria USB)

En la línea:;--- Commandline parameters (i.e. skip-innodb)MySQLCmd=--skip-innodbLos cambios son:

;--- Commandline parameters (i.e. skip-innodb);MySQLCmd=--skip-innodbY por último en las líneas;--- The port that should be used for MySQL. If empty the default mysql port is usedMySQLPort=7188 Y debe verse así:;--- The port that should be used for MySQL. If empty the default mysql port is usedMySQLPort=

Guardar los cambios hechos en dicho bloc de notas y cerrar. Cargar el servidor portable, es decir hacer clic en el icono con la siguiente figura: Una vez cargado aparecerá una página en el Internet Explorer con el nombre Server2Go

Selfconfigurating WAMP Stack, revise la página completa para cerciorarse que no hay ningún problema con la carga del servidor.


http://www.server2go-web.de/


Abra el símbolo del sistema.

Cambie la unidad a la de USB.

Entre al directorio Server2Go.

Entre al subdirectorio con el mismo nombre.

Entre al directorio Server.

Cambié al directorio MySQL.

Cambie al directorio Bin.

Una vez en este directorio escriba mysql –u root –p y presione enter.

Cree la base de datos con sus tablas correspondientes.

Toda esta información será guardada en su USB.

Ten mucho cuidado cuando instales server2go en una computadora que tenga instalado mysql pues tu base de datos podría guardarse en la memoria de la computadora no en tu USB.

5. RESULTADOSInstalación y configuración adecuada del servidor de base de datos y el servidor web.



6. CONCLUSIONESEl alumno aprenderá a instalar el servidor de base de datos y a configurarlo de forma adecuada, así como también instala y configura un servidor web, para posteriormente probar sus programas.

7.- BIBLIOGRAFÍA Michael Bowers.Pro CSS and HTML Design Patterns. Editorial Apress

Domine HTML Y DHTML 2° edición. José López Quijado. Editorial Alfaomega.

PHP 6 AND MYSQL 5. LARRY ULLMAN. Editorial Peachpit Press.

http://sentidoweb.com/2007/10/03/server2go-servidor-wamp-portable.php http://www.visualbeta.es/7068/aplicaciones-web/server2go-un-servidor-web-

portable/ http://www.server2go-web.de/index.html



Práctica 2

CONFIGURAR Y ADMINISTRAR SITIOS WEB.Observaciones: Esta práctica incluye a la Práctica #2 Y #3 del temario de Programación Web, que dice “Instalar y configurar: editores de web para la construcción, edición de sitios y aplicaciones web.” y “Configurar y administrar sitios web.”

1.- OBJETIVOEl alumno aprenderá a configurar y administrar un Sitio Web Local utilizando el programa DreamWeaver.

2.- MARCO TEÓRICOUn sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora. Editor de Páginas Web, Adobe DreamWeaver CS5.



4.- COMPETENCIAS ESPECÍFICAS

1.- Abra Dreamweaver CS5. De click en el botón Site y posteriormente seleccione New Site.

2.- Capture el nombre del sitio en Site Name y la ruta donde residen los archivos del mismo en Local Site Folder.



3.- De clic sobre la pestaña Servers del lado izquierdo y enseguida en el símbolo de más +.



4.- Capture los datos que se solicitan, considere:

Server Name: El nombre que desee ponerle

FTP Adress: El nombre de su dominio

Username: Su nombre de usuario

Password: Su contraseña

Root Directory (para servidores con Parallels Plesk): /httpdocs/

Root Directory (para servidores con cPanel): /public_html/

5.- De clic en la sección More Options.



6.- Seleccione los siguientes puntos:

Use Passive FTP: SI

Use FTP performance optimization: SI

7.- De clic en el botón Save.

8.- DreamWeaver mostrará un mensaje de que la conexión ha sido a exitosa.



5. RESULTADOSConfigurar exitosamente el Sitio Web, para poder realizar las pruebas posteriormente.

6. CONCLUSIONESEl alumno aprenderá a preparar y configurar el Sitio Web de forma local utilizando DreamWeaver.

7.- BIBLIOGRAFÍAMichael Bowers. Pro CSS and HTML Design Patterns. Editorial Apress

Olivier HEURTEL. PHP 5.3 Desarrollar un Sitio Web dinámico e interactivo. Editorial ENI.





Práctica 3

VERIFICAR COMPATIBILIDAD DEL CÓDIGO Y COMPROBAR CUMPLIMIENTO DE LOS ESTÁNDARES INTERNACIONALES DE LAS APLICACIONES WEB.

Observaciones: Esta práctica incluye a la Práctica #4 y #5 del temario de Programación Web, que dice “Ejecutar los programas realizados en clase en diferentes navegadores para verificar la compatibilidad del código” y “Comprobar el cumplimiento de los estándares internacionales de las aplicaciones web”.

1.- OBJETIVOEl alumno aprenderá a comprobar la compatibilidad de código y cumplimientos de los estándares internacionales de todas sus páginas web realizadas.

2.- MARCO TEÓRICO

¿Qué es la compatibilidad web?Que una web sea compatible con todos los navegadores significa que se vea igual (o muy similar) en todos ellos. Esto es bastante complicado, podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes navegadores, como Explorer, Firefox, Chrome, Opera, Safari y Mozilla.

El problema radica en que no todos los navegadores interpretan en código HTML y CSS de la misma manera, entre ellos existen pequeñas variaciones que son las que hacen que el resultado no sea el mismo de unos a otros. Algunas de esas diferencias son tan importantes que pueden hacer que partes de tu web no funcionen o no se vean, y como el propósito de hacer una web es que la vea el mayor número de personas (y que éstas la vean correctamente), es muy importante que la web funcione en el mayor número de navegadores posibles.

Por tanto, a la hora de hacer una página web no es suficiente centrarse en la audiencia adecuada, registrar un nombre de dominio o tener un diseño agradable al usuario. Todo esto puede verse ensombrecido si un usuario no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al crearla.

Mejorar la compatibilidad con navegadoresValidar el código de tu web en base a los estándares del W3C es un buen hábito que conviene practicar. Básicamente consiste en escanear tú web en busca de errores de programación para una vez detectados poder corregirlos. Además, aparte de detectar errores de codificación te proporciona una breve explicación del error, por lo que aprenderás cosas nuevas validando tu web. Tener una página sin errores es importante porque maximiza la compatibilidad entre navegadores al mismo tiempo que te asegura que tu código siga valiendo para futuras revisiones de HTML, CSS, etc.



Tómate tu tiempo para validar el código CSS de tu web. Eso hará que te sea más fácil conseguir que tu sitio se vea igual en los distintos navegadores ya que hará que tengas un código más limpio y sobre todo sin errores.

Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea será difícil y larga. Además, es muy sencillo que se te pasen errores, mientras que usando herramientas online no ocurrirá. El validador de CSS del W3C es la mejor opción para ello, ya que esta entidad es la que se encarga de crear los estándares de la web.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora. Internet indispensable.

4.- COMPETENCIAS ESPECÍFICAS Introducir en a la barra de direcciones de un navegador web el siguiente link:

http://validator.w3.org/ Aparecerá la siguiente página:

Introducir en la barra de direcciones la URL de tu página que deseas validar.

Dar clic sobre el botón comprobar.

5. RESULTADOSLos resultados esperados son la validación de las páginas web, para garantizar la compatibilidad con los navegadores más utilizados.


http://validator.w3.org/


6. CONCLUSIONESEl alumno aprenderá utilizar los programas en línea para comprobar la compatibilidad de las páginas web creadas con los navegadores más populares.

7.- BIBLIOGRAFÍA Michael Bowers.Pro CSS and HTML Design Patterns. Editorial Apress




Práctica 4

REALIZAR PROGRAMAS EN LENGUAJE HTML SIN UTILIZAR HOJAS DE ESTILO.

Observaciones: Esta práctica incluye la Práctica #6 y #7 del temario de Programación Web, que dice “Realizar programas donde no se haga el uso de archivos CSS” Y “Modificar los programas elaborados y añadirle hojas de estilos externas.”

1.- OBJETIVOComprender la diferencia entre utilizar hojas de estilo y no utilizarlas en un programa realizado en lenguaje HTML.

2.- MARCO TEÓRICOLenguaje HTMLLas páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:<html>

<head>

<title>El primer documento HTML</title>

</head>

<body>

<p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p>

</body></html>



El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto a los actuales, mucho más amplios.

Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y otras. Estas "trampas" han causado a menudo problemas en las páginas a la hora de su visualización en distintas plataformas.

Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos de ellos venían maquetando páginas sobre el papel, donde el control sobre la forma del documento es absoluto.

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología consiste en que las páginas web tienen mezclado en su código HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del código HTML se hace pesada y difícil a la hora de buscar errores o depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que estos textos estén mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad.

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:

Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.

Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.

Una porción del documento, aplicando estilos visibles en un trozo de la página.

Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:

Podemos definir la distancia entre líneas del documento.

Se puede aplicar identado a las primeras líneas del párrafo.

Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.

Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados, tachados...

Navegadores que lo soportan

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.



Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos usuarios no podrán ver los formatos que apliquemos a las páginas con CSS. Así pues, utilizad las hojas de estilos cuando estas no vayan a suponer un problema.

Vamos ahora a describir los diferentes usos de las CSS introducidos en el anterior capítulo. Vamos por orden, describiendo los puntos según su dificultad e importancia.

Existen dos opciones para incluir CSS en un documento HTML.

1. Incluir CSS en el mismo documento HTML

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

Ejemplo:

<html>

<head>

<title>Ejemplo de estilos CSS en el propio documento</title>

<style type="text/css">

p { color: red; font-family: Verdana; }

</style>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

2. Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css.



Normalmente, la etiqueta <link> incluye cuatro atributos.

rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

href: indica la URL del archivo CSS que contiene los estilos.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

Ejemplo:

<html >

<head>

<title>Ejemplo de estilos CSS en un archivo externo</title>

<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

Propiedad: permite modificar el aspecto de una característica del elemento.

Valor: indica el nuevo valor de la característica modificada en el elemento.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora. Editor de Páginas Web, Adobe DreamWeaver CS5. Internet indispensable.



4.- COMPETENCIAS ESPECÍFICAS Realizar los programas en lenguaje html solicitados por el profesor, los cuales no incluirán

hojas de estilo.

Realizar los programas en lenguajes html que incluyan archivo externo con hojas de estilo.

5. RESULTADOSProgramas realizados en lenguaje html, sin utilizar hojas de estilo y posteriormente utilizando hojas de estilo para comprender la diferencia.

6. CONCLUSIONESEl alumno aprenderá a realizar programas en el lenguaje html sin incluir hojas de estilo en el documento, además de que aprenderá como incluir un archivo externo con hojas es estilo.

7.- BIBLIOGRAFÍA Michael Bowers. Pro CSS and HTML Design Patterns. Editorial Apress

Herrera, Emmanuel. Arrancar con HTML 5. Editorial Alfaomega.

http://librosweb.es/libros/


http://librosweb.es/libros/


Práctica 5

REALIZAR PROGRAMAS UTILIZANDO CONTROLES DE FORMULARIO.

Observaciones: Esta práctica incluye a la Práctica #1 del temario de Programación Web, que dice “Realizar programas en donde se haga el uso de los controles y modifiquen sus propiedades.” y “Realizar programas en donde se haga el uso de paso de parámetros entre páginas web.” Y “Realizar programas en donde se le aplique estilos a los diferentes controles de los formularios.”

1.- OBJETIVOEl alumno realizara ejemplos prácticos, que le permitan realizar aplicaciones del lado del servidor.

2.- MARCO TEÓRICOUn servidor web es un programa que se ejecuta continuamente en un ordenador manteniéndose a la espera de peticiones por parte de un cliente y que responde a estas peticiones adecuadamente, mediante una página web que se exhibirá en el navegador o mostrando el respectivo mensaje.

Un servidor web portable: es un servidor web portable, que puede ser instalado y utilizado desde dispositivos como pueden ser tarjetas de memoria, USB, CD o DVD y hasta un e un disco duro. Por lo tanto es más fácil y cómoda su utilización.

Server 2go es un servidor web portable completamente funcional y transportable, que se puede ejecutar desde un Cd o USB ya que se carga en memoria, por lo tanto puede ser llevado a cualquier sitio y ejecutado desde allí.

Las características que ofrece son: Gratuito Servidor basado en WAMP software combo (Windows, Apache, MySQL, PHP y Perl) PHP 5 con muchas extensiones instaladas. SQLite MySQL 5 Perl 5.8 Funciona mediante la apertura del puerto 4001 del equipo local (http://127.0.0.1:4001.)

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora. Editor Adobre DreamWeaver CS5.



http://127.0.0.1:4001/


El alumno capturara los siguientes programas:

<?php/* foreach ejemplo 1: sólo valor*/$a = array(1, 2, 3, 17);foreach($a as $v) {print "Valor actual de \$a: $v.\n";}/* foreach ejemplo 2: valor (con clave impresa para ilustrar) */$a = array(1, 2, 3, 17);$i = 0; /* sólo para propósitos demostrativos */foreach($a as $v) {print "\$a[$i] => $k.\n";}/* foreach ejemplo 3: clave y valor */$a = array("uno" => 1,"dos" => 2,"tres" => 3,"diecisiete" => 17);foreach($a as $k => $v) {print "\$a[$k] => $v.\n";}?>

<?php$opc=4;



switch($opc){case 1:echo "Elegiste la opción 1";break;case 2:echo "Elegiste la opción 2";break;case 3:echo "Elegiste la opción 3";break;case 4:echo "Elegiste la opción 4";break;case 5:echo "Elegiste la opción 5";break;default:echo "Opción no valida y es por eso que me imprimí";}?>

<?phpfunction suma($a,$b,$c){



$c=$a+$b;}$valor1=33;$valor2=21;$res=0;suma($valor1,$valor2,$res);echo "La suma es ".$res?>

<?phpfunction AgregarTexto(&$string){$string .= " y algo más";}$str = "Esto es una cadena, ";AgregarTexto ($str);echo $str;?>



<?phpfunction AgregarTexto ($bar){$bar .= " y algo más.";}$str = "Esto es una cadena, ";foo ($str);echo $str;foo (&$str);echo $str;?><?phpfunction makecoffee ($type = "cappucino"){return "Hacer una taza de $type.\n";}echo makecoffee ();echo makecoffee ("espresso");?>

<?phpfunction makeyogurt ($type = "acidophilus", $flavour){return "Haciendo un bol de $type $flavour.\n";}echo makeyogurt ("mora"); // No funcionará de la manera esperada?>



<?phpfunction Opcionales ($flavour, $type = "del tio Lee"){return "Cuarto cafesito ".$type. " ".$flavour. "<br>";}echo Opcionales ("en la segunda estacion");echo Opcionales ("en la segunda estacion","de la tia Agata");?>



<html><head><title>Documento sin título</title></head><body><form name="form1" method="post" action="">Nombre: <input type="text" name="textfield"> <br>Apellido Paterno <input type="text" name="textfield2"> <br>Apellido Materno <input type="text" name="textfield3"> <br><br>Edad

<select name="select"><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option></select>


<br>Color Favorito <br><input name="radiobutton" type="radio" value="radiobutton"> Negro<br><input name="radiobutton" type="radio" value="radiobutton"> Blanco<br><input name="radiobutton" type="radio" value="radiobutton">Azul<br><input name="radiobutton" type="radio" value="radiobutton">Verde<br><input name="radiobutton" type="radio" value="radiobutton">Amarillo<br><input name="radiobutton" type="radio" value="radiobutton">Rosa<br><input name="radiobutton" type="radio" value="radiobutton">Rojo<br><input name="radiobutton" type="radio" value="radiobutton">Gris</form></body></html>

<html><head><title>Documento sin título</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"></style></head><body><form name="form1" method="post" action="datos.php"><p>nombre<input name="nombre" type="text" id="nombre"></p><p>Apellido Paterno<input name="ap" type="text" id="ap"></p><p>Apellido Materno<input name="am" type="text" id="am">


</p><p>Edad<select name="edad" id="edad"><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option></select></p><p>Sexo: F<input name="sexo" type="radio" value="F">M<input name="sexo" type="radio" value="M"></p><p>Color Favorito:</p><p class="Estilo1"><input name="color" type="radio" value="#FF0000">Rojo <br><input name="color" type="radio" value="#FFFF00">Amarillo <br><input name="color" type="radio" value="#0066FF">Azul <br><input name="color" type="radio" value="#996633">Cafe <br><input name="color" type="radio" value="#99FF66">Verde <br><input name="color" type="radio" value="#FF99FF">Rosa <br><input name="color" type="radio" value="#000000">Negro <br><input name="color" type="radio" value="#FFFFFF">Blanco</p><p>Carrera de Interes </p><p><input name="carrera[]" type="checkbox" id="carrera[]" value="isc">Ing. en Sistemas Computacionales <br><input name="carrera[]" type="checkbox" id="carrera[]" value="ie">Ing. Electromecánica<br><input name="carrera[]" type="checkbox" id="carrera[]" value="ii">Ing. Industrial<br><input name="carrera[]" type="checkbox" id="carrera[]" value="lc">Lic. en Contadiría <br></p><p>



<input type="submit" name="Submit" value="Enviar"></p></form></body></html>

5. RESULTADOS Programas con diferentes elementos de un formulario web.

6. CONCLUSIONESEl alumno aprenderá a trabajar con elementos de un formulario web.

7.- BIBLIOGRAFÍA Domine HTML Y DHTML 2° edición. José López Quijado. Editorial Alfaomega.


Pablo N. Guillermo SOM. ASP.NET con C#. Editorial ENI.



Práctica 6

REALIZAR PROGRAMAS DEL LADO DEL CLIENTE y PROTOTIPOS DE PROYECTOS WEB COMPLETOS.

Observaciones: Esta práctica incluye la Práctica #11, #12, #13 y #14 del temario de Programación Web, que dice “Realizar programas en donde se haga el uso de cuadros de lista dependientes, como por ejemplo: países y estados.” “Realizar programas donde se manipulen los controles a través del lenguaje de programación del lado cliente.” “Realizar prototipos de proyectos web completos.” “Realizar programas en donde se lleve a cabo la validación de entrada de datos desde el lado del cliente y el lado servidor.”

1.- OBJETIVOImplementar una aplicación que procese formularios cuyos datos sean validados del lado del cliente y realice modificaciones a la base de datos.

2.- MARCO TEÓRICOMicrosoft Visual Studio es un entorno de desarrollo integrado (IDE, por sus siglas en inglés) para sistemas operativos Windows. Soporta varios lenguajes de programación tales como Visual C++, Visual C#, Visual J#, ASP.NET y Visual Basic .NET, aunque actualmente se han desarrollado las extensiones necesarias para muchos otros.

Visual Studio permite a los desarrolladores crear aplicaciones, sitios y aplicaciones web, así como servicios web en cualquier entorno que soporte la plataforma .NET (a partir de la versión net 2002). Así se pueden crear aplicaciones que se intercomuniquen entre estaciones de trabajo, páginas web y dispositivos móviles.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora. Visual Studio 2008. Internet indispensable.

4.- COMPETENCIAS ESPECÍFICAS El alumno realizara los formularios que se requieran para su proyecto final.



En esta página de cargaran las paginas siguientes las que se ocuparan en todo el sistema

Página de altas de contrato de tomas

Esta imagen muestra cómo se guardaron correctamente los datos en la tabla contrato_toma



Esta imagen muestra una consulta general de la tabla contrato_toma



Esta imagen es de bajas de contrato_tomas

Imagen de la interfaz de modificaciones contrato_toma



Esta imagen muestra la interfaz de la altas de usuarios

Código fuente

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;

namespace comision1{ public partial class Identificacion : Form { public Identificacion() { InitializeComponent(); }

private void Form1_Load(object sender, EventArgs e) {

}

private void button1_Click(object sender, EventArgs e)



{ frmMenu obj = new frmMenu(); obj.Show(); }

private void button2_Click(object sender, EventArgs e) { this.Close(); } }}

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;

namespace comision1{ public partial class frmMenu : Form { public frmMenu() { InitializeComponent(); } frmAltasToma obj; frmConsultaToma obj1; frmBajacontra obj2; frmModificaToma obj3; frmAltaUsuario obj4; private void altasToolStripMenuItem_Click(object sender, EventArgs e) { obj = new frmAltasToma(); obj.MdiParent = this; obj.Show(); }


}

private void bajasToolStripMenuItem_Click(object sender, EventArgs e) {



obj2 = new frmBajacontra(); obj2.MdiParent = this; obj2.Show(); }

private void consultasToolStripMenuItem_Click(object sender,EventArgs e) { obj1=new frmConsultaToma(); obj1.MdiParent = this; obj1.Show(); }

private void modificacionesToolStripMenuItem_Click(object sender, EventArgs e) { obj3 = new frmModificaToma(); obj3.MdiParent = this; obj3.Show();

}

private void altasToolStripMenuItem1_Click(object sender, EventArgs e) { obj4 = new frmAltaUsuario(); obj4.MdiParent = this; obj4.Show(); }

}}

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;using System.Data.SqlClient;

namespace comision1{ public partial class frmAltasToma : Form { public frmAltasToma() {

InitializeComponent(); } string cad = "Data Source=COLOSSUS; Initial Catalog=Comision; Data Source=(local);Integrated Security=SSPI";



SqlConnection conexion;

private void frmAltasToma_Load(object sender, EventArgs e) { try { conexion = new SqlConnection(cad); conexion.Open(); } catch (Exception ex) { MessageBox.Show("Error en la conexión");

}

}

private void btnGuardar_Click(object sender, EventArgs e) { int max = 0; bool continua; try { string sql1 = "select max(No_toma) from Contrato_toma"; SqlCommand comando = new SqlCommand(sql1, conexion); max = Convert.ToInt32(comando.ExecuteScalar()); continua = true; comando = null;

} catch (Exception ex) { MessageBox.Show("Error en el incremento: " + ex.Message); continua = false; }

if (continua == true) { try

{ max++; string SQL2 = "Insert into Contrato_toma(No_toma,Nom_titular,Ap_p,AP_m,Calle,No_casa,Fecha,Costo) values (" + max + "," + "'" + txtNomTitular.Text + "' ," +



"'" + txtApP.Text + "' ," + "'" + txtApM.Text + "' ," + "'" + txtCalle.Text + "' ," + " " + txtNo.Text + " ," + " '" + dtpFecha.Text + "' ," + " "+ txtCosto.Text+")"; SqlCommand comando = new SqlCommand(SQL2, conexion); comando.ExecuteNonQuery(); comando = null; MessageBox.Show("Datos ingresados exitosamente");

} catch (Exception ex) { MessageBox.Show("Error en la inserción: " + ex.Message); } } }

private void frmAltasToma_FormClosed(object sender, FormClosedEventArgs e) { conexion.Close(); } }}

using System;using System.Collections.Generic;using System.ComponentModel;using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;using System.Data.SqlClient;

namespace comision1{ public partial class frmAltaUsuario : Form {

public frmAltaUsuario() { InitializeComponent(); } string cad = "Data Source=COLOSSUS; Initial Catalog=Comision; Data Source=(local);Integrated Security=SSPI";




private void btnGuardar_Click(object sender, EventArgs e) { }

private void btnConectar_Click(object sender, EventArgs e) { try { conexion = new SqlConnection(cad); conexion.Open(); MessageBox.Show("Conexión Abierta"); } catch (Exception ex) { MessageBox.Show("Error en la conexión");

} }

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;using System.Data.SqlClient;

namespace comision1{ public partial class frmConsultaToma : Form { public frmConsultaToma() { InitializeComponent(); } string cad = "Data Source=COLOSSUS; Initial Catalog=Comision; Data Source=(local);Integrated Security=SSPI";


private void btnConectar_Click(object sender, EventArgs e) { try



{ conexion = new SqlConnection(cad); conexion.Open(); MessageBox.Show("Conexión Abierta"); } catch (Exception ex) { MessageBox.Show("Error en la conexión");

} }

private void frmConsultaToma_Load(object sender, EventArgs e) {

}

private void btnDesconectar_Click(object sender, EventArgs e) { try { conexion.Close(); conexion = null;

} catch (Exception ex) {

} } SqlDataAdapter adaptador; DataSet ds;

private void btnMostrar_Click(object sender, EventArgs e) { try { string sql = "select * from Contrato_toma"; adaptador = new SqlDataAdapter(sql, conexion); ds = new DataSet();

SqlCommandBuilder builder = new SqlCommandBuilder(adaptador); adaptador.DeleteCommand = builder.GetDeleteCommand(); adaptador.UpdateCommand = builder.GetUpdateCommand(); adaptador.InsertCommand = builder.GetInsertCommand();

//SqlDataAdapter adaptador2=new SqlDataAdapter adaptador.Fill(ds, "tabla1"); //adaptador2.Fill(ds,"tabla2");

dgLista.DataSource = ds.Tables[0]; // un data grid es un contenedor de tablas

} catch (Exception ex)



{ MessageBox.Show("Error en la consulta");

} }

private void dgLista_CellContentClick(object sender, DataGridViewCellEventArgs e) {

} }}

5. RESULTADOSProgramas donde se manipulan los controles a través del lenguaje de programación del lado cliente.

6. CONCLUSIONESEl alumno realizara las interfaces de su sitio web completo.

7.- BIBLIOGRAFÍA Jesse Liberty & Dan Hurwitz. Programming ASP.NET. Editorial O´reily

José Manuel Alarcón Aguín. Programación Web con Visual Studio y ASP.NET 2.0. Editorial Krasis Press.



Práctica 7

REALIZAR PROGRAMAS EN DONDE SE IMPLEMENTEN MECANISMOS DE SEGURIDAD PARA EL ACCESO DE INFORMACIÓN.

Observaciones: Esta práctica incluye la Práctica #15, #16 y #17 del temario de Programación Web, que dice “Realizar programas en donde se implementen mecanismos de seguridad para el acceso de información.” “ Realizar programas en donde se elabore una agenda con conexión a base de datos y archivos de texto.” Y “Realizar el programa anterior en otro lenguaje de programación web para su evaluación.”

1.- OBJETIVOPost procesar XML usando un lenguaje Script del lado del cliente

2.- MARCO TEÓRICOC♯ (pronunciado si sharp en inglés) es un lenguaje de programación orientado a objetos desarrollado y estandarizado por Microsoft como parte de su plataforma .NET, que después fue aprobado como un estándar por la ECMA e ISO.

Su sintaxis básica deriva de C/C++ y utiliza el modelo de objetos de la plataforma.NET el cual es similar al de Java aunque incluye mejoras derivadas de otros lenguajes (entre ellos Delphi).

La creación del nombre del lenguaje, C♯, proviene de dibujar dos signos positivos encima de los dos signos positivos de "C++", queriendo dar una imagen de salto evolutivo del mismo modo que ocurrió con el paso de C a C++.

Microsoft SQL Server 7.0 constituye un lanzamiento determinante para los productos de bases de datos de Microsoft, continuando con la base sólida establecida por SQL Server 6.5. Como la mejor base de datos para Windows NT, SQL Server es el RDBMS de elección para una amplia gama de clientes corporativos y Proveedores Independientes de Software (ISVs) que construyen aplicaciones de negocios. Las necesidades y requerimientos de los clientes han llevado a la creación de innovaciones de producto significativas para facilitar la utilización, escalabilidad, confiabilidad y almacenamiento de datos.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora. Visual Studio 2008. Internet indispensable.




Utilizamos esta parte del código para seleccionar la base de datos a la que queremos conectarnos con una lista desplegable con la siguiente sentencia. private void btnConectar_Click(object sender, EventArgs e) {

sCnn = "Server=" + cboInstancias.Text + "; " + "database=" + cboBases.Text + "; integrated security=yes"; SqlConnection cnn = new SqlConnection(sCnn); if( existeTabla(cnn, "libro") == false ){ if( MessageBox.Show("NO existe la tabla Prueba, que es la usada para este ejemplo.\n" +

"¿Quieres crearla?", "No existe la tabla", MessageBoxButtons.YesNo) == DialogResult.Yes ){

if( crearTablaPrueba() == false ){ return; } }

else{ return; } }

En esta parte del código nos muestra los datos que insertamos en la base de datos y tenemos las opciones de actualizar, eliminar e insertar un nuevo libro.



using System;usingSystem.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using System.Data.SqlClient;

namespace BibliotecaJoseSSerna{ public partial class Form1 : Form { //SqlConnection cnn; public Form1() { InitializeComponent(); } string sCnn; private void button1_Click(object sender, EventArgs e) {



if (this.usuario.Text == "") { MessageBox.Show("No inserto el Nombre de Usuario", "Datos en blanco", MessageBoxButtons.OK, MessageBoxIcon.Exclamation); this.usuario.Focus();

} if (this.contrasena.Text == "") { MessageBox.Show("No inserto la Contraseña", "Datos en blanco", MessageBoxButtons.OK, MessageBoxIcon.Exclamation); this.contrasena.Focus(); } if (usuario.Text == "biblioteca" && contrasena.Text == "josesserna") { sCnn = "data source=192.168.1.1; initial catalog=biblioteca; user id=irma; password=mariana"; SqlConnection cnn = new SqlConnection(sCnn); MessageBox.Show("Conexión al Servidor Exitosa", "Conexión", MessageBoxButtons.OK, MessageBoxIcon.Asterisk); Form2 formulariosig = new Form2(); this.Hide(); formulariosig.ShowDialog(this); } else { MessageBox.Show("El Nombre de Usuario o la Contraseña\nNo existen en el Sistema", "Cuenta Usuario", MessageBoxButtons.OK, MessageBoxIcon.Error); } }


}

private void usuario_TextChanged(object sender, EventArgs e) { if (this.usuario.Text == "") { MessageBox.Show("No se contiene datos", "Datos en blanco", MessageBoxButtons.OK, MessageBoxIcon.Exclamation); this.usuario.Focus();



} }

private void dateTimePicker1_ValueChanged(object sender, EventArgs e) {

} }}

private void button1_Click(object sender, EventArgs e) { try { string sql2 = "insert into libro values (" + "'" + isbn.Text + "'," + "'" + titulo.Text + "'," + "'" + smd.Text + "'," + "'" + charola.Text + "'," + "'" + anden.Text + "'," + "'" + edicion.Text + "')"; SqlCommand comando2 = new SqlCommand(sql2, cnn); comando2.ExecuteNonQuery(); MessageBox.Show("El registro fue insertado Exitosamente", "Registro", MessageBoxButtons.OK, MessageBoxIcon.Information); isbn.Text = ""; titulo.Text = ""; smd.Text = ""; charola.Text = ""; anden.Text = ""; edicion.Text = ""; //btnConectar_Click(sender, e); } catch (Exception ex) { MessageBox.Show("Error en el registro\n " + ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error); }



}

string query = "select *,CONVERT (INT,(DATEDIFF (dd,fecha_de_nac, GETDATE())-DATEDIFF (yy, fecha_de_nac, GETDATE()) / 4.25) / 365) FROM beneficiario where ap_paterno='" + textBox1.Text + "' AND ap_materno='" + textBox2.Text + "' AND nombre='" + textBox3.Text + "' OR id_beneficiario='" + textBox4.Text + "'"; comando = new SqlCommand(query, cnn); reader_p = comando.ExecuteReader(); while (reader_p.Read()) { label5.Text = "Nombre: " + Convert.ToString(reader_p[1]) + " " + Convert.ToString(reader_p[2]) + " " + Convert.ToString(reader_p[3]); label6.Text = "Matricula: " + Convert.ToString(reader_p[0]) + " Edad: " + Convert.ToString(reader_p[21]) + " años Sexo: " + Convert.ToString(reader_p[4]); label7.Text = "Teléfono: " + Convert.ToString(reader_p[11]) + " Ocupación: " + Convert.ToString(reader_p[12]); label9.Text = "Calle: " + Convert.ToString(reader_p[8]) + " No. Ext " + Convert.ToString(reader_p[9])+" No. Int "+ Convert.ToString(reader_p[10]); label10.Text = "Población: " + Convert.ToString(reader_p[6]) + " Código Postal: " + Convert.ToString(reader_p[7]); } reader_p.Close();



5. RESULTADOSComo resultado el alumno presenta el avance de su proyecto final.

6. CONCLUSIONESEl alumno realizara las interfaces de su sitio web completo.

7.- BIBLIOGRAFÍA Jesse Liberty & Dan Hurwitz. Programming ASP.NET. Editorial O´reily

José Manuel Alarcón Aguín. Programación Web con Visual Studio y ASP.NET 2.0. Editorial Krasis Press.

http://www.desarrolloweb.com



8.- LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR

FOLIO NOMBRE DEL MATERIAL, EQUIPO O REACTIVO CANT. UNIDAD

1 Programa Visual Studio 2008.

2 Adobre DreamWeaver CS5

3

9.- LISTA DE BIBLIOGRAFÍA REQUERIDA

FOLIO BIBLIOGRAFIA CANT

1 Michael Bowers.Pro CSS and HTML Design Patterns. Editorial Apress

2 Domine HTML Y DHTML 2° edición. José López Quijado. Editorial Alfaomega.

3 PHP 6 AND MYSQL 5. LARRY ULLMAN. Editorial Peachpit Press.

4 Olivier HEURTEL. PHP 5.3 Desarrollar un Sitio Web dinámico e interactivo. Editorial ENI.

5 Jesse Liberty & Dan Hurwitz. Programming ASP.NET. Editorial O´reily

6José Manuel Alarcón Aguín. Programación Web con Visual Studio y ASP.NET 2.0. Editorial Krasis Press.


Estructura de Datos [SCC-0408]Inteligencia artificial [SCB-0416]10.- CONTROL DE CAMBIOS DEL MANUAL DE PRÁCTICAS

DATOS GENERALESFECHA DE

ACTUALIZACION ELABORÓ Y/O ACTUALIZÓ DESCRIPCIÓN DE LA ACTUALIZACIÓN

30/08/2013 LIC. YESENIA PÉREZ REYES


45m

Documents

Transcript of 45m