Cada vez que puedo, me gusta compartir prácticas y técnicas que me han dado resultado. En este caso, en mi función docente.
Se trata de un sencillo sistema que sirve para que los estudiantes envíen archivos a un servidor Web. Es muy recomendable que el servidor funcione en la red local, puesto que si los archivos son «pesados», esto aumentaría enormemente el tráfico a Internet.
Vamos a suponer que tenemos un servidor Web que permite ejecutar php. Cualquier máquina con GNU/Linux puede cumplir este rol, de un modo muy sencillo. (Con otros Sistemas Operativos también, prueben con XAMPP).
Comparto estos scripts con licencia libre (GPL3). Si los usan en algún lado, y pueden citar la fuente, se los agradezco.
Primero, les muestro cómo funciona:
- El estudiante terminó y guardó el trabajo que desea enviar.
- El estudiante abre el navegador Web y escribe la dirección que le indicó el docente
- El estudiante escribe nombre y apellido, y pulsa en «Examinar…», y busca el archivo:
- El estudiante pulsa el botón «Enviar», y verifica que el sistema le comunique que se transfirió exitosamente
- El docente ve el trabajo enviado en una carpeta, del siguiente modo:
Ahora, les explico cómo se hace
Supondremos que la carpeta del servidor Web es /var/www (por lo general es esa).
Entonces, creamos allí una carpeta a la que llamaremos «enviar» (o como más te guste):
sudo mkdir /var/www/enviar
Adentro de la carpeta, enviar, creamos los siguientes archivos:
(para crear los archivos, escribimos el comando: sudo gedit
Luego copiamos y pegamos el contenido en cada archivo, y después, lo guardamos en la carpeta /var/www/enviar con el nombre correspondiente. O bien podés descargar los archivos con el enlace que figura al final del post).
Archivo index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="es-ar"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title>Escuela "NOMBRE DE LA ESCUELA"</title> <link rel="stylesheet" href="estilo.css" type="text/css"> </head><body> <div id="contenedor"> <div id="encabezado"><h1 style="visibility: hidden;">Nombre de la escuela</h1></div> <div id="contenido" style="height: 350px; text-align:center;"> <!-- Hacemos un formulario que permitirá subir archivos, por eso el atributo enctype="multipart/form-data" --> <form name="formulario" method="post" action="guardar.php" enctype="multipart/form-data"> <!-- Limitamos el tamaño máximo de los archivos: --> <input name="MAX_FILE_SIZE" value="15000000000" type="hidden" /> <br /><br /> <label for="nombre">Tu nombre:</label><input name="nombre" type="text" /> <label for="apellido"> Tu apellido:</label><input name="apellido" type="text" /><br /> <br /> Archivo:<br /> <input name="archivo" type="file" /><br /> <input value="Enviar" type="submit" /> </form> </div> </div> </body></html>
Archivo guardar.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Nombre de la escuela</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body style="background-color: rgb(153, 153, 102);text-align:center;">
<div>
<h1>Enviando trabajo</h1>
<?php
$destino = "trabajos/";
/* A continuación, se especifica cómo quedará el nombre del archivo guardado. Si hay algún dato que se prefiere omitir, basta con comentar (agregando dos barras al principio de la línea). Por ejemplo, si no se desea que aparezca la hora, la línea que dice:
$destino.="-". date('H') . "-".date('i');
debería decir:
//$destino.="-". date('H') . "-".date('i');
*/
//Para que aparezca el apellido del estudiante en el nombre de archivo:
$destino.=$_POST['apellido'];
//Para que aparezca el nombre:
$destino.="-" . $_POST['nombre'];
//Para que aparezca la ip de la máquina desde donde se envía:
$destino.="-" . $_SERVER['REMOTE_ADDR'];
//Para que aparezca la fecha:
$destino.="-" . date('m') . "-". date('d');
//Para que aparezca la hora:
$destino.="-". date('H') . "-".date('i');
//Para que aparezca el nombre y extensión original del archivo:
$destino.="-".basename($_FILES['archivo']['name']);
//Guardamos el archivo:
if(move_uploaded_file($_FILES['archivo']['tmp_name'],$destino)) {
echo "<h2>" . $_POST["nombre"] . ": tu trabajo fue recibido correctamente</h2>";}
else {echo "<h2>Error al enviar el trabajo.</h2>";}
?>
</div>
</body>
</html>
Con la intención de que quede más lindo (no tuve éxito), le hice una hoja de estilo:
Archivo estilo.css
* {
margin:0;
padding:0;
}
body {
background-color: #ffffcc;
background-image: url(madera.jpg);
}
#contenedor {
border: 1px solid #ff6600;
margin: 5px auto;
width: 800px;
}
#encabezado {
margin: 0px;
background-image: url(encabezado.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 200px;
}
#contenido {
margin: 0px;
background-color: #ffff99;
}
#contenido h1, #contenido h2 {
text-align: center;
}
Ahora, sólo nos queda crear, dentro de la carpeta «enviar», una carpeta que se llame «trabajos». En esta carpeta se irán guardando los trabajos que los estudiantes vayan enviando.
sudo mkdir /var/www/enviar/trabajos
Le damos a esta carpeta todos los permisos:
sudo chmod 777 /var/www/enviar/trabajos
Listo. Ahora, para poder enviar los trabajos, los estudiantes simplemente deben abrir el navegador Web y escribir: <ip del servidor>/enviar Por ejemplo, si la ip del servidor es 192.168.0.1, deben escribir: 192.168.0.1/enviar
Y allí pueden enviar el trabajo.
Si el servidor tiene ip fija, podemos editar el archivo /etc/hosts de cada una de las máquinas de los estudiantes, y agregar la línea:
192.168.0.1 profe
(suponiendo que la ip fija del servidor es 192.168.0.1). Entonces los chicos podrán enviar sus trabajos ingresando con el navegador Web a la dirección profe/enviar. Obviamente, pueden reemplazar la palabra «profe» por la que prefieran.
En fin, espero que les sirva. Si hay algo que no expliqué correctamente, no duden en preguntar.
Descargar todos los archivos.
Juanse Marquez 
Fernando Pelillo
28/09/2011 at 19:08
Excelente trabajo, compañero. Te felicito y te agradezco por compartir tus conocimientos. Me viene al pelo para mi escuela.
Juan Marquez
28/09/2011 at 19:17
¡Gracias! Me alegro de que sea útil. Yo usé en mi escuela el programa que vos hiciste para lo de la boleta única. Un buen ejemplo de que cuando el conocimiento se comparte, ganamos todos. Un abrazo.
Juan Marcelo Ramirez
29/09/2011 at 11:11
Muy bueno por funcionalidad y explicación. Gracias por compartirlo.
Saludos.
Juan Marquez
29/09/2011 at 14:32
Me alegro de que sea útil. Gracias por leer. Saludos.
Miguel Angel Lezcano
26/03/2013 at 20:26
muy buen aporte…
Juan Marquez
26/03/2013 at 23:08
¡Gracias!