He estado haciendo un par de pruebas con PHP y quería compartirlas. Aviso desde ya que son cosas muy básicas.
Para montar mi lugar de trabajo he instalado XAMPP, que es una aplicación gratuita que te permite montar en tu máquina un servidor con PHP, MySQL y un montón más de funcionalidades que espero usar :)
Para programar he usado NetBeans, que aunque traga muchos recursos, mi ordenador lo soporta de sobra y me ha gustado el funcionamiento que tiene.
Pues he empezado haciendo un formulario simple a más no poder en HTML para pasarle un número al PHP. Éste PHP se encargará de tomar el número y calcular la tabla de multiplicar del 1 al 10 del mismo número.
Luego probé (con un for) a que imprimiera todas las tablas entre 1 y 20. De ésta forma practicamos tanto la recogida de datos (por medio del método POST) y los bucles y el uso de variables.
Si veis que os sale feo o que hay etiquetas que no conocéis en el HTML, es porque estoy usando Bootstrap. Si queréis saber más sobre ello, preguntad ;)
Aquí el código (demasiado simple) del index.php (también puede ser index.html pero por comodidad les he puesto a todos la misma extensión):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablas de multiplicar</title>
</head>
<body>
<form method="POST" name="tabla" role="form" action="tablas.php" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputNombre">Introduzca un número</label>
<input name="number" type="text" class="form-control" id="numero" placeholder="Escribe un numero">
<button type="submit" class="btn btn-default">Enviar</button>
</div>
</form>
</body>
</html>
La web resultante tendría únicamente un formulario tal que así:
Como veis, la complejidad es nula. Vamos ahora con el "tablas.php":
Como veis, la complejidad es nula. Vamos ahora con el "tablas.php":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablas de multiplicar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Botón para volver atrás -->
<div class="row">
<div class="col-md-12 well"><a href="index.php"><button class="btn btn-default">Atrás</button></a> </div>
</div>
<!-- Tabla del número elegido-->
<table class="table table-hover table-bordered ">
<?php
$num = $_POST["number"];
echo ("<tr>");
// Cabecera
for ($i = 1; $i < 11; $i++) {
echo ("<th>");
echo "$i";
echo ("</th>");
}
echo ("</tr>");
// Resultados
echo ("<tr>");
for ($i = 1; $i < 11; $i++) {
echo ("<td>");
$aux = $num*$i;
echo "$aux";
echo ("</td>");
}
echo ("</tr>");
?>
<!-- Tabla genérica, creada al ejecutar el php -->
</table>
<br><br>
<p class="active">
Ahora una tabla más genérica:
</p>
<br>
<table class="table table-hover table-bordered ">
<?php
echo ("<tr>");
for ($i = 1; $i < 11; $i++) {
echo ("<th>");
echo "$i";
echo ("</th>");
}
echo ("</tr>");
for($j=1; $j<21; $j++) {
for ($i = 1; $i < 11; $i++) {
echo ("<td>");
$aux = $j*$i;
echo "$aux";
echo ("</td>");
}
echo ("</tr>");
}
?>
</table>
</body>
</html>
Espero que no lo veáis demasiado complejo. Si queréis imágenes de cómo queda o tenéis cualquier duda/sugerencia, no dudéis en escribirnos. Estaremos encantados de responderos.
Saludos y hasta otra ;)
No hay comentarios:
Publicar un comentario