DIRECCIÓN GENERAL DE EDUCACIÓN ... -...

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">  <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>  </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">  <?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(); ?>  </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 } }

41

?> </center>  </html>

Figura 21. Visor de documentos tipo flash

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">  <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>

46

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

DIRECCIÓN GENERAL DE EDUCACIÓN ... -...

Documents

Transcript of DIRECCIÓN GENERAL DE EDUCACIÓN ... -...