M2 - Programación Aplicaciones Web
M2 - Programación Aplicaciones Web
Área: NEGOCIOS
Introducción ......................................................................................................................................................... 1
1. Introducción a PHP ........................................................................................................................................... 2
1.1. Variables ..................................................................................................................................................................... 5
1.2. Estructuras de control IF ............................................................................................................................................. 6
1.3. Ciclos ........................................................................................................................................................................... 7
1.3.1. Ciclo While ........................................................................................................................................................... 7
1.3.2. Ciclo For ............................................................................................................................................................... 8
2. Formularios ....................................................................................................................................................... 9
2.1. Post y Get .................................................................................................................................................................... 9
2.2. Demostración práctica. ............................................................................................................................................. 11
3. Validaciones .................................................................................................................................................... 13
4. Crear un formulario en Visual Studio ............................................................................................................. 16
Cierre .................................................................................................................................................................. 28
Bibliografía .......................................................................................................................................................... 29
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB
Creación de
Introducción
Formularios Validaciones formularios
PHP
Visual Studio
Ciclo While
Ciclo For
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 1
Introducción
Los sistemas web son un conjunto de páginas automatizadas las cuales pueden realizar acciones, desde
mostrar información un foro hasta la creación de un video juego interactivo.
Un sistema web se caracteriza por tener una programación bajo la interface de un usuario y en un servidor,
esto es popularmente conocido como el Backend y la interface que es mostrada hacia el usuario, html y css,
lo cual fue visto en el módulo anterior también conocido como el Frontend.
Como ya vimos en la primera unidad la instalación de PHP es muy sencilla mediante XAMPP. Ahora
comenzaremos en los primeros pasos de programación web en PHP.
En PHP siempre se tiene que iniciar con un <?php, posterior a esto van los comandos o las líneas de código
que se están programando en nuestro archivo y deben finalizar con un pregunta mayor ?>.
Ahora realizaremos el ejemplo de “Hola Mundo IPP”. Abrimos nuestro editor de textos favorito y creamos un
texto básico de HTML como lo vimos en la primera unidad.
EJEMPLO
<html>
<head>
<title>estructura html </title>
</head>
<body>
</body>
</html>
El código mostrado anteriormente es un simple código HTML no tiene programación en PHP, vamos a dar
inicio a esta etapa. En el body vamos agregar hola mundo, para esto se debe saber que para imprimir un
mensaje en HTML desde PHP se ocupa el comando echo, este comando es lo mismo que un print en Python.
EJEMPLO
<html>
<head>
<title>estructura html </title>
</head>
<body>
<?php
echo "Hola Mundo IPP";
?>
</body>
</html>
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 3
Al hacer esto nuestro módulo apache estará funcionando y para comprobarlo entramos a nuestro navegador
y escribimos localhost, veremos lo siguiente:
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 4
Para este ejemplo crearemos una carpeta que se llamara prueba, para no modificar la información que viene
por defecto y guardaremos nuestro código en la carpeta recién creada con el nombre de index.php, es muy
importante este nombre debido a que si le colocamos otro nombre cuando ejecutemos la página web este
deberá ser escrito completo en la url a diferencia del index que solo se tiene que nombrar la carpeta en la
que está.
Lo que realiza este código es sumar dos variables y muestra el resultado por pantalla
Observemos que muestra el resultado que es ocho y aparece pegado al texto. Ahora para que el despliegue
se el más correcto vamos a imprimir un codigo de salto de linea en HTML.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 6
Podemos observar que uno puede imprimir códigos en HTML desde PHP, solamente se deben colocar
entre comillas como si fuera un string
La estructura de if es:
EJEMPLO
if(condicion){
Acción si se cumple la condición;
}
else{
Acción si no se cumple la condición;
}
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 7
1.3. Ciclos
1.3.1. Ciclo While
El primer ciclo que veremos es el ciclo while su sintaxis es:
EJEMPLO
While(condición){
Acción mientras la condición se cumpla
}
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 8
EJEMPLO
For(variable=inicio_variable;condición;condición de aumento){
Acción del for
}
Antes empezar, conoceremos unos conceptos del envió de páginas web, el cual es GET y POST. En GET se
envía la información web de una página a otra mediante la URL, por este motivo es que algunas páginas web
tienen unos links muy extensos, la ventaja que tiene este medio es que si te sales de la página y vuelves a
entrar al mismo link te entregara la información correcta. El segundo es el método POST, el cual envía la
información mediante un paquete, para poder leerlo debes intervenir el paquete de información.
FORMULARIO
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
En este formulario se puede apreciar que se está trabajando con un método POST también que tiene un
texto, un email y un área de mensaje el cual en nuestro navegador web se van a diferenciar con distintos
espacios para ingresar algún tipo de textos, todos los formularios deben contener un botón para la
finalización de este e indicar que esta información se debe ir a la página web indicada en el inicio de este en
action.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 10
Para recibir tendremos otro archivo con extensión punto PHP en esta las variables que contendrán la
información enviada por el formulario pueden tener la siguiente sintaxis $_GET[“nombre_variable”] o
$_POST[“nombre_variable”] ahora realizaremos un ejemplo.
En este ejemplo los dos archivos estarán en la misma carpeta y uno se llamara env_form.php o rec_form.php
<html>
<head>
<title>Envio de datos </title>
</head>
<body>
<form action=”rec_form.php” method=”get”>
Nombre: <input type="text" name="nombre"></input>
Correo: <input type="email" name="email"></input>
Mensaje: <textarea type="text" name="mensaje"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
<?php
$n = $_GET['nombre'];
$c = $_GET['email'];
$m = $_GET['mensaje'];
echo "el nombre es: ".$n;
echo "<br>";
echo "el correo es:" .$c;
echo "<br>";
echo "el mensaje es:".$m;
?>
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 11
1. Abrimos nuestra página web de envió de información, llenamos los datos que se
solicitan y realizaos clic en Submit.
Al realizar esta acción nos percatamos que la información se encuentra en la URL. Ahora realizaremos la
misma acción, pero con Post.
<html>
<head>
<title>Envio de datos </title>
</head>
<body>
<form action=”rec_form.php” method=”get”>
Nombre: <input type="text" name="nombre"></input>
Correo: <input type="email" name="email"></input>
Mensaje: <textarea type="text" name="mensaje"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 12
IMPORTANTE
Nos percatamos que la URL se encuentra limpia sin información, esto es debido que la información por
post es enviada vía el paquete de información.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 13
Este comando es simple, debe estar en un ciclo if y verificar si el $_post está vacío o no.
EJEMPLO
If ( !empty($_post)){
Acción;
}
Lo que estamos haciendo en este ciclo if es preguntar si la variable $_post, NO se encuentra vacía, recuerden
que el ! en un if representa lo contrario o la negatividad a la operación que se está realizando.
<?php
if (!empty($_POST)){
echo "si hay info";
}
else{
echo "no hay info";
}
?>
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 14
¿Qué ocurre si refresco la página rec_post.php desde el mismo navegador? (f5, control + r o cmd + r)
Esto es muy útil cuando tenemos una página con un mensaje de bienvenida dentro de esta misma, incluso se
puede enviar un mensaje post.
EJEMPLO
Si observan lo ocurrido, acá tenemos misma página, pero la información dentro de ella cambia con el solo
hecho de que esta verifica si recibes la información mediante una página post o no.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 16
1. Cuando iniciamos Visual Studio en nuestros computadores lo primero que veremos será la siguiente
pantalla
Esta pantalla podría variar dependiendo de los paquetes que tengamos instalados.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 17
Le agregamos el nombre que más nos agrade en el ejemplo se llamará prueba_ipp y realizamos clic en
Aceptar.
EJEMPLO
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Prueba ipp</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Nombre:
<asp:TextBox ID="text_nombre" runat="server"></asp:TextBox>
<br />
Apellido:
<asp:TextBox ID="text_apellido" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btn_envio" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 20
Al costado izquierdo de la pantalla existe un cuadro de herramientas (en algunos casos no aparece cuando
recién está instalado Visual Studio, se puede mostrar con ver → Cuadro de herramientas), ahí en estándar
nos mostrará algunos atributos que tiene como imágenes, tablas, botones etc. Lo único que tenemos que
realizar en este caso es solo hacer clic y arrastrar.
Esta es una de las ventajas que tiene Visual Studio (lo único negativo es que solo funciona de esta manera, en
windows, si estamos programando en OSX o Linux todo es por comando).
Ahora ejecutaremos nuestra aplicación, para ver como se ve en un navegador, en la barra superior cerca del
centro de esta se encuentra un botón play verde, este botón ejecuta nuestra página. Por lo general está
configurado por defecto para ser utilizado en Microsoft Edge, pero al hacer clic en la flecha veremos más
opciones de navegadores.
Si vamos a Visual Studio mientras se muestra la página web veremos que nos muestra un diagnóstico del uso
de memoria de proceso y el evento que está generando nuestra página web.
En este momento dejamos de ejecutar nuestra página web y creamos una nueva que se llame rec_info.apsx,
al igual que la vez anterior seguimos el procedimiento, Archivo→ Nuevo → Archivo y luego Archivo y
seleccionamos Formulario Web Forms (Visual C#).
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
Hola Mundo IPP
</body>
</html>
Volvemos a nuestra página anterior que se llama default.aspx y modificamos el form en Diseño.
Realizamos doble clic sobre el button y se nos abrirá una página de codificación en C#, que tiene el mismo
nombre de la página con extensión .cs
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 24
Escribiendo lo siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
La función Response.Redirect, sirve para cambiar de una página web a otra. En ella envía a la url que está
dentro de los paréntesis, nosotros en este caso generamos un archivo get, con el orden de
?atributo1=valor1&atributo2=valor2.
Ahora ejecutamos.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 25
Listo otra página fue abierta y en la url va la información de nuestra página anterior.
Modificamos la nueva página web para obtener esta información y agregamos desde el cuadro de
herramientas dos Label.
En propiedades del label que se encuentra en mi caso (configuración por defecto), está en la esquina inferior
izquierda.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 26
Realizamos clic derecho sobre cualquier parte de nuestra página y elegimos la opción de ver código.
Ahora nos abrirá el código C# de nuestra página rec_info.aspx, ésta por defecto tendrá una función, la cual es
Page_Load, que son las cosas que la página realiza al momento de cargarse.
Dentro de esta función realizaremos que nuestros label se cambien por la información que se envía por get
desde la otra página.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 27
EJEMPLO
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
Donde Request.QueryString obtiene la información que enviamos por parámetro que en este caso fue
nombre y apellido.
Volvemos a ejecutar nuestro código, y vemos que ocurre con los mismos parámetros anteriores.
Finalmente con esto tenemos nuestro primer envió de información GET en .Net.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB Pág. 28
Este será el primer paso para este gigantesco mundo de programación web, desde ahora contamos con un
primer alcance para empezar a ser freelance en el mundo de la programación.
APORTE A TU FORMACIÓN
El mercado laboral para un Programador web (Desarrollador Web), tiene muy alta demanda tanto para
trabajadores dependientes de una empresa o bien como freelance. Cuando entramos en cualquier portal de trabajo
y buscamos “desarrollador web”, nos encontramos con muchas empresas que buscan algún programador web, es
por eso que los contenidos vistos en el módulo deben ser adquiridos de la mejor forma y estudiados en detalle pues
existen millones de profesionales en chile y el mundo, dedicados 100% a este tipo de lenguajes y es de mucha
importancia aprender bien cada concepto.
Área: NEGOCIOS M2
Curso: PROGRAMACIÓN DE APLICACIONES WEB
Obligatoria
Ceballos, S. F. J. (2012). Enciclopedia de Microsoft Visual C#: interfaces gráficas y aplicaciones para Internet
con Windows Forms y ASP.NET. (4a. ed.). Madrid, ES: RA-MA Editorial. Pp. 4- 21.
Vaswani, V. (2010). Fundamentos de PHP. México, D.F., MX: McGraw-Hill Interamericana. Pp. 7-11, 22-25, 50,
59-62.
Complementaria
Río, M. Á. D. (2012). Manual php 6.0: formación para el empleo. Módulo 1 tema 2. Pp. 27-31.
SABER MÁS
Siempre es bueno guiarse por la documentación oficial cuando tienen dudas de cómo realizar una
acción, pero el aprender desde cero, en este tipo de páginas no es muy recomendado. Luego de estudiar
este módulo, puedes apoyarte en este manual.