Scribd
Cargar
157 vistas14 páginas

Semana 5 Programacion Web II

El documento presenta las actividades de la semana 5 de Programación Web II. La primera actividad consiste en crear un formulario HTML para ingresar datos de un auto. La segunda actividad agrega validación con JavaScript para campos obligatorios. La tercera actividad captura los datos del formulario en PHP usando la clase objeto Auto creada para mostrar los valores ingresados.

Cargado por

leonel
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
157 vistas14 páginas

Semana 5 Programacion Web II

El documento presenta las actividades de la semana 5 de Programación Web II. La primera actividad consiste en crear un formulario HTML para ingresar datos de un auto. La segunda actividad agrega validación con JavaScript para campos obligatorios. La tercera actividad captura los datos del formulario en PHP usando la clase objeto Auto creada para mostrar los valores ingresados.

Cargado por

leonel
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 14

PROGRAMACIÓN WEB II

SEMANA 5

Edison Castro Lecaros


11 de julio de 2022
Técnico Nivel Superior en Informática
DESARROLLO
1. Cree un formulario HTML para ingresar los datos básicos de las características de un auto, tales
como: matrícula, serial del motor, serial de la carrocería, marca, modelo, año, color y precio. (2 puntos).

Respuesta: para este caso, crear un formulario, utilice la etiqueta form, con el name formulario, lo
importante es “action =dato.php” y “method= POST” ya que nos servirán para enviar nuestro formulario a
php. Se crearon input de tipo text y number, un size de 30 para todos los input. Además se inserta un
“placeholder” para indicar al usuario que debe agregar en ese campo. Finalmente un “b” para dar negria a
características.
Así se visualiza el formulario.

2. Para el formulario HTML creado en el punto anterior, escriba el código JavaScript correspondiente
para validar, que permita ingresar como mínimo 6 caracteres en el campo para la matrícula y como
mínimo 4 caracteres o dígitos para el año. (2 puntos).

Respuesta: para este punto, en el caso de matrícula y año, se agrega un onkeyup=validar(this) y un data-
lengthMin de 6 y 4 respectivamente y un requerid, de esta forma se obliga al usuario a completar el
formulario para avanzar.
También se deja una imagen del código JavaScript “app.js”, para validar los datos, el cual fue agregado al
final en un Script.

Así se visualiza en pantalla el formulario con los o campos obligatorios

Así aparece el mensaje para ingresar los caracteres solicitados.


3. Escriba el código PHP necesario para capturar o extraer los datos enviados desde el formulario HTML
creado en el punto 1 usando la variable global predefinida $_POST, dichos valores deben ser asignados
o seteados mediante sus correspondientes métodos set a los atributos de un objeto de tipo Auto (Clase
Auto creada por usted), para luego visualizar sus valores utilizando sus correspondientes métodos get.
(5 puntos).
Respuesta: para este punto, lo primero es crear el archivo “dato.php” donde se recibirán los datos del
formulario una ves completado.

Luego creamos la class vehiculo y declare sus atributos y utilice una función set para cada atributo de la
clase vehículo.
Aquí se creo el objeto vehículo.

Asi se visualiza en pantalla php.

Datos ingresados en el formulario

Para esta tercera actividad, fue fundamental el contenido de la semana, para ello revise una y otra vez.
Código index.html

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css">

<title>Formulario actividad 1, Programacion Web II</title>

</head>

<body>

<br>

<form name="Formulario" action="dato.php" method="POST">

<table border='2' align='center'>

<caption><b>Datos del vehiculo</b></caption>

<tr>

<td><b>Matricula:</b></td>

<td><input type="text" name="Matricula" size="30" onkeyup=validar(this); data-lengthMin="6"

placeholder='Ingrese minimo 6 caracteres' value="" required></td>

</tr>

<tr>

<td><b>Serial del motor:</b></td>

<td><input type="text" name="Serial del motor" size="30" value=""></td>

</tr>

<tr>

<td><b>Serial de la carrocería:</b></td>

<td><input type="text" name="Serial de la carrocería" size="30" value=""></td>

</tr>

<tr>
<td><b>Marca:</b></td>

<td><input type="text" name="Marca" size="30" value=""></td>

</tr>

<tr>

<td><b>Modelo:</b></td>

<td><input type="text" name="Modelo" size="30" value=""></td>

</tr>

<tr>

<td><b>Año:</b></td>

<td><input type="number" name="Año" size="30" onkeyup=validar(this); data-lengthMin="2"

placeholder='Ingrese minimo 2 caracteres' value="" required></td>

</tr>

<tr>

<td><b>Color:</b></td>

<td><input type="text" name="Color" size="30" value=""></td>

</tr>

<tr>

<td><b>Precio:</b></td>

<td><input type="number" name="Precio" size="30" value=""></td>

</tr>

<tr>

<td align="center"><input type="submit" name="ingresar" value="Ingresar"></td>

<td align="center"><input type="reset" name="cancelar" value="Cancelar"></td>

</tr>

</table>

</form>

<script src="app.js"></script>

</body>

</html>
Código style.css

input[type=submit]{

display: block;

background-color: cornflowerblue;

input[type=reset]{

background-color: darksalmon;

Código app.js

function validar(element) {

const min = parseInt(element.dataset.lengthmin);

if (element.value.length >= min) {

element.classList.remove("borderRed");

return true;

} else {

alert("Ingresar el minimo de caracteres solicitados");

element.classList.add("borderRed");

return false;

function validarFormulario(formulario) {

let result = true;

const input = formulario.querySelectorAll("input[type=text]");

for (i of input) {

if (validar(i) == false) {

result = false;

}
}

return result;

Código dato.php

<?php

class Vehiculo { //Aqui creo la clase vehiculo, con sus atributos.

private $Matricula;

private $Serial_del_motor;

private $Serial_de_la_carrocería;

private $Marca;

private $Modelo;

private $Año;

private $Color;

private $Precio;

public function setMatricula($Matricula) {

$this->Matricula = $Matricula;

public function getMatricula(){

return $this->Matricula;

public function setSerial_del_motor($Serial_del_motor){

$this->Serial_del_motor = $Serial_del_motor;

public function getSerial_del_motor(){

return $this->Serial_del_motor;

public function setSerial_de_la_carrocería($Serial_de_la_carrocería){

$this->Serial_de_la_carrocería = $Serial_de_la_carrocería;
}

public function getSerial_de_la_carrocería(){

return $this->Serial_de_la_carrocería;

public function setMarca($Marca){

$this->Marca = $Marca;

public function getMarca(){

return $this->Marca;

public function setModelo($Modelo){

$this->Modelo = $Modelo;

public function getModelo(){

return $this->Modelo;

public function setAño($Año){

$this->Año = $Año;

public function getAño(){

return $this->Año;

public function setColor($Color){

$this->Color = $Color;

public function getColor(){

return $this->Color;

public function setPrecio($Precio){


$this->Precio = $Precio;

public function getPrecio(){

return $this->Precio;

$Matricula = $_POST['Matricula'];

$Serial_del_motor = $_POST['Serial_del_motor'];

$Serial_de_la_carrocería = $_POST['Serial_de_la_carrocería'];

$Marca = $_POST['Marca'];

$Modelo = $_POST['Modelo'];

$Año = $_POST['Año'];

$Color = $_POST['Color'];

$Precio = $_POST['Precio'];

$objetoVehiculo = new Vehiculo();

$objetoVehiculo->setMatricula($Matricula);

$objetoVehiculo->setSerial_del_motor($Serial_del_motor);

$objetoVehiculo->setSerial_de_la_carrocería($Serial_de_la_carrocería);

$objetoVehiculo->setMarca($Marca);

$objetoVehiculo->setModelo($Modelo);

$objetoVehiculo->setAño($Año);

$objetoVehiculo->setColor($Color);

$objetoVehiculo->setPrecio($Precio);
echo "<br>";

echo "<h2>Datos del vehiculo</h2>";

echo "Matricula: " . $objetoVehiculo->getMatricula() . "<br/>";

echo "Serial del motor: " . $objetoVehiculo->getSerial_del_motor() . "<br/>";

echo "Serial de la carroceria: " . $objetoVehiculo->getSerial_de_la_carrocería() . "<br/>";

echo "Marca: " . $objetoVehiculo->getMarca() . "<br/>";

echo "Modelo: " . $objetoVehiculo->getModelo() . "<br/>";

echo "Año: " . $objetoVehiculo->getAño() . "<br/>";

echo "Color: " . $objetoVehiculo->getColor() . "<br/>";

echo "Precio: " . $objetoVehiculo->getPrecio() . "<br/>";

echo "<a href='index.html'>Regresar al formulario</a>"; //este "a href" nos regresa al formulario, de esta
manera actualizamos nuestro formulario.

Código style.css

input[type=submit]{

display: block;

background-color: cornflowerblue;

input[type=reset]{

background-color: darksalmon;

}
REFERENCIAS BIBLIOGRÁFICAS
Programación Web II SEMANA 5 PHP, MYSQL

Enviar y Recibir datos con GET y POST - Curso de PHP


https://www.youtube.com/watch?v=ZKJESVm5otA

También podría gustarte