1. GUÍA DE USO DE LABORATORIOS
ESTUDIANTE: Guzmán Gómez Carlos Jossue
SEMESTRE: Tercero
PARALELO: C
CARRERA: Pedagogía de las Ciencias Experimentales Informática
Informe N°14
TEMA:
Formularios.
OBJETIVO:
Estructurar códigos en la creación de formularios mediante el uso de sentencias como Switch Case
e If para realizar la compra de llantas en su diferente clasificación de rines.
RESULTADOS DE APRENDIZAJE
Correcto uso de las herramientas que contiene Visual Studio Code.
Formular montajes de códigos con “Switch Case” e “If”.
Obtener trabajos precisos con diferentes variables en la ejecución de programas.
ACTIVIDADES:
-Crear un archivo nuevo en el desarrollador Visual Studio Code.
-Organizar códigos para permitir la entrada y salida de datos al rellanar un formulario que
corresponde a la compra de llantas.
-Concretar códigos con “Switch Case” y “If”.
DESARROLLO DE CONTENIDOS
1. En primer lugar, abrir el programa Visual Studio Code.
2. 2. En segundo lugar, se creará un nuevo proyecto dando click izquierdo sobre “File” y “New
File”.
3. En tercer lugar, para guardar el archivo creado seleccionamos nuevamente “File” y “Save
As”, para a continuación introducir el correspondiente nombre del trabajo y guardarlo con
formato PHP.
3. 4. Luego en el primer formulario (formuialrio2.php) se estructura el texto que será el registro
correspondiente de los datos del comprador y los tipos de rines con los precios disponibles
que ofrece la página web. Con el siguiente código:
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inscripciones</title>
<link rel="stylesheet" href="style3.css">
<form action="enviar.php" method="post">
</head>
<body >
<center><h1>Formulario de Compra de Llantas</h1></center>
<hr />
<center>
<div style=" border: ridge #0f0fef 8px;">
<p><h3>Nombres: </h3></p>
<input type="text" name="nom" value="">
<p><h3>Apellidos: </h3></p>
<input type="text" name="nom2" value="">
<h3>Ciudad: </h3><br>
<input type="radio" name="ciu" value="1"> Quito
<input type="radio" name="ciu" value="2"> Guayaquil
<input type="radio" name="ciu" value="3"> Cuenca
<input type="radio" name="ciu" value="4"> Ambato
</div>
<hr />
<center>
<div style=" border: ridge #33FF00 8px;">
<p><h3>Género:</h3></p>
<input type="radio" name="gen" value="1" />Femenino
<input type="radio" name="gen" value="2" />Masculino
<p><h3>Edad: </h3></p><input type="text" name="edad" value="">
<p><h3>Correo electrónico: </h3></p><input type="text" name="corre" value
="">
<p><h3>Número Telefónico: </h3></p><input type="text" name="nute"
value="">
<p><h3>Dirección: </h3></p><input type="text" name="dire" value="">
</div></center>
</center>
</center>
</div>
<hr />
<center>
<div style=" border: ridge #FFFF00 8px;">
4. <p><h3>Tipos de llantas: </h3></p><br>
<input type="checkbox" name="idi" value="1"> RIN 10 <br>
<input type="checkbox" name="idi" value="2"> RIN 11<br>
<input type="checkbox" name="idi" value="3"> RIN 12 <br>
<input type="checkbox" name="idi" value="4"> RIN 13 <br>
<input type="checkbox" name="idi" value="5"> RIN 14 <br>
<input type="checkbox" name="idi" value="6"> RIN 15 <br>
<h3>Precios: </h3><br>
<select name="select">
<option> 80 </option>
<option> 100</option>
<option> 200</option>
</select></center>
</div><hr />
<center>
<div style=" border: ridge #00FFFF 8px;">
<h3>Comentario:</h3> <br/>
<textarea name="comentario" rows="5" cols="50">Comentario: Gracias por su compra!
</textarea>
</div>
<hr />
<input type="submit" name="Enviar" />
<input type="reset" name="Limpiar" />
</body>
</html>
5. Después en un nuevo formulario (enviar.php) se organiza la información que será impresa
por pantalla realizando el diseño respectivo en color, espacio, letra, imágenes y el
recordatorio de espacios sin rellenar o errores en el registro de datos. Así:
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style3.css">
<title>Inscrito</title>
</head>
<body >
<center><h1>Compra de llantas para autos </h1></center><br />
<hr />
<div style=" border: ridge #0f0fef 8px;">
<?php
if(!empty($_POST['nom']))
{
$n=$_POST['nom'];
}
else {
echo "<p>Por favor Ingrese sus Nombres</p>";
5. }
if(!empty($_POST['nom2']))
{
$n1=$_POST['nom2'];
echo "<p>Su nombre completo es:</p>".$n." ".$n1;
}
else {
echo "<p>Por favor Ingrese sus Apellidos</p>";
}
if(!empty($_POST['ciu']))
{
$c=$_POST['ciu'];
switch ($c)
{
case 1: echo "<p>Su ciudad es:</p>QUITO";
break;
case 2: echo "<p>Su ciudad es:</p> GUAYAQUIL";
break;
case 3: echo "<p>Su ciudad es: </p>CUENCA";
break;
case 4: echo "<p>Su ciudad es: </p>AMBATO";
break;
}
}
else {
echo "<p>No ha selecionado una ciudad</p>";
}
?>
</div>
</hr>
<div style=" border: ridge #33FF00 8px;">
<?php
if (!empty ($_POST['gen']))
{
$g=$_POST['gen'];
switch ($g)
{
case 1: echo "<p>Genéro:</p>Femenino";
break;
case 2: echo "<p>Género:</p>Masculino";
break;
}
}
else
{
echo "<p>No ha selecionado un Género</p>";
}
$e=$_POST['edad'];
if (!is_numeric($e))
6. {
echo "<p>Debe ingresar Números en el casillero edad</p>";
}
else
{
if ($e>=100 or $e<=0)
{
echo "Edad no permitida";
}
else
{
echo"<p>Su edad es:</p>".$e;
}
}
if (!empty($_POST['corre']))
{
$c2=$_POST['corre'];
echo "<p> Su correo es:</p>".$c2;
}
else
{
echo "<p>NO ha ingresado un correo electronico</p>".br;
}
if(!empty($_POST['nute']))
{
$nt=$_POST['nute'];
echo "<p>Su numero es:</p>".$nt;
}
else
{
echo "<p>Debe ingresar Números en el casillero Numero Telefonico</P>";
}
if (!empty($_POST['dire']))
{
$di=$_POST['dire'];
echo "<p> Su direccion es: </p>".$di;
}
else
{
echo "<p>Casillero Direccion vacio</p>";
}
?>
</div><hr />
<div style=" border: ridge #FFFF00 8px;">
<?php
if(!empty($_POST['idi']))
{
$idi=$_POST['idi'];
if ($idi==1)
{
echo "<p>RIN:</p>10";
8. </html>
6. A continuación, se procede a la descarga de imágenes con el respectivo nombre declarado
en el paso anterior. Es fundamental guardar todos los archivos en una sola carpeta
determinada, almacenar las imágenes con formato “jpg” y finalmente arrastrar las
diferentes ilustraciones al Visual Studio Code.
7. Por consiguiente, se introduce el uso del formato “style3” con formato “css” que es el
encargo de indicar la información de estilo, con el siguiente código:
body {
background-image:url(dos.jpg);
background-size:100vw 100vh;
background-attachment:fixed;
margin:0;
}
div {
width:600px;
margin:auto;
background: rgb(236, 220, 232);
padding:10px 20px;
box-sizing: border-box;
margin-top:20px;
border-radius:7px;
}
h1{
color:#ffffff;
}
}
h3{
color:#08288a;
}
h2{
color:#0b0b94;
}
p
{
font-size:24px;
color:#0c0c8a;
}
9. 8. Y se guarda por medio de un “Save” la información ingresada.
9. Ingresar en la página web de preferencia con el enlace “http://127.0.0.1“ junto al nombre
de la carpeta o espacio en el que se guardó el archivo, en este caso “/carpeta”.
Posteriormente se selecciona el nombre del documento (formulario2) para visualizar por
pantalla los códigos ingresados.
10. 10. Por último, al ejecutar el programa se obtiene los siguientes resultados:
a. En página principal se observa el correspondiente registro de datos en cuanto al
comprador interesado. También se mostrará la elección de llanta en precio y diseño
que se ofrece como empresa.
b. En la segunda parte del formulario ya rellenado, se podrá visualizar la información
ingresa para corroborar la compra realizada y observar el respectivo precio e
ilustración del rin seleccionado.
a)
11. b)
BIBLIOGRAFÍA:
• Tira, C. (2020). Explicación y uso de SWITCH (ejemplos en Visual Studio MacOS). .
https://www.tiracodigo.com/index.php/programacion/c-visual-studio-mac/explicacion-y-uso-
de-switch-ejemplos-en-visual-studio-macos
• Ponce, L. A. A. (2018, 11 octubre). Estructuras de decisión: If Then y Select Case - Visual Basic
paso a paso. AulaFácil. https://www.aulafacil.com/cursos/programacion/visual-basic-paso-a-
paso/estructuras-de-decision-if-then-y-select-case-l42171