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

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

Arquitetura Cliente Servidor na Internet Servidor Web + http Cliente + http MS Internet Explorer Netscape Navigator Opera NeoPlanet Amaya MS IIS Apache Nestcape

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

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

Documentos HTML

HTML - Editores WYSIWYG

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

Documentos HTML

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

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

CSS: Posicionamento

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

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

CSS: Posicionamento

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

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}

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

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; }

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

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

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]. ); }

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

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

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

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

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 example/start.vxml)

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

1. RSS RSS: Rich Site Summary RDF Site Summary Really Simple Syndication Origem: UserLand (1997) Netscape channels para o Netcenter Referência:

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

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

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

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

1.RSS Leitores: FeedReader ( AmphetaDeskBeaver FigbyFigby dynamicobjects spacesdynamicobjects spaces ForumZillaHeadline Viewer HotSheetMeerkat My UserLandNews Is Free NovobotPeerkat Radio UserLandrss2 SOAPClient.com RSS News Reader (fonte:

1. RSS

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

1. RSS <!ELEMENT channel (title | description | link | language | item+ | rating? | image? | textinput? | copyright? | pubDate? | lastBuildDate? | docs? | managingEditor? | webMaster? | skipHours? | skipDays?)*>.....

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 Web Insider pt

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 3 Boni, Gugu e J. Hawilla. Por Sergio Kulpas

1. RSS Web Insider Web Insider Web Insider pt Novos players da TV brasileira Boni, Gugu e J. Hawilla. Por Sergio Kulpas

1. RSS Outros exemplos: uso com o Dublin Core Módulo RSS-DC: Metadados p/ descrição de documentos Exemplo:

1. RSS <rdf:RDF xmlns:rdf=" ns#" xmlns=" xmlns:dc=" > Example Channel My example channel News for September the Second other things happened today

1. RSS <rdf:RDF xmlns:rdf=" xmlns=" xmlns:dc=" > Example Channel My example channel News for September the Second other things happened today dc:subject, dc:rights

1. RSS Web Insider Web Insider Web Insider pt Novos players da TV brasileira Boni, Gugu e J. Hawilla. Por Sergio Kulpas

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

1.RSS Exercício: Notas de acompanhamento: Aula /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 /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 /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

1.RSS Exercício: Notas de acompanhamento: Aula /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 /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 /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 Notas de acompanhamento da disciplina Tópicos especiais em informática V Renata Vieira e sandro Rigo pt Notas da aula1 ndex.htm#aula01 Assuntos tratados Aviso: aulas em laboratório ndex.htm#aula02 Troca de sala: aulas em laboratório

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

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

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]. ); }

Caso de estudo: 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

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 professor_resp int(11)Não 0 classificacao tinyint(4)Não 0 justificativa varchar(120)Não origem varchar(40)Não

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

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 premios varchar(120)Não naturalidade varchar(60)Não mini_biografia varchar(255)Não home_page varchar(120)Não varchar(120)Não sexo char(1)Não

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

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

Resumo das propostas

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

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

Exemplos de implementação

Consulta:

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 A Paixão de Jacobina Texto da sinopse: a paixão de jacobina... Home

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

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

Inserção de gênero:

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

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

Inserção de filme:

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

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

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

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

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

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

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)

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." ".$lista_[0]." "; }

Geração de RSS: Exemplo de codificação PHP: $cabecalho = ' Elementos de TI - Testes com RSS 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);

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