Comunicação Digital – Elementos de TI Banco de Dados implementação e integração com aplicações Prof.: Sandro Rigo.

Apresentação em tema: "Comunicação Digital – Elementos de TI Banco de Dados implementação e integração com aplicações Prof.: Sandro Rigo."— Transcrição da apresentação:

1 Comunicação Digital – Elementos de TI Banco de Dados implementação e integração com aplicações Prof.: Sandro Rigo

2 Banco de dados: implementação e integração Roteiro: Revisão de conceitos básicos Caso de estudo: filmes BD Filmes / RSS Acesso com HTML/PHP Exercícios

3 Arquitetura Cliente Servidor na Internet Servidor Web + http Cliente + http 1 2 3 4 http://www.unisinos.br... MS Internet Explorer Netscape Navigator Opera NeoPlanet Amaya....... MS IIS Apache Nestcape..........

4 xml.... Arquitetura Cliente Servidor na Internet Servidor Web, documentos e scripts Internet: Requisições http Filtros WWWWWW scripts Internet Information Server CGI html....

5 Cliente Web: linguagens de script Usuário Navegador Web Server Javascript VBScript html

6 Documentos HTML

7

8 HTML - Editores WYSIWYG

9

10 Introdução Editores WYSIWYG Untitled <!--// original code by Bill Trefzger 12/12/96 function go1(){ if (document.selecter1.select1.options[document.selecter1.select1.selectedInde x].value != "none") { location = document.selecter1.select1.options[document.selecter1.select1.selectedIndex ].value } //--> <!-- document.write(' '); document.write(' Select your destination'); document.write(' --------------------'); document.write(' U1'); document.write(' R5'); document.write(' '); // end hiding contents -->

11 Documentos HTML

12 CSSP – Cascading Style Sheets Positioning x yz (0,0) (400,0) (0,200) (400,200)

13 CSS: Posicionamento PROPRIEDADES: positionabsolute relative static left valor porcentagem auto top valor porcentagem auto width valor porcentagem auto height valor porcentagem auto clipretângulo auto overflownone clip scroll z-indexauto valor visibilityinherit visible hidden width height clip

14 CSS: Posicionamento

15 <div id="Layer1 style="position:absolute; width:200px; height:115px; z-index:1; left: 240px; top: 176px; overflow: scroll; clip: rect(10 100 50 12); visibility: visible; background-color: #6699FF; layer-background-color: #6699FF; border: 1px none #000000">

16 CSS: Posicionamento z-index=1 z-index=0

17 CSS: Posicionamento

18

19

20

21

22

23 X: Y: <input type=button value="volta ao início onclick="javascript:retorna()">

24 CSS: Posicionamento function movimenta(){ a_p_x=document.forms[0].elements[0].value; a_p_y=document.forms[0].elements[1].value; imagem.style.left = a_p_x; imagem.style.top = a_p_y; } X: Y: <input type=button value="volta ao início onclick="javascript:retorna()"> #imagem {position:relative;top:10; left:10}

25 CSS: Posicionamento X: Y: <input type=button value="volta ao início onclick="javascript:retorna()">

26 CSS: Posicionamento #imagem {position:relative;top:10; left:10} function movimenta(){ a_p_x=document.forms[0].elements[0].value; a_p_y=document.forms[0].elements[1].value; imagem.style.left = a_p_x; imagem.style.top = a_p_y; } function retorna(){ imagem.style.top = 10; imagem.style.left = 20; imagem.style.visibility = 1; }

27 PHP - Execução no servidor web - Integração com HTML Teste com PHP "; ?>

28 PHP Exemplo com formulário: Nome: Idade: Teste.php3:.... Seu nome é:. Você tem mesmo anos de idade?....

29 Suporte em PHP para acesso a BD $pguser=nome_usuario"; $pgpass=senha_usuario"; $db = mysql_connect("freesql.org", $username, $password);... $query="select * from tabela1"; $resultado=mysql_query($query); … $nro_registros=pg_num_rows($resultado); for($i=0; $i<$nro_registros;$i++){ $linha = pg_fetch_row($conn, $i); echo(reg.:.$i. id =.$linha[0]. nome=.$linha[1]. ); }

30 SGBD Aplicação exemplo Insere Lista lista.php Index.htm insere.php Lista..... insere.htm lista.htm Formulário Resultado..... inseriu.htm

31 Uso de XML (eXtensible Markup Language): Exemplo de documento xml: Autor Alguém Terça - 14 de agosto de 2000 Introdução ao XML Comentários: Obrigado pela leitura desta introdução

32 Características: Um documento VoiceXML descreve: Texto sintetizado (prompts) Saídas de áudio e stream Reconhecimento de palavras e frases Reconhecimento de teclas pressionadas Gravação de entradas faladas Controle do fluxo de diálogo Controle do telefone Interação por Voz – Voice XML

33 Modelo: Servidor de documentos Interpretador VoiceXML (gateway) clientes Pedido(voz)Resposta (voz) Interação por Voz – Voice XML

34 Exemplo uso do voicexml Say one of: Sports Weather News Please say one of Interação por Voz – Voice XML Resultado: Computador: Say one of: Sports; Weather; News. Humano:Astrology Computador :I did not understand what you said. Computador : Say one of: Sports; Weather; News. Humano:Sports Computador : (acessa http://www.sports.http://www.sports example/start.vxml)

35 Exemplo 2: Bem vindo ao serviço de informações de tempo. Qual estado? Por favor, fale o nome do estado onde você está. Interação por Voz – Voice XML

36 1. RSS RSS: Rich Site Summary RDF Site Summary Really Simple Syndication Origem: UserLand (1997) Netscape channels para o Netcenter Referência: http://my.netscape.com/publish/formats/rss-0.91.dtd

37 1.RSS Syndication – compartilhamento/troca de conteúdo entre sites - notícias - listas de eventos - atualizações em projetos - avisos - informação corporativa -.... Push – envio automático de informação, mediante um cadastro prévio do interessado

38 1. RSS Sites usuários: Netscape Netcenter Userland Software Slashdot Wired News Linux Today diversos jornais (CNN, Reuters,...) portais... blogs...

39 1.RSS Syndication Métodos: - copy-paste - APIs - Acesso a bases de dados - Aplicações específicas OU: - RSS

40 1.RSS Roteiro básico: - o site de origem disponibiliza as notícias em rss, xml, texto ou outro formato. - se necessário é realizada uma transformação (texto -> rss, BD -> rss, html->rss,.....) - o documento no formato rss é publicado na web - leitores de rss realizam a verificação e informam usuários cadastrados

41 1.RSS Leitores: FeedReader (http://www.feedreader.com)http://www.feedreader.com AmphetaDeskBeaver FigbyFigby dynamicobjects spacesdynamicobjects spaces ForumZillaHeadline Viewer HotSheetMeerkat My UserLandNews Is Free NovobotPeerkat Radio UserLandrss2email SOAPClient.com RSS News Reader (fonte: http://blogspace.com/rss/readers)

42 1. RSS

43

44

45

46 Sintaxe básica: <!DOCTYPE rss PUBLIC "-//Netscape Communications//DTD RSS 0.91//EN" "http://my.netscape.com/publish/ formats/rss-0.91.dtd">....... </item

47 1. RSS http://my.netscape.com/publish/formats/rss-0.91.dtd........ <!ELEMENT channel (title | description | link | language | item+ | rating? | image? | textinput? | copyright? | pubDate? | lastBuildDate? | docs? | managingEditor? | webMaster? | skipHours? | skipDays?)*>.....

48 1.RSS Sintaxe básica: title – o nome do canal description – descrição breve do canal link – um link html para o site language – linguagem (my.netscape.com) item – um ou mais elementos item Exemplo: Web Insider http://webinsider.globo.com/main.php Web Insider pt

49 1.RSS Sintaxe básica: title – o nome do item description – descrição breve do item link – um link html para o local referenciado Exemplo: Novos players da TV brasileira http://www.webinsider.com.br/vernoticia.php?id=182 3 Boni, Gugu e J. Hawilla. Por Sergio Kulpas

50 1. RSS Web Insider http://webinsider.globo.com/main.php Web Insider Web Insider pt Novos players da TV brasileira http://www.webinsider.com.br/vernoticia.php?id=1823 Boni, Gugu e J. Hawilla. Por Sergio Kulpas

51 1. RSS Outros exemplos: uso com o Dublin Core Módulo RSS-DC: http://web.resource.org/rss/1.0/modules/dc/ http://web.resource.org/rss/1.0/modules/dc/ Metadados p/ descrição de documentos Exemplo:

52 1. RSS <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax- ns#" xmlns="http://purl.org/rss/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" > Example Channel http://example.com/ My example channel News for September the Second http://example.com/2002/09/01 other things happened today 2002-09-01.....

53 1. RSS <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://purl.org/rss/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" > Example Channel http://example.com/ My example channel News for September the Second http://example.com/2002/09/01 other things happened today 2002-09-01..... dc:subject, dc:rights

54 1. RSS Web Insider http://webinsider.globo.com/main.php Web Insider Web Insider pt Novos players da TV brasileira http://www.webinsider.com.br/vernoticia.php?id=1823 Boni, Gugu e J. Hawilla. Por Sergio Kulpas

55 1.RSS Sintaxe básica: title – o nome do canal description – descrição breve do canal link – um link html para o site language – linguagem (my.netscape.com) item – um ou mais elementos item title – o nome do item description – descrição breve do item link – um link html para o local referenciado

56 1.RSS Exercício: Notas de acompanhamento: Aula 1 - 29/07/2003 (Sandro & Renata) Apresentação geral da disciplina, datas e avaliação; Revisão geral: arquitetura da web, linguagens de marcação, aplicações web. Sugestão de material de leitura com resumo do assunto inicial. Aula 2 - 05/08/2003 (Sandro) Revisão da aula 1; apresentação de css(1)(2), xml(1)(2), exemplos de uso de DTD, xmlSchema e xsl. Exercício proposto: "descrição de alguma estrutura de informação em xml". Aviso: as próximas duas aulas no laboratório(6L116). Aula 3 - 12/08/2003 (Sandro e Renata) Revisão da aula 2; apresentação de xml e xsl/xslt(1), exemplos de criação de documentos xml e modificação com xsl (exemplos). Exercícios em aula. Aviso: a próxima aula no laboratório(6L116).resumo do assunto inicial1212DTDxmlSchema e xsl1exemplos

57 1.RSS Exercício: Notas de acompanhamento: Aula 1 - 29/07/2003 (Sandro & Renata) Apresentação geral da disciplina, datas e avaliação; Revisão geral: arquitetura da web, linguagens de marcação, aplicações web. Sugestão de material de leitura com resumo do assunto inicial. Aula 2 - 05/08/2003 (Sandro) Revisão da aula 1; apresentação de css(1)(2), xml(1)(2), exemplos de uso de DTD, xmlSchema e xsl. Exercício proposto: "descrição de alguma estrutura de informação em xml". Aviso: as próximas duas aulas no laboratório(6L116). Aula 3 - 12/08/2003 (Sandro e Renata) Revisão da aula 2; apresentação de xml e xsl/xslt(1), exemplos de criação de documentos xml e modificação com xsl (exemplos). Exercícios em aula. Aviso: a próxima aula no laboratório(6L116).resumo do assunto inicial1212DTDxmlSchema e xsl1exemplos Tópicos V - Notas de acompanhamento http://www.inf.unisinos.br/~rigo/.../topicosv Notas de acompanhamento da disciplina 60250 - Tópicos especiais em informática V Renata Vieira e sandro Rigo pt Notas da aula1 http://www.inf.unisinos.br/~rigo/graduacao/topicosv/i ndex.htm#aula01 Assuntos tratados Aviso: aulas em laboratório http://www.inf.unisinos.br/~rigo/graduacao/topicosv/i ndex.htm#aula02 Troca de sala: aulas em laboratório

58 1.RSS Recursos: xpath2rss – Seleção de partes de docs HTMl/XML com XPathxpath2rss RSS.py – API Python p/ geração e parsingRSS.py XML::RSS - API Perl p/ geração e parsingXML::RSS Orchard RSS – Suporte para parsing em Python, Perl e C.Orchard RSS Site Summaries in XHTML – Serviço online para selecionar partes HTML e gerar rssSite Summaries in XHTML myRSS – geração online de rssmyRSS Online RSS 0.9x Validator - Valida rss(0.9x) (UserLand)Online RSS 0.9x Validator Online RSS 1.0 Validator - Valida rss(1.0)Online RSS 1.0 Validator Online RSS 1.0 Validator - Valida rss (Dave Beckett)Online RSS 1.0 Validator Sites: Syndic8 – Portal comunitárioSyndic8 RSS Workshop – Introdução e tutoriais (Utah Online Services division)RSS Workshop Content Syndication with XML and RSS – Informações e livro de Ben HammersleyContent Syndication with XML and RSS RSSInfo - Listas de agregadores, ferramentas, tutoriaisRSSInfo RSS Devcenter – Portal da O'reilly para RSSRSS Devcenter

59 PHP Exemplo com formulário: Nome: Idade: Teste.php3:.... Seu nome é:. Você tem mesmo anos de idade?....

60 Suporte em PHP para acesso a BD $pguser=nome_usuario"; $pgpass=senha_usuario"; $db = mysql_connect("freesql.org", $username, $password);... $query="select * from tabela1"; $resultado=mysql_query($query); … $nro_registros=pg_num_rows($resultado); for($i=0; $i<$nro_registros;$i++){ $linha = pg_fetch_row($conn, $i); echo(reg.:.$i. id =.$linha[0]. nome=.$linha[1]. ); }

61 Caso de estudo: http://www.imdb.com Exercício: Tratar a modelagem de um conjunto de tabelas e de operações para uma base de dados de filmes produzidos por alunos de um curso de comunicação digital

62 Resumo das propostas Tabela filmes filme CampoTipoNuloPadrão id int(11)Não nome varchar(80)Não tipo int(11)Não 0 ano int(11)Não 0 duracao tinyint(4)Não 0 produtora int(11)Não 0 diretor int(11)Não 0 site varchar(160)Não genero int(11)Não 0 roteirista int(11)Não 0 sinopse varchar(255)Não cartaz int(11)Não 0 fotos int(11)Não 0 curiosidades varchar(200)Não cenas int(11)Não 0 nota floatNão 0 lancamento dateNão 0000-00-00 professor_resp int(11)Não 0 classificacao tinyint(4)Não 0 justificativa varchar(120)Não origem varchar(40)Não

63 Resumo das propostas Tabelas genero e tipo CampoTipoNuloPadrão id int(11)Não nome varchar(30)Não observacoes varchar(255)Não CampoTipoNuloPadrão id int(11)Não nome varchar(30)Não obs varchar(255)Não

64 Resumo das propostas tabela equipe CampoTipoNuloPadrão id int(11)Não nome varchar(60)Não nacionalidade varchar(60)Não data_nascim dateNão 0000-00-00 premios varchar(120)Não naturalidade varchar(60)Não mini_biografia varchar(255)Não home_page varchar(120)Não email varchar(120)Não sexo char(1)Não

65 Resumo das propostas tabela funcao CampoTipoNuloPadrão id int(11)Não nome varchar(60)Não obs varchar(255)Não

66 Resumo das propostas Tabelas de ligação filme-atores Equipe-funcao CampoTipoNuloPadrão id_equipe int(11)Não 0 id_funcao int(11)Não 0 CampoTipoNuloPadrão id_filme int(11)Não 0 id_atores int(11)Não 0

67 Resumo das propostas

68 Possibilidades: consulta de filmes por nome consulta de filmes por diretor/atores/.... consulta de atores por filme consulta de filmografia acesso a cartaz/imagens/cenas outras...

69 Exercícios: -Implementação -Inserção de dados reais -Modelagem de consultas -Modelagem de interface de acesso

70 Exemplos de implementação

71 Consulta:

72 Codificação HTML Sql utilizado: SELECT * FROM filme ORDER BY nome Resultado: Nome Sinopse Ano A estória de José e Maria Primeira linha da sinopse. Segunda linha. Terceira linha. 1977 A Paixão de Jacobina Texto da sinopse: a paixão de jacobina... Home

73 Codificação PHP (1/2) include("/usr/local/website/configdb_elti.inc.php"); $link = mysql_connect($servidor, $usuario, $senha); if (!$link) { die('Não foi possível conectar: '. mysql_error()); } $db_selected = mysql_select_db('elti_filme', $link); if (!$db_selected) { die('Não foi possível selecionar base de dados: '. mysql_error()); } $sql = "SELECT * FROM filme ORDER BY nome"; $result = mysql_query($sql, $link); if (!$result) { die('Query inválida: '. mysql_error()); }

74 Codificação PHP (2/2) $lista =""; $pos=1; while($row = mysql_fetch_array($result)){ $nome = $row["nome"]; $sinopse=$row["sinopse"]; $ano =$row["ano"]; if ($pos==1) {$cor="#FFFFFF"; $pos=0;} else{$cor="#CCCCCC"; $pos=1;} $lista.= " ; $lista.= $nome $sinopse $ano "; } mysql_close($link); $conteudo=""; $conteudo.=" Sql utilizado: ".$sql." Resultado: "; $conteudo.=" ; $conteudo.=" Nome Sinopse ; $conteudo.=" Ano "; $conteudo.= $lista." "; echo $conteudo; include_once ("rodape.php");

75 Inserção de gênero:

76 Resultado do script de inserção: servidor script parâmetros

77 Inserção de gênero: Trecho da codificação:..... $sql = "INSERT INTO `genero` ( `id`, `nome`, `observacoes` ) VALUES ('', '".$nome."', '".$obs."')"; $result = mysql_query($sql, $link); if (!$result) {die('Query inválida: '. mysql_error()); } mysql_close($link); echo(" Dados recebidos: Nome: $nome Observações: $obs ");

78 Inserção de filme:

79 A tabela equipe foi consultada para a montagem da lista de seleção de diretores Não foi implementada como documento HTML

80 Consulta por filme/diretor: Formulário: Opção de indicação de nome de filme ou de nome de diretor

81 Consulta por filme/diretor: Teste: Opção de nome de filme com a letra A

82 Geração de RSS: Execução sempre atualiza arquivo xml com todos os filmes. Configuração de leitor de RSS (Feedreader)

83 Geração de RSS: Exemplo de acesso ao resultado: Visão de todo o canal

84 Geração de RSS: Exemplo de acesso ao resultado: seleção de uma notícia

85 Geração de RSS: Exemplo de acesso ao resultado: acesso ao link da notícia (gera consulta ao sistema e recupera a informação do filme)

86 Geração de RSS: Exemplo de codificação PHP: $sql = "SELECT f.nome nomefilme, f.sinopse sinopse_filme, f.ano ano_filme, e.nome nome_diretor FROM filme f, equipe e WHERE f.diretor = e.id ORDER BY f.nome"; $result = mysql_query($sql, $link); if (!$result) {die('Query inválida: '. mysql_error());} $lista =""; while($row = mysql_fetch_array($result)){ $nome = $row["nomefilme"]; $sinopse = $row["sinopse_filme"]; $diretor = $row["nome_diretor"]; $ano = $row["ano_filme"]; $lista_ = explode(".",$sinopse); $lista.= " ".$nome." - ".$ano." - ".$diretor." http://maia.unisinos.br/_elti/consultas.php?filme=".$nome." ".$lista_[0]." "; }

87 Geração de RSS: Exemplo de codificação PHP: $cabecalho = ' Elementos de TI - Testes com RSS http://maia.unisinos.br/_elti/ Testes com uso de banco de dados para geração de rss Sandro Rigo pt '; $rodape = ' '; $conteudo = $cabecalho.$lista.$rodape; $arquivo = 'rss/elti_rss.xml'; gravar($arquivo, $conteudo);

88 Exercícios: 1 - Inserção de roteirista na opção de Consulta simples 1 (indicar mudanças no SQL e HTML) 2 – Indicar a consulta de filmes por diretor 3 – Listar o nome do diretor junto ao filme na consulta 4- Geração de feed RSS com escolha de filme 5 – Geração de RSS com comentários/críticas recebidos 6 – Busca de filmografia de ator/diretor