En una entrega pasada vimos cómo crear una aplicación web para calcular el IMC de una persona usando Django Framework. Esta vez lo haremos usando Mojolicious, un framework ligero para Perl.
Creando la aplicación web
Requisitos:
- Tener instalado Perl en la última versión.
- Instalar Mojolicious.
¿Qué haremos?
- Crear un solo programa, el cual nombraremos ``imc.pl``.
- Crear la lógica para obtener los datos: nombre, edad, peso y talla.
- Crear la lógica para obtener el IMC (peso / (talla**2)).
- Crear las vistas: formulario y resultado.
Si no tenemos instalado Mojolicious, lo podemos instalar así:
$ cpan
cpan> install Mojolicious
1. Creamos el programa ``imc.pl`` (Linux o Windows).
Linux:
$ touch imc.pl
Windows:
$ start notepad imc.pl
2. Debemos obtener los datos del formulario. Para ello Mojolicious nos permitirá incrustrar código HTML desde el mismo programa Perl ``imc.pl``. Los llamados layaouts.
__DATA__
@@ formulario.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMC Generator</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.form-group { margin-bottom: 15px; }
input[type="text"], input[type="number"] { padding: 10px; width: 200px; }
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
.orange {
color: #ff6200;
}
.green{
color:rgb(13, 207, 55);;
}
</style>
</head>
<body>
<div class="container">
<h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
<form method="POST" action="/">
<div class="form-group">
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="edad">Edad:</label><br>
<input type="number" id="edad" name="edad" required>
</div>
<div class="form-group">
<label for="peso">Peso (kg):</label><br>
<input type="number" step="0.1" id="peso" name="peso" required>
</div>
<div class="form-group">
<label for="talla">Talla (m):</label><br>
<input type="number" step="0.01" id="talla" name="talla" required>
</div>
<button type="submit">Aceptar</button>
</form>
</div>
</body>
</html>
Este será el formulario para la entrada de datos. Ahora crearemos la lógica una vez que obtenemos los datos (nombre, edad, peso y talla).
#!/usr/bin/env perl
use Mojolicious::Lite -signatures;
# Ruta para el formulario (GET)
get '/' => sub ($c) {
$c->render(template => 'formulario');
};
# Ruta para procesar el formulario y mostrar resultados (POST)
post '/' => sub ($c) {
# Obtener datos del formulario
my $nombre = $c->param('nombre');
my $edad = $c->param('edad') || 0;
my $peso = $c->param('peso') || 0;
my $talla = $c->param('talla') || 0;
# Calcular IMC
my $imc = $talla > 0 ? $peso / ($talla * $talla) : 0;
# Diagnóstico y recomendaciones
my ($diagnostico, $recomendaciones);
if ($imc < 18.5) {
$diagnostico = "Peso bajo";
$recomendaciones = "Necesita ayuda médica. Considere aumentar su ingesta calórica.";
} elsif ($imc >= 18.5 && $imc <= 24.9) {
$diagnostico = "Peso normal";
$recomendaciones = "No necesita ayuda médica. Solo necesita seguir alimentándose bien y hacer ejercicio.";
} elsif ($imc >= 25 && $imc <= 29.9) {
$diagnostico = "Sobrepeso";
$recomendaciones = "Necesita ayuda médica. Considere una dieta balanceada y ejercicio regular.";
} else {
$diagnostico = "Obesidad";
$recomendaciones = "Necesita ayuda médica urgente. Consulte a un especialista.";
}
# Calcular peso ideal y talla ideal (IMC ideal = 22)
my $imc_ideal = 22;
my $peso_ideal = $imc_ideal * ($talla * $talla);
my $talla_ideal = $peso > 0 ? sqrt($peso / $imc_ideal) : 0;
# Renderizar la página de resultados
$c->render(
template => 'resultado',
nombre => $nombre,
edad => $edad,
peso => $peso,
talla => $talla,
imc => sprintf("%.2f", $imc),
diagnostico => $diagnostico,
recomendaciones => $recomendaciones,
peso_ideal => sprintf("%.2f", $peso_ideal),
talla_ideal => sprintf("%.2f", $talla_ideal),
);
};
Por último la página de resultados.
@@ resultado.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resultado IMC</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.result { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
.result h2 { color: #4CAF50; }
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
.orange {
color: #ff6200;
}
.green{
color:rgb(13, 207, 55);;
}
</style>
</head>
<body>
<div class="container">
<h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
<div class="result">
<p><strong>Nombre:</strong> <%= $nombre %></p>
<p><strong>Edad:</strong> <%= $edad %></p>
<p><strong>Peso:</strong> <%= $peso %> kg</p>
<p><strong>Talla:</strong> <%= $talla %> m</p>
<h2>IMC: <%= $imc %></h2>
<p><strong>Diagnóstico:</strong> <%= $diagnostico %></p>
<p><strong>Recomendaciones:</strong> <%= $recomendaciones %></p>
<p><strong>Su peso ideal debe ser:</strong> <%= $peso_ideal %> kg</p>
<p><strong>Su talla ideal debe ser:</strong> <%= $talla_ideal %> m</p>
</div>
<a href="/"><button>Aceptar</button></a>
</div>
</body>
</html>
Código completo:
imc.pl
#!/usr/bin/env perl
use Mojolicious::Lite -signatures;
# Ruta para el formulario (GET)
get '/' => sub ($c) {
$c->render(template => 'formulario');
};
# Ruta para procesar el formulario y mostrar resultados (POST)
post '/' => sub ($c) {
# Obtener datos del formulario
my $nombre = $c->param('nombre');
my $edad = $c->param('edad') || 0;
my $peso = $c->param('peso') || 0;
my $talla = $c->param('talla') || 0;
# Calcular IMC
my $imc = $talla > 0 ? $peso / ($talla * $talla) : 0;
# Diagnóstico y recomendaciones
my ($diagnostico, $recomendaciones);
if ($imc < 18.5) {
$diagnostico = "Peso bajo";
$recomendaciones = "Necesita ayuda médica. Considere aumentar su ingesta calórica.";
} elsif ($imc >= 18.5 && $imc <= 24.9) {
$diagnostico = "Peso normal";
$recomendaciones = "No necesita ayuda médica. Solo necesita seguir alimentándose bien y hacer ejercicio.";
} elsif ($imc >= 25 && $imc <= 29.9) {
$diagnostico = "Sobrepeso";
$recomendaciones = "Necesita ayuda médica. Considere una dieta balanceada y ejercicio regular.";
} else {
$diagnostico = "Obesidad";
$recomendaciones = "Necesita ayuda médica urgente. Consulte a un especialista.";
}
# Calcular peso ideal y talla ideal (IMC ideal = 22)
my $imc_ideal = 22;
my $peso_ideal = $imc_ideal * ($talla * $talla);
my $talla_ideal = $peso > 0 ? sqrt($peso / $imc_ideal) : 0;
# Renderizar la página de resultados
$c->render(
template => 'resultado',
nombre => $nombre,
edad => $edad,
peso => $peso,
talla => $talla,
imc => sprintf("%.2f", $imc),
diagnostico => $diagnostico,
recomendaciones => $recomendaciones,
peso_ideal => sprintf("%.2f", $peso_ideal),
talla_ideal => sprintf("%.2f", $talla_ideal),
);
};
# Iniciar la aplicación
app->start;
__DATA__
@@ formulario.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMC Generator</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.form-group { margin-bottom: 15px; }
input[type="text"], input[type="number"] { padding: 10px; width: 200px; }
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
.orange {
color: #ff6200;
}
.green{
color:rgb(13, 207, 55);;
}
</style>
</head>
<body>
<div class="container">
<h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
<form method="POST" action="/">
<div class="form-group">
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="edad">Edad:</label><br>
<input type="number" id="edad" name="edad" required>
</div>
<div class="form-group">
<label for="peso">Peso (kg):</label><br>
<input type="number" step="0.1" id="peso" name="peso" required>
</div>
<div class="form-group">
<label for="talla">Talla (m):</label><br>
<input type="number" step="0.01" id="talla" name="talla" required>
</div>
<button type="submit">Aceptar</button>
</form>
</div>
</body>
</html>
@@ resultado.html.ep
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resultado IMC</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.result { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
.result h2 { color: #4CAF50; }
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
.orange {
color: #ff6200;
}
.green{
color:rgb(13, 207, 55);;
}
</style>
</head>
<body>
<div class="container">
<h1> <span class ="orange">IMC </span> <span class ="green">Generator</span></h1>
<div class="result">
<p><strong>Nombre:</strong> <%= $nombre %></p>
<p><strong>Edad:</strong> <%= $edad %></p>
<p><strong>Peso:</strong> <%= $peso %> kg</p>
<p><strong>Talla:</strong> <%= $talla %> m</p>
<h2>IMC: <%= $imc %></h2>
<p><strong>Diagnóstico:</strong> <%= $diagnostico %></p>
<p><strong>Recomendaciones:</strong> <%= $recomendaciones %></p>
<p><strong>Su peso ideal debe ser:</strong> <%= $peso_ideal %> kg</p>
<p><strong>Su talla ideal debe ser:</strong> <%= $talla_ideal %> m</p>
</div>
<a href="/"><button>Aceptar</button></a>
</div>
</body>
</html>
Ejecución del programa:
$ morbo imc.pl
Abrimos el navegador en la ruta:
http://127.0.0.1:3000/
¡Con esto habremos habremos creado nuestra aplicación webb con Mojolicious!
La aplicación se verá así:
Introducimos los datos:
Obtenemos los resultados:
Mojolicious nos permite crear aplicaciones web de una manera más sencilla a lo que otros frameworks no.
En esta aplicación hemos visto algunas de sus características, como el permitir incrustrar código HTML (con extensión *html.ep) como en PHP.
Más sobre este framework en próximas entregas.
Enlaces:
https://mojolicious.org/
https://codemonkeyjunior.blogspot.com/2025/04/mojolicious-un-framework-para-perl.html
https://codemonkeyjunior.blogspot.com/2025/04/creando-una-aplicacion-web-para.html
