Skip to main content.

Tareas

Las tareas deben utilizar el layout definido en la tarea 1, por simplicidad esto se omite, así el código resulta más reducido.

Las soluciones planteadas son válidas, sin embargo pueden existir otras soluciones correctas que realicen lo solicitado.

Tarea 1: layout

Diseñar una layout (hint: utilizar el ejemplo de la clase de CSS).

Probar solución.

Tarea 2: GET con jQuery

Crear dos enlaces que llamen a una función que cargue mediante Ajax la página solicitada por el menú (hint: utilizar $.ajax()).

Probar solución.

historia.html
<h1>Historia</h1>
<p>Texto de la historia...</p>
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
		<script type="text/javascript" src="js.js"></script>
		<title>Tarea 1: GET con JQuery</title>
	</head>
	<body>
		<div id="page">
			<div id="nav">
				<a href="#" onclick="loadPage('inicio.html', 'content')">Inicio</a>
				<a href="#" onclick="loadPage('historia.html', 'content')">Historia</a>
			</div>
			<div id="content">
			</div>
		</div>
	</body>
</html>
inicio.html
<h1>Inicio</h1>
<p>Texto del inicio...</p>
js.js
function loadPage(url, id) {
	// obtener página
	var page;
	$.ajax({
		type: 'GET',
		url: url,
		success: function (result) {page = result;},
		async: false
	});
	// colocar página en el contenedor
	$('#'+id).html(page);
}

Tarea 3: dibujar tabla

A partir de un arreglo en PHP dibujar una tabla (hint: iterar con foreach).

Probar solución.

index.php
<?php

// El arreglo (incluye títulos de columnas)
$table = array(
	array('Titulo de columna 1', 'Titulo de columna 2'),
	array('Dato columna 1', 'Dato columna 2'),
	array(1, 2),
	array('A', 'B'),
);

/**
 * Función para dibujar una tabla con el contenido de un arreglo
 */
function table_draw ($table = array()) {
	// Utilizar buffer para el dibujado, así lo retornaremos en vez de
	// imprimir directamente
	$buffer = '';
	// Iniciar tabla
	$buffer .= '<table>'."\n";
	// Definir títulos de columnas
	$buffer .= '<thead>'."\n";
	$titles = array_shift($table);
	$buffer .= '<tr>'."\n";
	foreach($titles as &$col) {
		$buffer .= '<th>'.$col.'</th>'."\n";
	}
	$buffer .= '</tr>'."\n";
	$buffer .= '</thead>'."\n";
	// Definir datos de la tabla
	$buffer .= '<tbody>'."\n";
	foreach($table as &$row) {
		$buffer .= '<tr>'."\n";
		foreach($row as &$col) {
			$buffer .= '<td>'.$col.'</td>'."\n";
		}
		$buffer .= '</tr>'."\n";
	}
	$buffer .= '</tbody>'."\n";
	// Finalizar tabla
	$buffer .= '</table>'."\n";
	// Retornar tabla en HTML
	return $buffer;
}

// Llamar a la función
echo table_draw($table);

Tarea 4: include_get

Utilizando include y GET cargar diferentes páginas dentro del layout (hint: dividir el layout en 2 páginas).

Probar solución.

historia.html
<h1>Historia</h1>
<p>Texto de la historia...</p>
index.php
<?php

// Incluir layout (parte 1)
include 'layout1.html';

// Dependiendo que se solicite, cargar la página
if(isset($_GET['inicio'])) include 'inicio.html';
else if(isset($_GET['historia'])) include 'historia.html';

// Incluir layout (parte 2)
include 'layout2.html';

?>
inicio.html
<h1>Inicio</h1>
<p>Texto del inicio...</p>
layout1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Tarea 4: include y GET</title>
	</head>
	<body>
		<div id="page">
			<div id="nav">
				<a href="?inicio">Inicio</a>
				<a href="?historia">Historia</a>
			</div>
			<div id="content">
layout2.html
			</div>
		</div>
	</body>
</html>

Tarea 5: usuarios

A partir del archivo que se encuentra en /etc/passwd (o el adjunto) generar una tabla con los datos de los usuarios, omitir el campo 2 (hint: utilizar file_get_contents, explode y función table_draw creada antes).

Probar solución.

index.php
<?php

// Obtener usuarios
$file = file_get_contents('passwd');
$lines = explode("\n", $file);
$users = array();
foreach($lines as &$line) {
	$fields = explode(':', $line);
	if(isset($fields[6])) {
		$users[] = array(
			$fields[0],
			$fields[2],
			posix_getgrgid($fields[3])['name'],
			$fields[4],
			$fields[5],
			$fields[6],
		);
	}
}

// Agregar títulos de la tabla
array_unshift($users, array('user', 'uid', 'group', 'gecos', 'home', 'shell'));

// Dibujar tabla con usuarios
echo table_draw($users);

/**
 * Función para dibujar una tabla con el contenido de un arreglo
 */
function table_draw ($table = array()) {
	// Utilizar buffer para el dibujado, así lo retornaremos en vez de
	// imprimir directamente
	$buffer = '';
	// Iniciar tabla
	$buffer .= '<table>'."\n";
	// Definir títulos de columnas
	$buffer .= '<thead>'."\n";
	$titles = array_shift($table);
	$buffer .= '<tr>'."\n";
	foreach($titles as &$col) {
		$buffer .= '<th>'.$col.'</th>'."\n";
	}
	$buffer .= '</tr>'."\n";
	$buffer .= '</thead>'."\n";
	// Definir datos de la tabla
	$buffer .= '<tbody>'."\n";
	foreach($table as &$row) {
		$buffer .= '<tr>'."\n";
		foreach($row as &$col) {
			$buffer .= '<td>'.$col.'</td>'."\n";
		}
		$buffer .= '</tr>'."\n";
	}
	$buffer .= '</tbody>'."\n";
	// Finalizar tabla
	$buffer .= '</table>'."\n";
	// Retornar tabla en HTML
	return $buffer;
}
passwd
root:x:0:0:root:/root:/bin/bash
daemon:x:1:1:daemon:/usr/sbin:/bin/sh
bin:x:2:2:bin:/bin:/bin/sh
sys:x:3:3:sys:/dev:/bin/sh
sync:x:4:65534:sync:/bin:/bin/sync
games:x:5:60:games:/usr/games:/bin/sh
man:x:6:12:man:/var/cache/man:/bin/sh
lp:x:7:7:lp:/var/spool/lpd:/bin/sh
mail:x:8:8:mail:/var/mail:/bin/sh
news:x:9:9:news:/var/spool/news:/bin/sh

Tarea 6: entregar imagen

Subir una imagen mediante un formulario y luego la misma imagen enviarla devuelta al usuario (hint: utilizar header, ob_clean y readfile).

Probar solución.

index.php
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
	<input type="file" name="file" />
	<input type="submit" name="submit" value="Enviar" />
</form>

<?php

// solo si se envío el formulario se procesa
if(isset($_POST['submit']) && !$_FILES['file']['error']) {
	// limpiar buffer de salida
	ob_clean();
	// enviar cabeceras
	header('Content-type: '.$_FILES['file']['type']);
	header('Content-disposition: inline; filename='.$_FILES['file']['name']); // lo muestra en el navegador (si este lo soporta)
	// header('Content-disposition: attachement; filename='.$_FILES['file']['name']); // fuerza descarga
	// enviar archivo
	readfile($_FILES['file']['tmp_name']);
}

Tarea 7: validar formulario

Validar en un formulario que: 1) se haya seleccionado un radio, 2) se haya seleccionado el checkbox, 3) se hayan seleccionado "n" checkboxes (hint: utilizar ejemplo entregado con jQuery)

Probar solución.

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
		<script type="text/javascript" src="js.js"></script>
		<title>Tarea 7: validación de formularios</title>
	</head>
	<body>
		<div id="page">

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validarFormulario(this);" id="formulario">
	<div>
		<div class="label"><label for="radio">radio</label></div>
		<div class="field">
			<input type="radio" name="radio" value="r1" id="radio" /> Radio 1
			<input type="radio" name="radio" value="r2" /> Radio 2
			<input type="radio" name="radio" value="r3" /> Radio 3
		</div>
	</div>
	<div>
		<div class="label"><label for="checkbox">checkbox</label></div>
		<div class="field"><input type="checkbox" name="checkbox" id="checkbox" /> Checkbox</div>
	</div>
	<div>
		<div class="label"><label for="checkboxes">checkboxes</label></div>
		<div class="field">
			<input type="checkbox" name="checkboxes[]" value="c1" id="checkboxes" /> Checkbox 1
			<input type="checkbox" name="checkboxes[]" value="c2" /> Checkbox 2
			<input type="checkbox" name="checkboxes[]" value="c3" /> Checkbox 3
		</div>
	</div>
	<div>
		<div class="field"><input type="submit" name="submit" value="Enviar" /></div>
	</div>
</form>
<?php

echo '<pre>';
print_r($_POST);
echo '</pre>';

?>

		</div>
	</body>
</html>
js.js
/**
 * Validador de formulario Tarea 7
 * @author DeLaF, esteban[at]delaf.cl
 * @version 2012-09-08
 */
function validarFormulario () {
	var status = true;
	// verificar que se haya seleccionado uno de los radios
	if(!validateRadios('input[name="radio"]')) {
		alert('Debe marcar un radio');
		status = false;
	}
	// verificar que se haya seleccionado el checkbox
	if($('input[name="checkbox"]').attr('checked')!='checked') {
		alert('Debe marcar el checkbox');
		status = false;
	}
	// verificar que se hayan seleccionado n checkboxes
	var n = 2;
	if(!validateCheckboxes('input[name="checkboxes[]"]', n)) {
		alert('Debe marcar '+n+' checkboxes');
		status = false;
	}
	// retornar estado
	return status;
}

/**
 * Valida que se hayan marcado n checkboxs de un listado
 * @author DeLaF, esteban[at]delaf.cl
 * @version 2012-09-08
 */
function validateCheckboxes (selector, n) {
	var checked = 0;
	$.each($(selector), function(key, field) {
		if($(field).attr('checked')=='checked')
			checked++;
	});
	return checked == n ? true : false;
}

/**
 * Valida que se haya seleccionado un radio
 * @author DeLaF, esteban[at]delaf.cl
 * @version 2012-09-08
 */
function validateRadios (selector) {
	var checked = false;
	$.each($(selector), function(key, field) {
		if($(field).attr('checked')=='checked') {
			checked = true;
			return false;
		}
	});
	return checked;
}

Tarea 8: clase para conexión a base de datos

Crear clase para conexión a una base de datos MySQL u Oracle, se deben implementar como mínimo los métodos: __construct, __destruct, getConfig, getId, query, getTable, getRow, getCol, getValue y sanitize (hint: utiliza interfaz DatabaseInterface y archivos vacíos ya creados en los ejemplos).

Última modificación de esta página fue el Miércoles 1 de Octubre del 2014 a las 12:36