DIRECCIÓN GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA INSTITUTO TECNOLÓGICO DE CD. VALLES
MANUAL TÉCNICO
NENEK-ECAD: Esquema Constructor de Acervo Digital (ECAD) en Lenguas
Indígenas
Ingeniería en Sistemas Computacionales
IRVING OSORNIO SALDAÑA 09690485 ROSA NALLELI VIDALES GUERRERO 09690106 JANETH CAROLINA CORONADO CASTRO 09690055
ASESOR INTERNO
ASESOR EXTERNO
M.A.E. DALIA ROSARIO HERNÁNDEZ LÓPEZ Dra. ANUSCHKA JOHANNA VAN’T HOOFT
Índice 1. Introducción ........................................................................................ 1
2. Especificaciones técnicas .................................................................... 2
3. Diccionario de datos............................................................................ 3
4. Instalación de aplicaciones .................................................................. 6
4.1. Instalación de apache 2 ...................................................................... 7
4.2. Instalación de PHP5 ............................................................................ 7
4.3. Instalación de postgresql ..................................................................... 8
4.4. Instalación de swftools ........................................................................ 9
4.5. Instalación de postgresql, apache y php ............................................... 9
5. Configuración de aplicaciones ............................................................ 11
5.1. Configuración de apache 2 ................................................................. 11
5.2. Configuración de postgres .................................................................. 12
6. Funcionamiento de nenek-ECAD ........................................................ 13
6.1. Cambiar un archivo pdf a flash............................................................ 13
6.2. Subir un archivo flash ......................................................................... 14
6.3. Guardar los datos del formulario. ........................................................ 24
6.4. Búsqueda por título de artículo. .......................................................... 26
6.5. Visor para lectura de documento. ........................................................ 39
6.6. Mostrar todos los documentos guardados en la base de datos pdf. ....... 42
1
1. Introducción
El presente manual técnico tiene como finalidad la descripción del diseño
del prototipo nenek-ECAD, el cual se encarga de construir y organizar el acervo
del lenguaje nenek en la plataforma nenek.mx.
En la implementación del código se utilizara las herramientas java script,
postgres, swftools y php, al trabajar con conexiones de base de datos y el
guardado de documentos de extensión .swf (flash).
A continuación se explicara más detalladamente cada parte del código de la
aplicación nenek-ECAD así como su implementación en cada módulo.
2
2. Especificaciones técnicas
Sistema operativo: GNU/Linux Ubuntu 11.04 Natty Narwhal o versiones
superiores.
Gestor de base de datos: Postgresql 8.4.
Lenguajes de programación: php5, html y java script.
Servidor de Aplicaciones: Servidor Web Apache 2.0.
Navegadores web: Google Chrome, Firefox y Safari.
Herramienta complementaria: swftools
3
3. Diccionario de datos
Todos los datos mostrados en la tabla ya se encuentran en implementación
en la página nenek.mx
CAMPO TIPO
TITULO TEXT
AUTOR_ES TEXT
LUGAR TEXT
ANIO TEXT
IDIOMA TEXT
FECHA CHARACTER VARYING(100)
ID_DOC CHARACTER VARYING(100)
EDITORIAL TEXT
PAG TEXT
SWF TEXT
CORPUS TEXT
URL TEXT
Figura 1. Estructura de datos del archivo subido.
4
NOMBRE FUNCIÓN LOCALIZACIÓN TAMAÑO NO. LINEAS
INCLUYE
Buscarporclasificacionpdf.php
Busca los títulos de los archivos en la base de datos
/var/www/nenek 4.1 kb 130 head.php, get_info.php, clasificacion-pdf.php, completa.php, avatarseccion.php, lat_der.php, documents_pdf.php, boton_desp.php, footer.php
clasificacion-pdf.php
Muestra la información del archivo buscado en Buscarporclasificacionpdf.php
/var/www/nenek 2.2 kb 77 dbconnect.php, visor.php
pdfdocs.php Función para subir archivos tipo swf con toda su información
/var/www/nenek 5.7 kb 149 head.php, get_info.php, avatarseccion.php, lat_der.php, save_pdf.php, boton_desp.php, footer.php
save_pdf.php
Se encarga de guardar todo en la base de datos nenek, tabla pdf
/var/www/nenek 1.2 kb 30 get_info.php
documents_pdf.php
Muestra todos los documentos que se encuentra en la tabla pdf
/var/www/nenek 2.9 kb 95 head.php, get_info.php, avatarseccion.php, lat_der.php, boton_desp.php, footer.php
completa.php
Busca coincidencia de palabra con cada titulo
/var/www/nenek .651 kb 35 dbconnect.php
visor.php Muestra el archivo de la tabla pdf flash o .swf en una nueva pestaña
/var/www/nenek 1.5 kb 39 dbconnect.php,
5
casoestudio.php
Muestra el archivo .swf del caso de estudio en una nueva pestaña
/var/www/nenek 0.629 kb 15
scestudio.php
Parte para subir un nuevo caso de estudio y remplazar el anterior
/var/www/nenek 2.1 kb 65 head.php, get_info.php, avatarseccion.php, lat_der.php, boton_desp.php, footer.php
scestudiosave.php
Para guardar el caso de estudio en la carpeta swf
/var/www/nenek 0.590 kb 15 head.php, get_info.php
Figura 2. Descripción de los archivos .php desarrollados.
6
4. Instalación de aplicaciones
Para dar comienzo con la instalación de las aplicaciones es obligatorio
contar con una conexión a internet.
La instalación de las aplicaciones se realiza por medio de terminal y otras
por medio de centro de descargas de Ubuntu. Para abrir una terminal en Ubuntu
se abre menú > aplicaciones > accesorios > terminal. O utilizando combinación de
teclas, presionando; Ctrl + Alt + t. (Figura 3).
Figura 3. Terminal de Linux.
En terminal se procede a entrar como súper usuario con la orden sudo su, y
se pedirá la contraseña (Figura 4).
Figura 4. Entrar como súper usuario.
7
4.1. Instalación de apache 2
La primera aplicación a instalar es apache 2, para esto se utiliza la
instrucción apt-get install apache 2 (Figura 5), pedirá autorización para guardarlo
en el disco se escribe S, se da enter y se espera a que se finalice la descarga.
Figura 5. Instalación de apache.
4.2. Instalación de PHP5
Para instalar php5 se usa la instrucción apt-get install php5 y se presiona
enter (Figura 6), pedirá autorización para guardarlo en el disco se escribe S, se da
enter y se espera a que se finalice la descarga.
Figura 6. Instalación de php5.
8
Para comprobar que la instalación se realizó correctamente el servidor web,
basta con ir al explorador y escribir en la barra de direcciones LOCALHOST, si
todo ha salido bien se mostrara este mensaje figura 7.
Figura 7. Imagen de navegador de correcta instalación de apache server.
4.3. Instalación de postgresql
Para comenzar la instalación del gestor de base de datos se escribe en
terminal APT-GET INSTALL POSTGRESQL (Figura 8) se da un enter, pedirá
autorización para guardarlo en el disco se escribe S, se da enter y se espera a que
se finalice la descarga.
Figura 8. Instalación de postgres.
9
4.4. Instalación de swftools
Para instalar swftools es necesario primero agregar un repositorio con la
instrucción “ add-apt-repository ppa:guilhem-fr/swftools”, luego se procede a hacer
un update con el comando “apt-get update” y se procede a instalar con el
comando “apt-get install swftools”(Figura 9).
Figura 9. Instalación de la herramienta swftools para crear archivos flash
4.5. Instalación de postgresql, apache y php
Ya que se encuentren instalado apache, Postgresql y php5, se continua con
lo conexión entre php5 y Postgresql, lo cual se realiza escribiendo en terminal
“apt-get install php5-pgsql” y se presiona enter. (Figura 10)
Figura 10. Conexión de php con postgresql.
10
Se continua con la conexión entre apache 2 y Postgresql escribiendo en
terminal “apt-get install libapache2-mod-auth-pgsql” y presionando enter. (Figura
11)
Figura 11. Conexión de apache con postgres.
Ya instaladas las librerías de conexión hay que reiniciar los dominios de
Apache y Postgresql. Escribiendo en terminal “service apache2 restart “para
reiniciar apache (Figura 12) y la misma instrucción pero sustituyendo apache2 por
“postgresql”.
Figura 12. Reiniciar los servicios de apache.
11
5. Configuración de aplicaciones
Las aplicaciones necesitan ser configuradas. Para esto es necesario abrir
una terminal y acceder como root.
5.1. Configuración de apache 2
Para configurar apache es necesario modificar el DirectoryIndex que se
encuentra en mod_dir, para esto se accede a la ruta “nano /etc/apache2/mods-
enabled/dir.conf”.(Figura 13)
Figura 13. Modificación del archivo dir.conf de apache.
En este archivo se modificará el DirectoryIndex para que el servidor web
identifique el archivo Index si este es modificado, de modo que quede así
“DirectoryIndex index.php index.cgi index.pl index.html index.xhtml index.htm”
(Figura 14)
Figura 14. Configuración el archivo dir.conf.
Para continuar es necesario guardar los cambios y reiniciar el dominio
apache escribiendo en terminal “service apache2 restart”.
12
5.2. Configuración de postgres
Para la configuración de Postgresql es necesario modificar el archivo
postgresql.conf, escribiendo en terminal la siguiente línea, “nano
/etc/postgresql/8.4/main/postgresql.conf”, en el cual se debe descomentar y
modificar la línea no. 59 (figura 15).
Figura 15. Configuración de postgresql.conf.
Después de modificar es necesario guardar los cambios y reiniciar el
dominio de postgresql escribiendo en terminal “service postgresql restart”.
Para otras configuraciones como dar permisos a usuarios a las bases de
datos es necesario entrar al archivo pg_hba.conf, escribiendo en terminal “nano
/etc/postgresql/8.4/main/pg_hba.conf”.(Figura 16)
Figura 16. Permisos de conexión a la base de datos.
13
6. Funcionamiento de nenek-ECAD
6.1. Convertir un archivo pdf a flash
Para cambiar un archivo de extensión pdf a swf, es necesario primero
posicionarse en la carpeta donde se tiene dicho documento pdf y el visualizador
de archivo que contiene el nombre rfxview.swf (figura 17), una vez dentro se
procede a la creación del documento flash para eso se utilizará el comando en
terminal “pdf2swf -B rfxview.swf -o nombre que tomará el archivo.swf nombre del
archivo.pdf” (figura 18).
Figura 17. Entrar a la carpeta que contienen los documentos
Figura 18. Creación del archivo flash por terminal
14
6.2. Subir un archivo flash
Una vez creado el archivo flash se procede a subirlo a la plataforma de
nenek.mx, para eso se usa el archivo pdfdocs.php.
CODIGO 1
<?php include ("head.php"); include ("get_info.php"); if($usuarionk==null){ echo "<script>alert('inicia sesion para subir pdf'); window.location.href='index.php';</script>", exit; } ?> <div id="header"> <h1 align="center"><a href="#">Nenek</a></h1> <h2><a href="#">By GISAA </a></h2> </div> <div id="page"> <div id="adspace"> <p> </p> <div class="boxed"> <?php include ("avatarseccion.php");?> <ul class="list"></ul> <p> <?php include ("lat_der.php"); ?>
15
</p> <p> </p> </div> </p> </div> <div id="content"> <div class="post"> <!--inicio del contenido--> <center> <p><h2 title="Subir un Documento en PDF">Subir un Documento flash</h2></p> <table> <script type="text/javascript"> function validacion() { valor = document.getElementById("titulo").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo título requerido"); return false; } valor = document.getElementById("autor_es").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo Autor requerido");
16
return false; } valor = document.getElementById("lugar").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo lugar requerido"); return false; } valor = document.getElementById("anio").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo año requerido"); return false; } valor = document.getElementById("editorial").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo editorial requerido"); return false; } valor = document.getElementById("paginas").value;
17
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo paginas requerido"); return false; } valor = document.getElementById("idioma").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo idioma requerido"); return false; } valor = document.getElementById("corpus").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo corpus requerido"); return false; } valor = document.getElementById("url").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo url requerido");
18
return false; } return true; } </script> <p align="center"> <form id="form2" name="form1" enctype="multipart/form-data" method="post" action="save_pdf.php" onsubmit="return validacion();" accept-charset="UTF-8"> <tr><td title="Titulo:"><br />Titulo:</td><td><br /><input name="titulo" type="text" id="titulo" /></td></tr> <tr><td title="Autor(es):"><br />Autor(es):</td><td><br /><input name="autor_es" type="text" id="autor_es" /></td></tr> <tr><td title="Lugar de Realizacion:"><br />Lugar de Realización:</td><td><br /><input name="lugar" type="text" id="lugar" /></td></tr> <tr><td title="año de Realizacion:"><br />Año de Realización:</td><td><br /><input name="anio" type="text" id="anio" /></td></tr> <tr><td title="editorial:"><br />Editorial:</td><td><br /><input name="editorial" type="text" id="editorial" /></td></tr> <tr><td title="corpus:"><br />Corpus:</td><td><br /><input name="corpus" type="text" id="corpus" /></td></tr> <tr><td title="url:"><br />Url:</td><td><br /><input name="url" type="text" id="url" /></td></tr> <tr><td title="paginas:"><br />Páginas:</td><td><br /><input name="paginas" type="text" id="paginas" /></td></tr>
19
<tr><td><br />Idioma</td><td><br /> <select name="idioma" id="idioma"> <option value="" selected title="Seleccione">Seleccione</option> <option title="tenek" value="tenek">Tének</option> <option title="español" value="español">Español</option> <option title="ingles" value="ingles">Inglés</option> <option title="frances" value="frances">Francés</option> <option title="otro" value="otro">otro</option> </select> </td></tr> <tr><td><br />Selecciona un documento swf</td><td><br /><input type="file" name="doc" id="doc" /></td></tr> <tr><td colspan="2"><br /><center><input type="submit" name="button" id="button" value="subir" title="Subir"/></center></td></tr> </form> </table> <!--Fin del contenido--> </div> </div>
20
<div id="sidebar"> <?php include ("boton_desp.php"); ?> </div> <div style="clear: both;"> </div> </div> <?php include ("footer.php");?> </body> </html>
Desglosando el código 1 en sus módulos más importantes se encuentra el
script donde se valida los campos vacíos llamado validación, y en dado caso de
que se encuentre un campo vacío regresará un mensaje con un alert y pedirá que
sea rellenado (código 1.1).
Codigo1.1
function validacion() { valor = document.getElementById("titulo").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo titulo requerido") return false; } valor = document.getElementById("autor_es").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo Autor requerido"); return false; } valor = document.getElementById("lugar").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo lugar requerido"); return false; } valor = document.getElementById("anio").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
21
alert("Campo año requerido"); return false; } valor = document.getElementById("editorial").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo editorial requerido"); return false; } valor = document.getElementById("paginas").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo paginas requerido"); return false; } valor = document.getElementById("idioma").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo idioma requerido"); return false; } valor = document.getElementById("corpus").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo corpus requerido"); return false; }
22
valor = document.getElementById("url").value; if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { alert("Campo url requerido"); return false; } return true; } </script>
El segundo módulo más importante de este código se encuentra en el
formulario a rellenar (código 1.2), el cual almacenará los datos de las variables
hasta que sean verificados, además verificara que no estén vacíos los campos por
la función validación y pasará al siguiente código que se encarga de guardarlos.
Código 1.2
//manda el formulario ya lleno con los datos, mediante su identificador a sabe_pdf.php <form id="form2" name="form1" enctype="multipart/form-data" method="post" action="save_pdf.php" onsubmit="return validacion();" accept-charset="UTF-8"> //cada input almacena los datos registrados por el usuario colaborador en su respectivo identificador <tr><td title="Titulo:"><br />Titulo:</td><td><br /><input name="titulo" type="text" id="titulo" /></td></tr> <tr><td title="Autor(es):"><br />Autor(es):</td><td><br /><input name="autor_es" type="text" id="autor_es" /></td></tr> <tr><td title="Lugar de Realizacion:"><br />Lugar de Realización:</td><td><br /><input name="lugar" type="text" id="lugar" /></td></tr> <tr><td title="año de Realizacion:"><br />Año de Realización:</td><td><br /><input name="anio" type="text" id="anio" /></td></tr>
23
<tr><td title="editorial:"><br />Editorial:</td><td><br /><input name="editorial" type="text" id="editorial" /></td></tr> <tr><td title="corpus:"><br />Corpus:</td><td><br /><input name="corpus" type="text" id="corpus" /></td></tr> <tr><td title="url:"><br />Url:</td><td><br /><input name="url" type="text" id="url" /></td></tr> <tr><td title="paginas:"><br />Páginas:</td><td><br /><input name="paginas" type="text" id="paginas" /></td></tr> <tr><td><br />Idioma</td><td><br /> // aquí mediante una casilla de selección se tomará el valor de los 4 tipos diferentes de idiomas y se regresará con el id “idioma” <select name="idioma" id="idioma"> <option value="" selected title="Seleccione">Seleccione</option> <option title="tenek" value="tenek">Tének</option> <option title="español" value="español">Español</option> <option title="ingles" value="ingles">Inglés</option> <option title="frances" value="frances">Francés</option> <option title="otro" value="otro">otro</option> </select> </td></tr> //aquí se selecciona el archivo de extensión .swf (flash) a subir <tr><td><br />Selecciona un documento swf</td><td><br /><input type="file" name="doc" id="doc" /></td></tr>
24
//es el botón que manda el formulario, mientras tanto si no se selecciona el botón no se lanza el formulario para verificar y pasar al siguiente código <tr><td colspan="2"><br /><center><input type="submit" name="button" id="button" value="subir" title="Subir"/></center></td></tr> </form>
Figura 19. Pantalla de pdfdocs.php
6.3. Guardar los datos del formulario.
Una vez que los datos son pasados de pdfdocs.php, se procede al
guardado de los datos en la base de datos para eso se utiliza el archivo
save_pdf.php (código 2).
Código 2
<?php include ("head.php"); include("get_info.php"); if($usuarionk == null){ echo ("<script language='javascript'>document.location.href = 'index.php';</script>;");
25
exit; } //con $_POST se toma el valor transferido desde pdfdocs reconociéndolo por su identificador y se guarda en una variable para guardarlo mas adelante $nombre = $_POST["titulo"]; //date nos regresa la fecha $fecha = date("d-M-Y H:i:s"); $autor = $_POST['autor_es']; $idioma = $_POST['idioma']; $lugar = $_POST['lugar']; $anio = $_POST['anio']; $editorial = $_POST['editorial']; $pag = $_POST['paginas']; //se utiliza la función time como un identificador único para cada archivo ya que el día y tiempo siempre va a ser diferente y nunca igual $id_doc = time(); //carpeta donde se guardan los archivos flash $uploaddir = "swf/"; $corpus = $_POST['corpus']; //la url del documento en caso de que tenga y si no se pone como hacer petición a www.nenek.mx $url = $_POST['url']; //es la cadena de el nombre del archivo con su extensión y la carpeta en donde se encuentra $file = $uploaddir.basename($_FILES['doc']['name']);
26
//se mueve el archivo a su carpeta y se compara si lo que se movió es igual a la variable file, si es así se guarda con un insert en la tabla pdf y se manda una alerta de éxito if (move_uploaded_file($_FILES['doc']['tmp_name'], $file)) { $query = "INSERT INTO pdf (titulo,autor_es,lugar,anio,idioma,fecha,id_doc,editorial,pag,swf,corpus,url) VALUES ('$nombre','$autor','$lugar','$anio','$idioma','$fecha','$id_doc','$editorial','$pag','$file','$corpus','$url')"; $result = pg_query($conn,$query); echo "<script>alert('subido con exito');window.location.href='pdfdocs.php';</script>"; //si no se logra hacer el movimiento del archivo se manda un mensaje de error }else { echo "<script>alert('error: puede que el archivo este muy pesado, o el tipo de formato no es aceptable');window.location.href='pdfdocs.php';</script>"; } ?>
6.4. Búsqueda por título de artículo.
Una vez que se encuentra al menos un registro de un artículo se puede
proceder la búsqueda de este, por medio del archivo
buscarporclasificacionpdf.php (código 3).
Código 3
<?php include ("head.php"); include ("get_info.php"); ?>
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <script type="text/javascript"> function showUser(str){ if(str==""){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest){//codeforIE7+,Firefox,Chrome,Opera,Safari xmlhttp=new XMLHttpRequest(); } else{//codeforIE6,IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","clasificacion-pdf.php?q="+str,true); xmlhttp.send();
28
} </script> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("completa.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); showUser(thisValue); }
29
</script> <?php timequery(); ?> <div id="header"> <h1 align="center"><a href="htt://localhost">Nenek</a></h1> <h2><a href="www.adaptivez.org.mx">By gissa </a></h2> </div> <div id="page"> <div id="adspace"> <p> </p> <div class="boxed"> <?php include ("avatarseccion.php");?> <ul class="list"></ul> <p> <?php include ("lat_der.php"); ?> </p> <p> </p> </div></p> </div> <div id="content"> <div class="post"> <!--inicio del contenido--> <?php function timequery(){ static $querytime_begin;
30
list($usec, $sec) = explode(' ',microtime()); if(!isset($querytime_begin)) { $querytime_begin= ((float)$usec + (float)$sec); } else { $querytime = (((float)$usec + (float)$sec)) - $querytime_begin; echo sprintf('<br />La consulta tardó %01.5f segundos.- <br />', $querytime); } } ?> <center><p><h2>Documentos de Acervo con fines Divulgativos</h2></p> <form accept-charset="UTF-8"> <label for="pal_tenek"><b>buscar titulo del documento</b> </label> <input type="text" name="titulo" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="suggestionList" id="autoSuggestionsList"> </div>
31
</div> <p><a href='documents_pdf.php'>Todos los documentos</a></p></center> </form > <br/> <div id ="txtHint"></div> <?php timequery(); ?> <!--Fin del contenido--> </div> </div> <div id="sidebar"> <?php include ("boton_desp.php"); ?> </div> <div style="clear: both;"> </div> </div> <?php include ("footer.php");?>
32
En este código se encuentran 4 módulos importantes, en el primero se
tendrá un text input que nos servirá para buscar los artículos arrojados por la base
de datos (código 3.1), segundo módulo se encarga de la búsqueda en la base de
datos y la concatenación a la pantalla en base a funciones de java script (código
3.2), el tercer módulo se encarga de la impresión a pantalla del articulo
seleccionado de la caja de sugerencias (código 3.3).
Código 3.1
<form accept-charset="UTF-8"> <label for="pal_tenek"><b>buscar titulo del documento</b> </label> // aquí es donde se introduce la palabra y al recibir los caracteres inmediatamente hace la búsqueda con las funciones onkeyup y onblur mandando los valores recibidos por el text input <input type="text" name="titulo" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> //div que contiene la forma de la caja donde se arrojarán los posibles resultados <div class="suggestionsBox" id="suggestions" style="display: none;"> //div donde se regresa la lista de las coincidencias en palabras <div class="suggestionList" id="autoSuggestionsList"> </div> </div> // búsqueda de todos los documentos que se encuentran hasta el momento <p><a href='documents_pdf.php'>Todos los documentos</a></p></center> </form > <br/>
33
//aquí se arroja el resultado de la búsqueda, es decir el artículo de lectura. <div id ="txtHint"></div>
Código 3.2
<script type="text/javascript"> // se toma ya sea un carácter o cadena de caracteres tomados con el inputstring function lookup(inputString) { //si no encuentra ninguna coincidencia no muestra la caja de sugestiones if(inputString.length == 0) { $('#suggestions').hide(); } else { //toma cada carácter y lo va mandando a complete.php (CODIGO 3.2.1) para extraer las posibles coincidencias con palabras de los títulos, y cada vez que se agrega un nuevo carácter vuelve a comparar $.post("completa.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { //muestra la lista de títulos sugeridos en base a las palabras escritas en el text input $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // toma el string seleccionado con el click function fill(thisValue) { $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); //función para la impresión a pantalla del archivo seleccionado showUser(thisValue); } </script>
34
Código 3.2.1
<?php //se hace la conexión de la base de datos para extraer los títulos include 'dbconnect.php'; // se comprueba si la variable querystring está regresando un resultado if(isset($_POST['queryString'])) { //se almacena lo que arroja el textinput en la variable queryString $queryString = htmlspecialchars($_POST['queryString'], ENT_QUOTES); //se busca las coincidencias con títulos en la base de datos $query = "SELECT titulo FROM pdf WHERE upper(titulo) LIKE upper('%$queryString%')LIMIT 10"; $result = pg_query($conn,$query); if(!$result){ echo "Fallo esto"; }else{ //si regresa 0 sugerencias if(pg_num_rows($result) == 0){ echo "0 sugerencias"; }else{ //se manda a llamar la función fill() para terminar imprimiendo en la caja de sugerencias los posibles candidatos de títulos while($row = pg_fetch_assoc($result)){ echo '<a onClick="fill(\''.$row['titulo'].'\');">'.$row['titulo'].'</a><br />'; } } } } else { echo 'No puedes acceder directamente al script!'; } ?>
35
Código 3.3
<script type="text/javascript"> //se toma el string que se regresó al dar clik en la caja de sugerencias function showUser(str){ //en dado caso de no tener nada regresa con un return if(str==""){ document.getElementById("txtHint").innerHTML=""; return; } //código para IE7+,Firefox,Chrome,Opera,Safari al tomar el string no cause problemas if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } //código para IE6,IE5 else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ //se toma el texto que recibe de xmlhttp y se inserta en txtHint document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } //se manda la variable str al archivo clasificacion-pdf.php(CODIGO 3.3.1) en el identificador q xmlhttp.open("GET","clasificacion-pdf.php?q="+str,true); xmlhttp.send(); } </script>
36
Código 3.3.1
<html xmlns="http://www.w3.org/1999/xhtml"> <body> // código para ver el tiempo de ejecución de la consulta a la base de datos <?php function timequery(){ static $querytime_begin; list($usec, $sec) = explode(' ',microtime()); if(!isset($querytime_begin)) { $querytime_begin= ((float)$usec + (float)$sec); } else { $querytime = (((float)$usec + (float)$sec)) - $querytime_begin; //imprime el tiempo que le tomo al programa hacer dicha acción echo sprintf('<br />La consulta en base de datos y respuesta tardó %01.5f segundos.- <br />', $querytime); } } ?> <?php //inicio de la consulta timequery(); //toma el valor obtenido de la función y lo guarda en la variable $id=$_GET['q']; // conexión a base de datos include "dbconnect.php"; //consulta a la base de datos con la variable obtenida anteriormente $query_img = "SELECT * FROM pdf WHERE titulo='$id';"; $result_img = pg_query($conn,$query_img); if(!$result_img){
37
echo "<center>Fallo esto</center>"; }else{ //en caso de obtener 0 resultados if(pg_num_rows($result_img) == 0){ echo "<center>0 documentos<br /><br /> </center>"; }else{ //se obtiene más de un resultado y se almacena cada dato de la tabla en su respectiva variable echo "<hr />"; while ($row_img = pg_fetch_array($result_img)){ $titulo = $row_img['titulo']; $autor = $row_img['autor_es']; $lugar = $row_img['lugar']; $anio = $row_img['anio']; $id_doc = $row_img['id_doc']; $editorial = $row_img['editorial']; $pag = $row_img['pag']; $corpus = $row_img['corpus']; $idioma = $row_img['idioma']; $swf= $row_img['swf']; ?> //cuando se da click en el resultado de la consulta se abrirá su visor del documento seleccionado en una nueva ventana(CODIGO 4) <a href="visor.php?view=<?php echo $id_doc; ?>" TARGET="_blanc"> //se abre una tabla de dos columnas, una para la muestra del archivo flash y la otra para mostrar los datos de este documento <table> <tr>
38
//código para ver en miniatura el archivo flash <td> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="250" height="250"> <param name="movie" value="<?php echo $swf; ?>" /> <param name="quality" value="high" /> <embed src="<?php echo $swf; ?>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="250"></embed> </object></td> //impresión de las variables en la columna derecha <td><?php echo" <b>Titulo:</b> $titulo <br /> <b>Autor(es):</b> $autor <br /> <b>idioma:</b> $idioma <br /> <b>Lugar de realización:</b> $lugar <br /> <b>Año de realización:</b> $anio <br /> <b>Editorial:</b> $editorial <br /> <b>Páginas:</b> $pag<br /> <b>Corpus:</b> $corpus</td> "; ?> </tr> </table> </a><hr /> <?php //término de la ejecución de la consulta y con este compara el tiempo final con el inicial y regresa el tiempo de ejecución timequery(); } } } ?> </body> </html>
39
Figura 20. Búsqueda por título de artículo.
6.5. Visor para lectura de documento.
Una vez se seleccione el documento ya sea por búsqueda de título o por la
muestra de todos los documentos que se encuentran en repositorio, se podrá
acceder a la lectura de dicho artículo mediante el archivo visor.php (código 4).
Código 4
<!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" lang="es" xml:lang="es"> <title>Nenek</title> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <center>
40
<?php //conexión a la base de datos include "dbconnect.php"; //se toma el identificador del artículo que fue enviado anteriormente y se almacena en una variable $id_doc = $_GET['view']; //consulta a la base de datos $query_img = "SELECT * FROM pdf WHERE id_doc='$id_doc';"; $result_img = pg_query($conn,$query_img); if(!$result_img){ echo "<center>Fallo</center>"; }else{ while ($row_img = pg_fetch_array($result_img)){ //ruta donde se encuentra el archivo flash almacenado $swf= $row_img['swf']; //especificación de si el artículo se encuentra en internet para su descarga $url= $row_img['url']; ?> //código para la muestra de documentos tipo flash o extensión .swf <object type="application/x-shockwave-flash" data="<?php echo $swf; ?>" width="600" height="800" > <param name="movie" value="<?php echo $swf; ?>" /> // en dado caso que no contenga el plugin necesario se mostrará el link de descarga del plugin <p> Es necesario flash player para su visualización <a href="http://get.adobe.com/es/flashplayer/"> link de descarga</a></p> </object> //muestra de la url de descarga en internet si es que contiene <br />Url del documento:<?php echo $url; ?> <?php } }
42
6.6. Mostrar todos los documentos guardados en la base de
datos pdf.
Para la muestra de todos los documentos es necesario dirigirse a el
archivo buscarporclasificacionpdf.php y se selecciona el hipervínculo todos los
documentos, el cual nos lanzara a documents_pdf.php (código 5) en la misma
pestaña.
Código 5
<?php include ("head.php"); include ("get_info.php"); ?> <script type="text/javascript" src="js/tinybox.js"></script> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> <div id="header"> <h1 align="center"><a href="htt://localhost">Nenek</a></h1> <h2><a href="www.adaptivez.org.mx">By gissa </a></h2> </div> <div id="page"> <div id="adspace"> <p> </p> <div class="boxed"> <?php include ("avatarseccion.php");?> <ul class="list"></ul> <p> <?php include ("lat_der.php"); ?>
43
</p> <p> </p> </div></p> </div> <div id="content"> <div class="post"> <!--inicio del contenido--> <center><p><h2>Documentos de Acervo con fines Divulgativos</h2></p></center> <?php //consulta de todos los documentos de la tabla pdf $query_img = "SELECT * FROM pdf;"; $result_img = pg_query($conn,$query_img); if(!$result_img){ echo "<center>Fallo</center>"; }else{ //si no encuentra ni un solo registro if(pg_num_rows($result_img) == 0){ echo "<center>0 textos<br /><br /> </center>"; }else{ echo "<hr />";
44
while ($row_img = pg_fetch_array($result_img)){ //se guarda cada resultado de la base de datos en variables para ser usadas en una impresión en pantalla más adelante $titulo = $row_img['titulo']; $autor = $row_img['autor_es']; $lugar = $row_img['lugar']; $anio = $row_img['anio']; $idioma = $row_img['idioma']; $id_doc = $row_img['id_doc']; $editorial = $row_img['editorial']; $pag = $row_img['pag']; $corpus = $row_img['corpus']; $swf= $row_img['swf']; ?> //cuando se dé clic sobre uno de los hipervínculos abrirá en una nueva pestaña con el visor.php(CODIGO 5) <a href="visor.php?view=<?php echo $id_doc; ?>" TARGET="_blanc"> <table> <tr> //muestra el archivo flash de cada uno de los documentos en miniatura en la columna izquierda <td> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="250" height="250"> <param name="movie" value="<?php echo $swf; ?>" /> <param name="quality" value="high" /> <embed src="<?php echo $swf; ?>" quality="high"
45
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="250"></embed> </object></td> //imprime cada una de las variables llamadas a la columna derecha <td><?php echo" <b>Titulo:</b> $titulo <br /> <b>Autor(es):</b> $autor <br /> <b>idioma:</b> $idioma <br /> <b>Lugar de realización:</b> $lugar <br /> <b>Año de realización:</b> $anio <br /> <b>Editorial:</b> $editorial <br /> <b>Páginas:</b> $pag<br /> <b>Corpus:</b> $corpus</td> "; ?> </tr> </table> </a><hr /> <?php } } } ?> </center> <!--Fin del contenido-->