DIRECCIÓN GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA INSTITUTO TECNOLÓGICO DE CD. VALLES MANUAL TÉCNICO

Transcripción

1 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 ROSA NALLELI VIDALES GUERRERO JANETH CAROLINA CORONADO CASTRO ASESOR INTERNO ASESOR EXTERNO M.A.E. DALIA ROSARIO HERNÁNDEZ LÓPEZ Dra. ANUSCHKA JOHANNA VAN T HOOFT

2 Índice 1. Introducción Especificaciones técnicas Diccionario de datos Instalación de aplicaciones Instalación de apache Instalación de PHP Instalación de postgresql Instalación de swftools Instalación de postgresql, apache y php Configuración de aplicaciones Configuración de apache Configuración de postgres Funcionamiento de nenek-ecad Cambiar un archivo pdf a flash Subir un archivo flash Guardar los datos del formulario Búsqueda por título de artículo Visor para lectura de documento Mostrar todos los documentos guardados en la base de datos pdf

3 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. 1

4 2. Especificaciones técnicas Sistema operativo: GNU/Linux Ubuntu 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 2

5 3. Diccionario de datos Todos los datos mostrados en la tabla ya se encuentran en implementación en la página nenek.mx CAMPO TITULO AUTOR_ES LUGAR ANIO IDIOMA FECHA ID_DOC EDITORIAL PAG SWF CORPUS URL TIPO TEXT TEXT TEXT TEXT TEXT CHARACTER VARYING(100) CHARACTER VARYING(100) TEXT TEXT TEXT TEXT TEXT Figura 1. Estructura de datos del archivo subido. 3

6 NOMBRE FUNCIÓN LOCALIZACIÓN TAMAÑO NO. LINEAS Buscarporcl asificacionp df.php clasificacion -pdf.php Busca los títulos de los archivos en la base de datos INCLUYE /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 Muestra la /var/www/nenek 2.2 kb 77 dbconnect.php, visor.php información del archivo buscado en Buscarporclasi ficacionpdf.ph p pdfdocs.php Función para subir archivos tipo swf con toda su información save_pdf.ph p documents_ pdf.php completa.ph p /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 Se encarga de /var/www/nenek 1.2 kb 30 get_info.php guardar todo en la base de datos nenek, tabla pdf 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 Busca coincidencia de /var/www/nenek.651 kb 35 dbconnect.php palabra con cada titulo 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, 4

7 casoestudio.php scestudio.p hp scestudiosa ve.php Muestra el /var/www/nenek kb 15 archivo.swf del caso de estudio en una nueva pestaña 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 Para guardar /var/www/nenek kb 15 head.php, get_info.php el caso de estudio en la carpeta swf Figura 2. Descripción de los archivos.php desarrollados. 5

8 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. 6

9 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 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. 7

10 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 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. 8

11 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. 9

12 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. 10

13 5. Configuración de aplicaciones Las aplicaciones necesitan ser configuradas. Para esto es necesario abrir una terminal y acceder como root 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/modsenabled/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. 11

14 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. 12

15 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 13

16 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){ exit;?> echo "<script>alert('inicia sesion para subir pdf'); window.location.href='index.php';</script>", <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");?> 14

17 </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; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 alert("campo título requerido"); return false; valor = document.getelementbyid("autor_es").value; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 alert("campo Autor requerido"); 15

18 return false; valor = document.getelementbyid("lugar").value; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 alert("campo lugar requerido"); return false; valor = document.getelementbyid("anio").value; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 alert("campo año requerido"); return false; valor = document.getelementbyid("editorial").value; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 requerido"); alert("campo editorial return false; valor = document.getelementbyid("paginas").value; 16

19 /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 requerido"); alert("campo return false; paginas valor = document.getelementbyid("idioma").value; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 requerido"); alert("campo return false; idioma valor = document.getelementbyid("corpus").value; /^\s+$/.test(valor) ) { if( valor == null valor.length == 0 requerido"); alert("campo return false; corpus document.getelementbyid("url").value; /^\s+$/.test(valor) ) { valor = if( valor == null valor.length == 0 alert("campo url requerido"); 17

20 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> 18

21 <tr><td><br />Idioma</td><td><br /> id="idioma"> <select name="idioma" title="seleccione">seleccione</option> <option value="" selected value="tenek">tének</option> value="español">español</option> value="ingles">inglés</option> value="frances">francés</option> value="otro">otro</option> <option <option <option <option <option </select> </td></tr> title="tenek" title="español" title="ingles" title="frances" title="otro" <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> </div> </div> </table> <!--Fin del contenido--> </form> 19

22 <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) ) { 20

23 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; 21

24 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> 22

25 <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> value="tenek">tének</option> <option title="tenek" <option value="español">español</option> title="español" value="ingles">inglés</option> <option title="ingles" <option value="frances">francés</option> title="frances" <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> 23

26 //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>;"); 24

27 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 $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']); 25

28 //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','$corp us','$url')"; $result = pg_query($conn,$query); echo "<script>alert('subido con exito');window.location.href='pdfdocs.php';</script>"; error //si no se logra hacer el movimiento del archivo se manda un mensaje de 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"); 26

29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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(); 27

30 </script> <script type="text/javascript"> function lookup(inputstring) { if(inputstring.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); else { function(data){ $.post("completa.php", {querystring: ""+inputstring+"", if(data.length >0) { $('#suggestions').show(); $('#autosuggestionslist').html(data); ); // lookup function fill(thisvalue) { $('#inputstring').val(thisvalue); settimeout("$('#suggestions').hide();", 200); showuser(thisvalue); 28

31 </script> <?php timequery();?> <div id="header"> <h1 align="center"><a href="htt://localhost">nenek</a></h1> <h2><a href=" gissa </a></h2> </div> <div id="page"> <div id="adspace"> </div> <p> </p> <div class="boxed"> </p> <?php include ("avatarseccion.php");?> <ul class="list"></ul> <p> </div></p> <div id="content"> <div class="post"> <?php include ("lat_der.php");?> <p> </p> <!--inicio del contenido--> <?php function timequery(){ static $querytime_begin; 29

32 list($usec, $sec) = explode(' ',microtime()); { if(!isset($querytime_begin)) $querytime_begin= ((float)$usec + (float)$sec); { else (float)$sec)) - $querytime_begin; %01.5f segundos.- <br />', $querytime); $querytime = (((float)$usec + echo sprintf('<br />La consulta tardó?> Divulgativos</h2></p> <center><p><h2>documentos de Acervo con fines <form accept-charset="utf-8"> documento</b> </label> <label for="pal_tenek"><b>buscar titulo del <input type="text" name="titulo" value="" id="inputstring" onkeyup="lookup(this.value);" onblur="fill();" /> style="display: none;"> <div class="suggestionsbox" id="suggestions" class="suggestionlist" id="autosuggestionslist"> <div </div> 30

33 </div> <p><a href='documents_pdf.php'>todos los documentos</a></p></center> </div> </div> </div> <div id="sidebar"> </div> <?php timequery();?> </form > <br/> <!--Fin del contenido--> <?php include ("boton_desp.php");?> <div style="clear: both;"> </div> <?php include ("footer.php");?> <div id ="txthint"></div> 31

34 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"> documento</b> </label> <label for="pal_tenek"><b>buscar titulo del // 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 id="autosuggestionslist"> <div </div> class="suggestionlist" </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> <br/> </form > 32

35 //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> 33

36 Código <?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!';?> 34

37 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){ //código para IE6,IE5 else{ xmlhttp=new XMLHttpRequest(); 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> 35

38 Código <html xmlns=" <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){ 36

39 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> 37

40 //código para ver en miniatura el archivo flash <td> <object classid="clsid:d27cdb6e-ae6d-11cf- 96B " codebase=" sion=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=" type="application/xshockwave-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();?> </html> </body> 38

41 Figura 20. Búsqueda por título de artículo 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" " <html xmlns=" lang="es" xml:lang="es"> <title>nenek</title> <head> /> <meta http-equiv="content-type" content="text/html; charset=utf-8" </head> <center> 39

42 <?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){ else{ echo "<center>fallo</center>"; 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=" 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 40

43 ?> </center> <!--Fin del contenido--> </html> Figura 21. Visor de documentos tipo flash 41

44 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=" 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");?> 42

45 </p> </div></p> <p> </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;"; pg_query($conn,$query_img); $result_img = if(!$result_img){ "<center>fallo</center>"; echo //si no encuentra ni un solo registro else{ if(pg_num_rows($result_img) == 0){ textos<br /><br /> echo "<center>0 </center>"; else{ echo "<hr />"; 43

46 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-96b " codebase=" width="250" height="250"> <param name="movie" value="<?php echo $swf;?>" /> <param name="quality" value="high" /> <embed src="<?php echo $swf;?>" quality="high" 44

47 pluginspage=" 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--> 45

48 </div> </div> <div id="sidebar"> <?php include ("boton_desp.php");?> </div> <div style="clear: both;"> </div> </div> <?php include ("footer.php");?> </body> </html> Figura 22. Listado de todos los documentos flash 46