AJAX WEB CHAT PHP, MYSQL, JQUERY, CSS3, HTML5 BY ALISSONBORGES

Tamanho: px
Começar a partir da página:

Download "AJAX WEB CHAT PHP, MYSQL, JQUERY, CSS3, HTML5 BY ALISSONBORGES"

Transcrição

1 Sumário AJAX Web Chat (Part 1) PHP e MySQL... 2 HTML... 2 Database Schema... 5 PHP... 7 AJAX Web Chat (Part 2) CSS and jquery CSS jquery P á g i n a

2 AJAX Web Chat (Part 1) PHP e MySQL Ao discutir a comunicação em tempo real, não há muitas soluções que podem rivalizar com o poder de um web chat simples. O que é ainda melhor, é que você já tem todas as ferramentas que você precisa para criar um - seu navegador. Neste duas partes tutorial, estaremos criando um chat AJAX Web utilizando PHP, MySQL e jquery. Nesta primeira parte, iremos discutir o PHP e MySQL lado, e na próxima semana vamos continuar com o jquery e CSS front-end. HTML Como de costume, o primeiro passo é estabelecer a marcação HTML. Nosso documento está estruturado como HTML5 para maior comodidade, pois isso nos permite usar o novo, mais curto (e mais memorável) doctype, e ignorar o atributo do tipo nas tags de script. ajax-chat.html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <!-- Carregando o JScrollPane CSS, juntamente com o estilo do conversar em chat.css eo resto da página em page.css --> <link rel="stylesheet" type="text/css" href="js/jscrollpane/jscrollpane.css" /> <link rel="stylesheet" type="text/css" href="css/page.css" /> <link rel="stylesheet" type="text/css" href="css/chat.css" /> 2 P á g i n a

3 </head> <body> <div id="chatcontainer"> <div id="chattopbar" class="rounded"></div> <div id="chatlineholder"></div> <div id="chatusers" class="rounded"></div> <div id="chatbottombar" class="rounded"> <div class="tip"></div> <form id="loginform" method="post" action=""> <input id="name" name="name" class="rounded" maxlength="16" /> <input id=" " name=" " class="rounded" /> <input type="submit" class="bluebutton" value="entrar" /> </form> <form id="submitform" method="post" action=""> <input id="chattext" name="chattext" class="rounded" maxlength="255" /> <input type="submit" class="bluebutton" value="enviar" /> </form> </div> </div> 3 P á g i n a

4 <!-- Carregar jquery, o plugin mousewheel e JScrollPane, juntamente com a nosso script.js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script> <script src="js/jscrollpane/jquery.mousewheel.js"></script> <script src="js/jscrollpane/jscrollpane.min.js"></script> <script src="js/script.js"></script> </body> </html> Para otimizar o tempo de carregamento, as folhas de estilo estão incluídas na seção de cabeça, e os arquivos JavaScript no rodapé, pouco antes da tag body fechamento. Nós estamos usando o plugin JScrollPane para criar a área de rolagem com as entradas de bate-papos. Este plugin vem com seu próprio estilo, que é a primeira coisa que nós incluímos na página. A marcação do bate-papo é composto por quatro divs principais - a barra superior, o recipiente bate-papo, o container de usuário ea barra inferior. Este último tem o login e enviar formulários. A forma de envio é oculta por padrão e só aparece se o usuário tiver feito logon com sucesso no sistema de chat. 4 P á g i n a

5 Uma conversa AJAX Web com PHP, MySQL e jquery Por fim, incluímos os arquivos JavaScript. Começando com a biblioteca jquery, nós adicionamos o plugin mousewheel (usado por JScrollPane), o plugin JScrollPane si e nosso arquivo script.js. Database Schema Antes de seguir em frente com a parte PHP, primeiro temos que dar uma olhada em como os dados de bate-papo está organizada na base de dados MySQL. Para os fins deste script usamos duas tabelas. Em webchat_users estamos armazenando os participantes de bate-papo. Esta tabela tem na id, nome, gravatar e um campo last_activity. O campo de nome é definido como único, de modo que os usuários não têm nomes nick duplicados na sala de chat. 5 P á g i n a

6 Estrutura da tabela Outra característica útil dos campos de índice exclusivo, é que as consultas inserção falhará ea propriedade inserted_rows do objeto MySQLi será definido como zero se tentarmos inserir uma linha duplicada. Esta encontra seu lugar na classe PHP chat você verá na próxima etapa. A coluna last_activity tem um timestamp, que é atualizado a cada 15 segundos para cada usuário. Também é definida como um índice, por isso é mais rápido para excluir usuários inativos (com uma coluna last_activity com um valor superior a 15, significa que o usuário não é mais vendo a janela de chat). Estrutura da tabela 6 P á g i n a

7 A tabela webchat_lines detém as entradas de chat individuais. Observe que estamos armazenando o nome do autor e gravatar aqui também. Esta duplicação é que vale a pena, pois liberta-nos de usar uma junção caro ao solicitar as últimas conversas - o recurso acessados com mais frequência da aplicação. As definições dessas tabelas estão disponíveis no tables.sql no arquivo de download. Você pode executar o código em phpmyadmin para criá-los. Além disso, ao configurar o bate-papo em seu próprio país anfitrião, lembre-se de modificar ajax.php com seus bancos de dados MySQL detalhes de login. PHP Agora que temos o banco de dados no lugar, vamos começar a discutir os scripts PHP que impulsionam o chat. O primeiro arquivo, vamos dar uma olhada mais de perto, é ajax.php. Ele lida com as requisições AJAX enviados a partir do front-end jquery e saídas JSON dados formatados. ajax.php require "classes/db.class.php"; require "classes/chat.class.php"; require "classes/chatbase.class.php"; require "classes/chatline.class.php"; require "classes/chatuser.class.php"; session_name('webchat'); session_start(); if(get_magic_quotes_gpc()){ // Se magic quotes está habilitado, retirar as barras extras array_walk_recursive($_get,create_function('&$v,$k','$v = stripslashes($v);')); array_walk_recursive($_post,create_function('&$v,$k','$v = stripslashes($v);')); 7 P á g i n a

8 try{ // Conectando-se ao banco de dados DB::init($dbOptions); $response = array(); // Entrar com as ações apoiadas: switch($_get['action']){ case 'login': break; $response = Chat::login($_POST['name'],$_POST[' ']); case 'checklogged': break; $response = Chat::checkLogged(); case 'logout': break; $response = Chat::logout(); case 'submitchat': break; $response = Chat::submitChat($_POST['chatText']); case 'getusers': break; $response = Chat::getUsers(); case 'getchats': 8 P á g i n a

9 break; $response = Chat::getChats($_GET['lastID']); default: throw new Exception('Ação errada'); echo json_encode($response); catch(exception $e){ die(json_encode(array('error' => $e->getmessage()))); Por conveniência, eu usei um switch simples para definir as ações, apoiadas pelo script. Estes incluem a apresentação chat, login / logout de funcionalidade, e as ações para solicitar uma lista de chats e usuários on-line. Toda a saída está na forma de mensagens de JSON (convenientemente manipulados por jquery), e os erros são obtidas sob a forma de excepções. O interruptor rotas declaração todas as solicitações para o método estático apropriado da classe bate-papo, que discutiremos mais adiante nesta seção. DB.class.php class DB { private static $instance; private $MySQLi; private function construct(array $dboptions){ $this->mysqli new mysqli( $dboptions['db_host'], $dboptions['db_user'], $dboptions['db_pass'], $dboptions['db_name'] ); if (mysqli_connect_errno()) { throw new Exception('Database erro.'); $this->mysqli->set_charset("utf8"); 9 P á g i n a

10 public static function init(array $dboptions){ if(self::$instance instanceof self){ return false; self::$instance = new self($dboptions); public static function getmysqliobject(){ return self::$instance->mysqli; public static function query($q){ return self::$instance->mysqli->query($q); public static function esc($str){ return self::$instance->mysqli- >real_escape_string(htmlspecialchars($str)); A classe DB é o nosso gerente de banco de dados. O construtor é privado, o que significa que nenhum objeto pode ser criado a partir do exterior, ea inicialização só é possível a partir do método estático init (). É preciso uma matriz com MySQL detalhes de login, e cria uma instância da classe, realizada no self :: $ instance variável estática. Dessa forma, podemos ter certeza de que apenas uma conexão com o banco de dados pode existir no mesmo tempo. O resto das classes de tirar vantagem do método para comunicar com a base de dados de consulta estática (). ChatBase.class.php /* Esta é a classe base, usado por ambos chatline e ChatUser */ class ChatBase{ // Esse construtor é usado por todas as classes de bate-papo: public function construct(array $options){ foreach($options as $k=>$v){ 10 P á g i n a

11 if(isset($this->$k)){ $this->$k = $v; Esta é uma classe base simples. Seu objetivo principal é definir o construtor, que recebe um array com os parâmetros e salva apenas os que estão definidos na classe. ChatLine.class.php /* A ChatLine é usado para as entradas de bate-papo */ class ChatLine extends ChatBase{ protected $text = '', $author = '', $gravatar = ''; public function save(){ DB::query(" INSERT INTO webchat_lines (author, gravatar, text) VALUES ( '".DB::esc($this->author)."', '".DB::esc($this->gravatar)."', '".DB::esc($this->text)."' )"); // Retorna o objeto MySQLi da classe DB return DB::getMySQLiObject(); 11 P á g i n a

12 Aqui é a classe chatline. Estende-se ChatBase, assim você pode facilmente criar um objeto dessa classe, proporcionando uma matriz com um texto, autor e elementos Gravatar. A propriedade gravatar contém um hash md5 de da pessoa. Isso é necessário para que possamos buscar gravatar do usuário a partir gravatar.com. Essa classe também define um método save, que o objeto de nosso banco de dados. Como ele retorna o objeto MySQLi, contido na classe DB, você pode verificar se a gravação foi bemsucedida verificando a propriedade affected_rows (voltaremos a este na classe chat). ChatUser.class.php class ChatUser extends ChatBase{ protected $name = '', $gravatar = ''; public function save(){ DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ( '".DB::esc($this->name)."', '".DB::esc($this->gravatar)."' )"); return DB::getMySQLiObject(); public function update(){ DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ( '".DB::esc($this->name)."', '".DB::esc($this->gravatar)."' 12 P á g i n a

13 ) ON DUPLICATE KEY UPDATE last_activity = NOW()"); O mesmo também é válido aqui. Nós temos o nome e as propriedades gravatar (notar o modificador de acesso protected - isso significa que eles estarão acessíveis na classe ChatBase, para que possamos colocá-las no construtor). A diferença é que nós também temos um método update (), que atualiza o timestamp last_activity para o tempo atual. Isso mostra que essa pessoa mantém uma janela de batepapo aberto e é exibido como on-line na seção de usuários. Chat.class.php Part 1 /* A classe Chart exploses métodos estáticos públicos, utilizados por ajax.php */ class Chat{ public static function login($name,$ ){ if(!$name!$ ){ throw new Exception('Preencha todos os campos obrigatórios'); if(!filter_input(input_post,' ',filter_validate_ )){ throw new Exception('Seu não é válido.'); // Preparando o hash gravatar: $gravatar = md5(strtolower(trim($ ))); $user = new ChatUser(array( 'name' => $name, 13 P á g i n a

14 'gravatar' => $gravatar )); // O método save retorna um objeto MySQLi if($user->save()->affected_rows!= 1){ throw new Exception('Este nick está em uso.'); $_SESSION['user'] 'name' 'gravatar' = array( => $name, => $gravatar ); return array( 'status' => 1, 'name' 'gravatar' => $name, => Chat::gravatarFromHash($gravatar) ); public static function checklogged(){ $response = array('logged' => false); if($_session['user']['name']){ $response['logged'] = true; $response['loggedas'] = array( 'name' => $_SESSION['user']['name'], 'gravatar' => Chat::gravatarFromHash($_SESSION['user']['gravatar']) 14 P á g i n a

15 ); return $response; public static function logout(){ DB::query("DELETE FROM webchat_users WHERE name = '".DB::esc($_SESSION['user']['name'])."'"); $_SESSION = array(); unset($_session); return array('status' => 1); Este é o lugar onde todo o trabalho é feito. Lembre-se da instrução switch em ajax.php acima? Ele mapeia as acções apoiadas pelos métodos correspondentes da classe. Cada um destes métodos retorna uma matriz, tal como é posteriormente convertido para um objeto JSON com o json_encode interno () função (o que acontece na parte inferior do ajax.php). Quando o usuário faz login, o seu nome e gravatar ser salvo como elementos do array $ _SESSION, e ficam disponíveis sobre os pedidos consecutivos. Nós estaremos usando isso para validar se o usuário tem permissão para adicionar chats mais tarde. Você também pode ver como estamos preparando o hash gravatar. Isto é feito de acordo com o seu guia de melhores práticas e garante que, se a pessoa tenha configurado um Gravatar, será adequadamente exibidos. Chat.class.php Part 2 public static function submitchat($chattext){ if(!$_session['user']){ 15 P á g i n a

16 throw new Exception('Você não está logado'); if(!$chattext){ throw new Exception(' Você haven\'entrou em uma mensagem de bate-papo.'); $chat = new ChatLine(array( 'author' 'gravatar' 'text' => $_SESSION['user']['name'], => $_SESSION['user']['gravatar'], => $chattext )); // O método save retorna um objeto MySQLi $insertid = $chat->save()->insert_id; return array( 'status' => 1, 'insertid' => $insertid ); public static function getusers(){ if($_session['user']['name']){ $user = new ChatUser(array('name' => $_SESSION['user']['name'])); $user->update(); 16 P á g i n a

17 // Exclusão de chats com mais de 5 minutos e usuários inativos por 30 segundos DB::query("DELETE FROM webchat_lines WHERE ts < SUBTIME(NOW(),'0:5:0')"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),'0:0:30')"); $result = DB::query('SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18'); $users = array(); while($user = $result->fetch_object()){ $user->gravatar = Chat::gravatarFromHash($user- >gravatar,30); $users[] = $user; return array( 'users' => $users, 'total' => DB::query('SELECT COUNT(*) as cnt FROM webchat_users')->fetch_object()->cnt ); public static function getchats($lastid){ $lastid = (int)$lastid; $result = DB::query('SELECT * FROM webchat_lines WHERE id > '.$lastid.' ORDER BY id ASC'); 17 P á g i n a

18 $chats = array(); while($chat = $result->fetch_object()){ // Retornando a hora GMT (UTC), da criação de bate-papo: $chat->time = array( 'hours' 'minutes' => gmdate('h',strtotime($chat->ts)), => gmdate('i',strtotime($chat->ts)) ); $chat->gravatar = Chat::gravatarFromHash($chat- >gravatar); $chats[] = $chat; return array('chats' => $chats); public static function gravatarfromhash($hash, $size=23){ return 'http://www.gravatar.com/avatar/'.$hash.'?size='.$size.'&default='. urlencode('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb ?size='.$size); Como você vai ver em a próxima parte da este tutorial, jquery envia uma getusers () o solicitem cada 15 segundos. Nós estamos usando esse para excluir chats mais velho do que 5 minutos e usuários inativos a partir da banco de dados. Nós poderíamos, potencialmente, excluir esses registros em getchats, mas que é solicitado uma vez a cada segundo e o tempo de processamento extra poderia impactar severamente o desempenho de o nosso app. 18 P á g i n a

19 Outra coisa pena notar, é que, no método getchats (), nós estamos usando a função de gmdate para a saída de um tempo GMT. In o frontend, nós usar os horas e minuto valores para alimentar o objeto de data JavaScript, e, como resultado de todas as vezes são exibidos em tempo local do usuário. 19 P á g i n a

20 Fazer um AJAX Web Chat (Part 2) CSS and jquery Na segunda parte deste tutorial em duas partes, estaremos criando o jquery e CSS final frente ao nosso Web chat AJAX. Na primeira parte, discutimos a PHP e MySQL lado. Agora vamos continuar de onde paramos da última vez. Os estilos de bate-papo são auto-suficientes e residem em chat.css. Estes estilos são independentes do restante da página, por isso é mais fácil de incorporar a janela de chat em um site existente. Você só precisa incluir a marcação HTML discutimos na semana passada, e incluem a folha de estilo e arquivos JavaScript. CSS chat.css - Parte 1: /* Principal recipiente bate-papo */ #chatcontainer{ width:510px; margin:100px auto; position:relative; /* Barra de Início (Top bar)*/ 20 P á g i n a

21 #chattopbar{ height:40px; background:url('../img/solid_gray.jpg') repeat-x #d0d0d0; border:1px solid #fff; margin-bottom:15px; position:relative; color:#777; text-shadow:1px 1px 0 #FFFFFF; #chattopbar.name{ position:absolute; top:10px; left:40px; #chattopbar img{ left:9px; position:absolute; top:8px; /* Bate-papo (Chats) */ #chatlineholder{ height:360px; width:350px; margin-bottom:20px; outline:none;.chat{ background:url('../img/chat_line_bg.jpg') repeat-x #d5d5d5; min-height:24px; padding:6px; border:1px solid #FFFFFF; padding:8px 6px 4px 37px; position:relative; margin:0 10px 10px 0;.chat:last-child{ margin-bottom:0; 21 P á g i n a

22 .chat.gravatar{ background:url('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9 bb ?size=23') no-repeat; left:7px; position:absolute; top:7px;.chat img{ display:block; visibility:hidden; Começamos por denominar o div # chatcontainer. Centrada na página horizontalmente, com a ajuda de uma margem de automática. Como você viu na parte anterior do tutorial, esta div é dividido em uma barra superior, área de chats, área do usuário, e na barra inferior. A barra superior mostra as informações de login do usuário. É atribuído um posicionamento relativo de modo a que o botão avatar, nome e sair podem ser posicionados em conformidade. Depois vem o div que contém todos os chats - # chatlineholder. Esta div tem uma largura fixa e altura, e como você vai ver na parte jquery deste tutorial, estamos usando o plugin JScrollPane para transformá-lo em uma área de rolagem de fantasia com barras laterais personalizados. 22 P á g i n a

23 chat.css Part 2 /* Área do Usuário */ #chatusers{ background-color:#202020; border:1px solid #111111; height:360px; position:absolute; right:0; top:56px; width:150px; #chatusers.user{ 23 P á g i n a

24 background:url('http://www.gravatar.com/avatar/ad516503a11cd5ca435ac c9bb ?size=30') no-repeat 1px 1px #444444; border:1px solid #111111; float:left; height:32px; margin:10px px; width:32px; #chatusers.user img{ border:1px solid #444444; display:block; visibility:hidden; /* Bottom Bar */ #chatbottombar{ background:url('../img/solid_gray.jpg') repeat-x #d0d0d0; position:relative; padding:10px; border:1px solid #fff; #chatbottombar.tip{ position:absolute; width:0; height:0; 24 P á g i n a

25 border:10px solid transparent; border-bottom-color:#eeeeee; top:-20px; left:20px; #submitform{ display:none; Na segunda parte, o estilo do recipiente e as divs do usuário #chatusers. Cada usuário de bate-papo ativo é representado por um ícone de 32 por 32 px (gravatar). O único efeito é definido como um fundo, e quando as imagens de fundo reais são carregadas, que são mostrados de cima delas. Isso impede que a cintilação irritante que geralmente ocorreria antes da imagem ser carregada. O resto do código trata da barra inferior e as formas de enviar. Você pode achar interessante a forma como o div. A Dica é transformar em um triângulo CSS puro utilizando uma altura zero e largura, junto com um valor grande na fronteira. Eu já usei esse truque em tutoriais anteriores. chat.css Part 3 /* Substituindo os estilos padrão de JScrollPanel*/.jspVerticalBar{ background:none; width:20px;.jsptrack{ background-color:#202020; border:1px solid #111111; 25 P á g i n a

26 width:3px; right:-10px;.jspdrag { background:url('../img/slider.png') no-repeat; width:20px; left:-9px; height:20px!important; margin-top:-5px;.jspdrag:hover{ background-position:left bottom; /* Estilos adicionais */ #chatcontainer.bluebutton{ background:url('../img/button_blue.png') no-repeat; border:none!important; color:#516d7f!important; display:inline-block; font-size:13px; height:29px; text-align:center; text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4); width:75px; margin:0; 26 P á g i n a

27 cursor:pointer; #chatcontainer.bluebutton:hover{ background-position:left bottom; Na última parte do código, substituir o estilo padrão da div JScrollPane. Por padrão, ele é mostrado com barras de rolagem roxo, o que não é muito apropriado para o nosso projeto. Em vez de codificação nosso próprio estilo a partir do zero, nós apenas incluir o default e substituir algumas das regras. Finalmente, você pode ver os estilos do botão azul. Pode-se atribuir essa classe a qualquer âncora regular ou botão, e você terá um botão azul bonito. jquery Movendo-se para a última etapa deste tutorial - o código jquery. O chat funciona através de escuta para eventos de login e enviar formulários (eo botão de logout), e com o agendamento do pedido AJAX de volta para o servidor para verificação de novas conversas e usuários. Como você viu na primeira parte do tutorial, na semana passada, no lado do PHP as requisições AJAX são manipulados por ajax.php. questões jquery um número de requisições AJAX: Registrando um usuário: isso é feito por uma única solicitação POST; Registrando um usuário fora: também uma única solicitação POST; Verificação para usuários logados: isso é feito uma vez a cada 15 segundos; Verificação de novos chats: uma requisição GET é disparado a cada segundo. Isso poderia significar uma carga pesada em seu servidor, é por isso que o script é otimizado no back-end, e dependendo da atividade do bate-papo, os pedidos são reduzidos para um a cada 15 segundos. 27 P á g i n a

28 Como você vai ver no código abaixo, temos definido wrapper personalizado para jquery $.get e $.post. que vai nos ajudar em não ter que preencher todos os parâmetros longos para a emissão de um pedido. Além disso, todo o código de bate-papo está organizada em um único objeto chamado chat. Trata-se de uma série de métodos úteis, que você vai ver nos fragmentos abaixo. script.js Part 1 $(document).ready(function(){ chat.init(); ); var chat = { // dados contém variáveis para uso na classe: data : { lastid : 0, noactivity : 0, // Init liga ouvintes de evento e configura timers: init : function(){ // Usa o plugin jquery texto padrão, incluídos na parte inferior: $('#name').defaulttext('nickname'); $('# ').defaulttext(' (Gravatars are Enabled)'); // Convertendo o div #chatlineholder em um JScrollPane, // e salvar API do plugin em chat.data: chat.data.jspapi = $('#chatlineholder').jscrollpane({ 28 P á g i n a

29 verticaldragminheight: 12, verticaldragmaxheight: 12 ).data('jsp'); // Nós usamos a variável trabalhando para evitar // vários envios de formulários: var working = false; // Registrando uma pessoa no bate-papo: $('#loginform').submit(function(){ if(working) return false; working = true; // Usando a nossa função tzpost wrapper function // (definido em baixo): $.tzpost('login',$(this).serialize(),function(r){ working = false; if(r.error){ chat.displayerror(r.error); else chat.login(r.name,r.gravatar); ); ); return false; O objetivo do método init () é ligar todos os manipuladores de eventos para o bate-papo e começar as funções de tempo de espera que são usados para programar as verificações para novas conversas e usuários on-line. Você pode ver que nós usamos nossas próprias funções 29 P á g i n a

30 wrapper - $.tzget and $.tzpost. Estes levantar o fardo de ter que especificar uma longa lista de parâmetros e metas para as solicitações do Ajax. script.js Part 2 // Enviar uma nova entrada de bate-papo: $('#submitform').submit(function(){ var text = $('#chattext').val(); if(text.length == 0){ return false; if(working) return false; working = true; // Atribuir um ID temporário para o bate-papo: var tempid = 't'+math.round(math.random()* ), params = { id author gravatar : tempid, : chat.data.name, : chat.data.gravatar, text : text.replace(/</g,'<').replace(/>/g,'>') ; // Usando nosso método addchatline para adicionar o bate-papo // a tela imediatamente, sem esperar // o pedido AJAX para completar: 30 P á g i n a

31 chat.addchatline($.extend({,params)); // Usando o nosso método de invólucro tzpost para enviar o bate-papo // através de uma solicitação POST AJAX: $.tzpost('submitchat',$(this).serialize(),function(r){ working = false; $('#chattext').val(''); $('div.chat-'+tempid).remove(); ); params['id'] = r.insertid; chat.addchatline($.extend({,params)); return false; ); // Desligar o usuário: $('a.logoutbutton').live('click',function(){ $('#chattopbar > span').fadeout(function(){ ); $(this).remove(); $('#submitform').fadeout(function(){ ); $('#loginform').fadein(); $.tzpost('logout'); 31 P á g i n a

32 return false; ); // Verificar se o usuário já está conectado (browser actualização) $.tzget('checklogged',function(r){ if(r.logged){ chat.login(r.loggedas.name,r.loggedas.gravatar); ); // Auto executar funções de tempo limite (function getchatstimeoutfunction(){ )(); chat.getchats(getchatstimeoutfunction); (function getuserstimeoutfunction(){ )(); chat.getusers(getuserstimeoutfunction);, Na segunda parte do script, vamos continuar com ouvintes de eventos de ligação. No formulário, você pode ver que quando o usuário adiciona um novo bate-papo, um temporário é criado e mostrado imediatamente, sem esperar que o pedido AJAX para ser concluído. Uma vez que a escrita tenha completado, o papo temporária é removida da tela. Isso dá aos usuários a sensação de que o bate-papo é muito rápido, enquanto o verdadeiro gravação é feita em segundo plano. Perto do fim do método init, corremos dois executores funções nomeadas auto. As próprias funções são passados como parâmetros para o respectivo chat.getchats () ou chat.getusers () método, de modo que o tempo limite adicionais podem ser programados (você pode ver isso na parte 5 do código). 32 P á g i n a

33 script.js Part 3 // O método de login esconde exibe os // doados de login do usuário e mostra o formulário de envio login : function(name,gravatar){ chat.data.name = name; chat.data.gravatar = gravatar; $('#chattopbar').html(chat.render('logintopbar',chat.data)); $('#loginform').fadeout(function(){ $('#submitform').fadein(); $('#chattext').focus(); );, // O método de renderização gera a marcação HTML // que é necessário para os outros métodos: render : function(template,params){ var arr = []; switch(template){ case 'logintopbar': arr = [ '<span><img src="',params.gravatar,'" width="23" height="23" />', '<span class="name">',params.name, 33 P á g i n a

34 rounded">logout</a></span>']; break; '</span><a href="" class="logoutbutton case 'chatline': arr = [ '<div class="chat chat-',params.id,' rounded"><span class="gravatar">'+ '<img src="',params.gravatar,'" width="23" height="23" '+ 'onload="this.style.visibility=\'visible\'" />', '</span><span class="author">',params.author, ':</span><span class="text">',params.text, '</span><span class="time">',params.time,'</span></div>']; break; case 'user': arr = [ '<div class="user" title="',params.name,'"><img src="',params.gravatar, '" width="30" height="30" onload="this.style.visibility=\'visible\'"'+ ' /></div>' ]; break; 34 P á g i n a

35 //concatenações // A única junção matriz é mais rápido do que várias return arr.join('');, Aqui, o método render () merece mais de nossa atenção. O que faz, é montar um modelo, dependendo do parâmetro molde passado. O método então cria e retorna o código HTML solicitado, incorporando os valores do segundo parâmetro - os Parâmetros objeto como necessário. Isto é utilizado pela maioria dos outros métodos aqui discutidos. script.js Part 4 // O método addchatline adicionar uma entrada de bate-papo para a //página. addchatline : function(params){ // Todos os horários são exibidos no fuso horário do usuário var d = new Date(); if(params.time) { // PHP retorna a hora em UTC (GMT). Vamos utilizá-lo //para alimentar o data // objeto e depois mostrar em fuso horário do usuário. // JavaScript e converte e para nós. d.setutchours(params.time.hours,params.time.minutes); params.time = (d.gethours() < 10? '0' : '' ) + d.gethours()+':'+ 35 P á g i n a

36 (d.getminutes() < 10? '0':'') + d.getminutes(); var markup = chat.render('chatline',params), exists = $('#chatlineholder.chat-'+params.id); if(exists.length){ exists.remove(); if(!chat.data.lastid){ / / Se este for o primeiro de chat, remover o parágrafo: $('#chatlineholder p').remove(); // Se isto não é um bate-papo temporário: if(params.id.tostring().charat(0)!= 't'){ var previous = $('#chatlineholder.chat-'+(+params.id - 1)); if(previous.length){ previous.after(markup); else chat.data.jspapi.getcontentpane().append(markup); else chat.data.jspapi.getcontentpane().append(markup); // Como nós adicionamos novos conteúdos, precisamos // reinicializar o plugin JScrollPanel: chat.data.jspapi.reinitialise(); 36 P á g i n a

37 chat.data.jspapi.scrolltobottom(true);, O método addchat () leva um objeto de parâmetro com o conteúdo do bate-papo, o autor e gravatar, e insere a nova linha de bate-papo em local apropriado no # chatcontainer div. Cada chat (se não for um temporário) tem uma identificação única que é atribuído pelo MySQL. Essa identificação é atribuído como um nome de classe para o bate-papo na forma de chat-123. Quando o método addchat () é executado, ele verifica se existe a entrada de bate-papo anterior (para chat-123 que iria verificar chat-122). Se ela existe, ele insere o novo bate-papo depois. Se isso não acontecer, ele só acrescenta à div. Esta técnica simples consegue inserir todos os bate-papos na ordem certa e mantê-los dessa forma. Tempo em fuso horário do Usuário script.js Part 5 // Este método solicita as últimas conversas // (desde lastid), e as adiciona à página. getchats : function(callback){ $.tzget('getchats',{lastid: chat.data.lastid,function(r){ for(var i=0;i<r.chats.length;i++){ chat.addchatline(r.chats[i]); 37 P á g i n a

38 if(r.chats.length){ chat.data.noactivity = 0; chat.data.lastid = r.chats[i-1].id; else{ // Se não foram recebidas conversas, incremento // o contador noactivity. chat.data.noactivity++; if(!chat.data.lastid){ chat.data.jspapi.getcontentpane().html('<p class="nochats">no chats yet</p>'); // A definição de um limite de tempo para a próxima // solicitação, dependendo da atividade de bate-papo: var nextrequest = 1000; // 2 segundos if(chat.data.noactivity > 3){ nextrequest = 2000; if(chat.data.noactivity > 10){ nextrequest = 5000; 38 P á g i n a

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

Bool setcookie (string nome [, string valor [, int validade [, string caminho [, string dominio [, int seguro]]]]] )

Bool setcookie (string nome [, string valor [, int validade [, string caminho [, string dominio [, int seguro]]]]] ) Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade

Leia mais

Desenvolvimento de Aplicações para Internet Aula 11

Desenvolvimento de Aplicações para Internet Aula 11 Desenvolvimento de Aplicações para Internet Aula 11 Celso Olivete Júnior olivete@fct.unesp.br www.fct.unesp.br/docentes/dmec/olivete jquery Na aula passada: Selecionando atributos Manipulando CSS Inserindo

Leia mais

Iniciando com Zend_Auth By Rob Allen, www.akrabat.com Document Revision 1.0.8 Copyright 2007

Iniciando com Zend_Auth By Rob Allen, www.akrabat.com Document Revision 1.0.8 Copyright 2007 Iniciando com Zend_Auth By Rob Allen, www.akrabat.com Document Revision 1.0.8 Copyright 2007 Este tutorial é destinado a oferecer uma bem básica introdução para o uso do componente Zend_Auth com o Zend

Leia mais

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples. Não vou adentrar a explicação de código, vou postando as estruturas

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 6 PHP: Include, Require, Variáveis de ambiente Prof. Teresinha Letícia da Silva leticiasfw@yahoo.com.br Inclusão de arquivos com Include e Require no PHP Uma técnica muito

Leia mais

Programação Web com PHP. Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web

Programação Web com PHP. Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web Programação Web com PHP Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web Agenda O que é PHP? O que da pra fazer com PHP? Como a web funciona? Onde, quando e por que

Leia mais

English Português. By erickalves 25 Julho, 2009-01:08. Devido à política (#) de segurança. Encontrar Blogs Crie o seu blog de graça Ganhe prêmios

English Português. By erickalves 25 Julho, 2009-01:08. Devido à política (#) de segurança. Encontrar Blogs Crie o seu blog de graça Ganhe prêmios Encontrar Blogs Crie o seu blog de graça Ganhe prêmios English Português Cel: +55 (21) 7417-9918 E-mail: erick@lithic.com.br Inserindo dados no banco em PHP + Ajax + jquery + Mysql + Validação (/pt-br/blog/tutoriais

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Edição de Setembro. Validação formulários com PHP. ... revistamensal de programação Open Source

Edição de Setembro. Validação formulários com PHP. ... revistamensal de programação Open Source Edição de Setembro... revistamensal de programação Open Source Apresentação Quem somos Submeter Pesquisar Serviços Contactos Artigo 4 / 58 Selecione o artigo pretendido Validação formulários com PHP Artigos

Leia mais

Prof Evandro Manara Miletto. parte 2

Prof Evandro Manara Miletto. parte 2 Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Estudo Dirigido - Parte 1

Estudo Dirigido - Parte 1 Linguagem Java para Web - JSP Professora Lucélia Estudo Dirigido - Parte 1 Na primeira parte deste tutorial, vamos receber os dados de um formulário e verificar se os dados foram ou não preenchidos. Se

Leia mais

files, que devolve um objeto do tipo FileList.

files, que devolve um objeto do tipo FileList. WEB STORAGE 199 7.4.3 FILE API A File API foi introduzida para nos fornecer maior flexibilidade no acesso ao conteúdo de ficheiros a partir de uma página HTML. Por predefinição, o acesso a um ficheiro

Leia mais

13 Conectando PHP com MySQL 13.1 Introdução

13 Conectando PHP com MySQL 13.1 Introdução 13 Conectando PHP com MySQL 13.1 Introdução Agora que você já tem uma idéia básica de comandos MySQL, poderemos ver como a linguagem PHP pode interagir com este banco de dados através de inúmeras funções.

Leia mais

R E L A T Ó R I O D A A P R E S E N T A Ç Ã O J Q U E R Y

R E L A T Ó R I O D A A P R E S E N T A Ç Ã O J Q U E R Y R E L A T Ó R I O D A A P R E S E N T A Ç Ã O J Q U E R Y SI S TE MAS D IS TR I BUÍD O S E TO LERÂ NC IA A FA L HA S Ângelo Santos M 4189 André Elias M4272 ÍNDICE Arquitectura e funcionamento... 3 Ferramentas...

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir Linguagem PHP Cookie e Sessão @wre2008 1 Sumário Header; Cookie; Sessão; Exemplos. @wre2008 2 Header Esta função permite que um script php redirecione para outra página.

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload:

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload: Upload de vários arquivos com PHP 22.856 visualizações 2 1 Fala pessoal, hoje irei ensinar a fazer upload de vários arquivos de uma vez, ou seja, ao invés de criar apenas um campo para o usuário selecionar

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete)

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) Desenvolvimento de Sistemas Web Prof. Leandro Roberto Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) JavaScript Eventos Alguns eventos de uma página HTML podem ser interceptados e programados

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1. PHP e MySQL O MySQL é o gerenciador de banco de dados mais usado com o PHP. Existem muitas

Leia mais

<link rel=stylesheet type=text/css href=imagens.css /> Este código é responsável pela visualização html. exibição de Imagens

Leia mais

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

Controle de acesso. http://www.larback.com.br. .com.br

Controle de acesso. http://www.larback.com.br. .com.br http://www.larback Controle de acesso Construiremos um sistema simples para cadastro de links. O sistema terá uma página pública (onde serão exibidos os links) e uma área administrativa, onde os usuários

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Formulários. Curso de PHP e MySQL EAD Moodle Desenvolvido e ministrado por William Hamilton dos Santos UTFPR

Formulários. Curso de PHP e MySQL EAD Moodle Desenvolvido e ministrado por William Hamilton dos Santos UTFPR Formulários Há várias maneiras de se criar um formulário na web, porém, é preciso considerar vários fatores para que este formulário não seja apenas uma página com um amontoado de campos, mas sim a porta

Leia mais

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados:

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: Livro de Visitas Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: ID nome email mensagem data O código

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

Leia mais

Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Sessions e Cookies progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Cookies e Sessions Geralmente, um bom projeto

Leia mais

PHP é um acrónimo para Hypertext Preprocessor.

PHP é um acrónimo para Hypertext Preprocessor. PHP 101 O que é o PHP? PHP é um acrónimo para Hypertext Preprocessor. É uma linguagem de scripting open-source que funciona do lado do servidor e é usada para gerar páginas web dinâmicas. Os scripts de

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução App de exemplo Implementação do exemplo Testes realizados

Leia mais

jquery André Tavares da Silva andre.silva@udesc.br

jquery André Tavares da Silva andre.silva@udesc.br jquery André Tavares da Silva andre.silva@udesc.br jquery jquery é uma biblioteca em JavaScript; Seu objetivo é simplificar a programação em JavaScript; jquery foi desenvolvida para ser de aprendizado

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

Trabalhando com conexão ao banco de dados MySQL no Lazarus. Prof. Vitor H. Migoto de Gouvêa Colégio IDESA 2011

Trabalhando com conexão ao banco de dados MySQL no Lazarus. Prof. Vitor H. Migoto de Gouvêa Colégio IDESA 2011 Trabalhando com conexão ao banco de dados MySQL no Lazarus Prof. Vitor H. Migoto de Gouvêa Colégio IDESA 2011 Edição 4 O Componente Trabalhando com conexão ao banco de dados MySQL no Lazarus Ano: 03/2011

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução App de exemplo Implementação do exemplo Testes realizados

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Utilizando Janelas e Frames

Utilizando Janelas e Frames Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já

Leia mais

PROJETO PEDAGÓGICO DE CURSOS

PROJETO PEDAGÓGICO DE CURSOS 1 de 6 PROJETO PEDAGÓGICO DE CURSOS BURITREINAMENTOS MANAUS-AM NOVEMBRO / 2014 2 de 6 PACOTES DE TREINAMENTOS BURITECH A Buritech desenvolveu um grupo de pacotes de treinamentos, aqui chamados de BuriPacks,

Leia mais

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004 DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis

Leia mais

Autor: Ricardo Francisco Minzé Júnior - ricardominze@yahoo.com.br Desenvolvendo aplicações em camadas com PHP 5.

Autor: Ricardo Francisco Minzé Júnior - ricardominze@yahoo.com.br Desenvolvendo aplicações em camadas com PHP 5. Desenvolvendo aplicações em camadas com PHP 5. Talvez a primeira vista você ache estranha a palavra Camada em programação, mas o que vem a ser Camada? Segundo o dicionário: Camada 1 - Qualquer matéria

Leia mais

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando

Leia mais

foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX

foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX é uma biblioteca Java Script crossbrowser desenvolvida para simplificar os scripts que interagem com a linguagem

Leia mais

Interagindo com Banco de Dados

Interagindo com Banco de Dados Interagindo com Banco de Dados Até agora não falamos de banco de dados, pois gostaríamos prime iro de te preparar para o uso do banco de dados dentro do Framework MVC. Mas antes de falarmos do framework

Leia mais

Fundamentos de Ajax e o Modelo DOM

Fundamentos de Ajax e o Modelo DOM Fundamentos de Ajax e o Modelo DOM Introdução O Ajax é uma nova tecnologia em ascensão e, embora o Ajax seja incontestavelmente atual, ele não é realmente novo. Ajax não é por si só tecnologia, mas sim

Leia mais

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro.

Material de apoio a aulas de Desenvolvimento Web. Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS. AAS - www.aas.pro. Material de apoio a aulas de Desenvolvimento Web Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS AAS - www.aas.pro.net Março-2012 Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo

Leia mais

GUIA PHP com MYSQL Autor: Everton Mendes Messias

GUIA PHP com MYSQL Autor: Everton Mendes Messias PHP (Hypertext Preprocessor) : Linguagem de programação interpretada. Tags PHP: phpinfo(); Comentários: //, # - comentário de uma linha /* comentário de várias linhas */ GUIA PHP com MYSQL Autor: Everton

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

Repeater no GASweb. Regiões

Repeater no GASweb. Regiões Repeater no GASweb Por: Rodrigo Silva O controle de servidor Repeater é um container básico que permite a você criar uma lista de qualquer informação que deseja em uma página Web. Ele não tem uma aparência

Leia mais

PHP. Hypertext Pre-Processor

PHP. Hypertext Pre-Processor PHP Hypertext Pre-Processor O que é o PHP? Uma linguagem de scripting é uma linguagem cujo código não tem de ser compilado para ser executado! O código escrito é interpretado em tempo de execução para

Leia mais

Unidade 7: PopUp e Validação de Formulário

Unidade 7: PopUp e Validação de Formulário Programação para Internet Rica 1 Unidade 7: PopUp e Validação de Formulário com CSS/JavaScript Prof. Daniel Caetano Objetivo: Capacitar o aluno para o uso de javascript para manipular o CSS e na validação

Leia mais

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda PROGRAMAÇÃO PARA INTERNET Introdução à AJAX Fonte: Raul Paradeda INTRODUÇÃO Para entender o que é o AJAX é necessário ter o prévio conhecimento de: HTML / XHTML; Javascript; CSS; XML. INTRODUÇÃO Ao pesquisar

Leia mais

Universidade Federal de Viçosa CPD - Central de Processamento de Dados Divisão de Desenvolvimento de Sistemas

Universidade Federal de Viçosa CPD - Central de Processamento de Dados Divisão de Desenvolvimento de Sistemas Universidade Federal de Viçosa CPD - Central de Processamento de Dados Divisão de Desenvolvimento de Sistemas Manual de padrões e convenções para desenvolvimento de sistemas PHP Versão Conteúdo 1.

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

6. Introdução à Linguagem PHP

6. Introdução à Linguagem PHP 6. Introdução à Linguagem PHP A comunicação na Web exige dois agentes: o cliente web e o servidor web. O cliente requer informação (a partir de uma página HTML acessada pelo navegador) e o servidor fornece

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico

Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico Editora Carlos A. J. Oliviero Faça um Site PHP 5.2 com MySQL 5.0 Comércio Eletrônico Orientado por Projeto 1a Edição 2 Reimpressão São Paulo 2011 Érica Ltda. Noções Livrarse Preparação muitas muita Sumário

Leia mais

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar links em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.

Leia mais

AULA APLICAÇÕES PARA WEB SESSÕES E LOGIN E SENHA

AULA APLICAÇÕES PARA WEB SESSÕES E LOGIN E SENHA Sumário Construção de sistema Administrativo... 1 Sistema de Login... 2 SQL INJECTION... 2 Técnicas para Evitar Ataques... 2 Formulário de Login e Senha fará parte do DEFAULT... 5 LOGAR... 5 boas... 6

Leia mais

Conceitos de extensões Joomla!

Conceitos de extensões Joomla! capítulo 1 Conceitos de extensões Joomla! Entendendo o que é extensão Extensão pode ser entendida como uma pequena aplicação desenvolvida com regras de construção estabelecidas pelo ambiente Joomla!. É

Leia mais

CAPITULO 5 COMANDO DE FLUXO IF

CAPITULO 5 COMANDO DE FLUXO IF CAPITULO 5 COMANDO DE FLUXO IF Sempre que for necessária a tomada de decisão dentro de um programa, você terá que utilizar um comando condicional, pois é por meio dele que o PHP decidirá que lógica deverá

Leia mais

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec Guia de Consulta Rápida PHP com XML Juliano Niederauer Terceira Edição Novatec Copyright 2002 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida

Leia mais

Universidade Da Beira Interior

Universidade Da Beira Interior 1 Universidade Da Beira Interior Sistemas Distribuídos e Tolerância a Falhas Estudo da Tecnologia jquery Tiago Simões m3965 João Pereira m3873 12 De Março de 2011 2 Conteúdo 1. Apresentação da tecnologia...

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC Home Page da Estação Automática do IF-SC Ana Paula Jorge Fraga Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com Kathilça Lopes de Souza E-mail: kathii16@hotmail.com Rayana

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Manual de Integração Via Gadget. Passo a passo para realizar a integração entre websites e a plataforma Virtual Target.

Manual de Integração Via Gadget. Passo a passo para realizar a integração entre websites e a plataforma Virtual Target. Manual de Integração Via Gadget Passo a passo para realizar a integração entre websites e a plataforma Virtual Target. Manual de Integração Via Gadget 1. Introdução 1.1. O que é? Virtual Target Gadgets

Leia mais

22/05/2012 CRIANDO UM PROJETO COM TELAS ESTRUTURA DA APLICAÇÃO LOGIN BANCO DE DADOS TAREFAS PHP MYSQL PARTE 2

22/05/2012 CRIANDO UM PROJETO COM TELAS ESTRUTURA DA APLICAÇÃO LOGIN BANCO DE DADOS TAREFAS PHP MYSQL PARTE 2 CRIANDO UM PROJETO COM TELAS Páginas com formulário Acesso ao banco de dados PHP MYSQL PARTE 2 Luciana Balieiro Cosme ESTRUTURA DA APLICAÇÃO LOGIN BANCO DE DADOS # Coluna Nome e Tipo 1 codigo int(11) AUTO_INCREMENT

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Diazo. Módulo 7 Tema Diazo

Diazo. Módulo 7 Tema Diazo Diazo Módulo 7 Tema Diazo Diazo >> O que é? É uma ferramenta para criação de temas. Permite que o designer construa um tema puramente HTML, sem se preocupar com as particularidades do Plone. Funciona através

Leia mais

Guia do RepositorioDocumento

Guia do RepositorioDocumento Módulo: RepositorioDocumento.Cls_Repositorio Versão: 1.0.0 Data: 16/05/2003 Analista: João Augusto de Moura DBA: Maria Cristina de Oliveira Zimmermann Coordenador: Alex Albert Henchel Gerente Operacional:

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Principais características Página dentro de página Transições

Leia mais

JavaScript (Funções, Eventos e Manipulação de Formulários)

JavaScript (Funções, Eventos e Manipulação de Formulários) Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Ajax Asynchronous JavaScript and Xml

Ajax Asynchronous JavaScript and Xml Ajax Asynchronous JavaScript and Xml Ajax permite construir aplicações Web mais interativas, responsivas, e fáceis de usar que aplicações Web tradicionais. Numa aplicação Web tradicional quando se prime

Leia mais

www.coldfusionbrasil.com.br

www.coldfusionbrasil.com.br www.coldfusionbrasil.com.br 2000 PASSANDO VARIÁVEIS ATRAVÉS DE FORM E URL 3 ALTERA.CFM 3 FORMALTERA.CFM 4 ALTERA.CFM 4 FORMALTERA.CFM 4 CRIANDO E MANIPULANDO VARIÁVEIS COM CFSET 4 VALORES ESTÁTICOS 5 PARÂMETROS

Leia mais

SISTEMA GERENCIAMENTO DE PRODUTOS PHP E MySQL 1. APRESENTAÇÃO

SISTEMA GERENCIAMENTO DE PRODUTOS PHP E MySQL 1. APRESENTAÇÃO SISTEMA GERENCIAMENTO DE PRODUTOS PHP E MySQL 1. APRESENTAÇÃO Este é um sistema de controle de produtos, onde o usuário irá entrar com o login e a senha, e se ele for um usuário cadastrado na tabela usuários

Leia mais

Framework MIOLO 2.5 Tutorial: Criando um módulo

Framework MIOLO 2.5 Tutorial: Criando um módulo Framework MIOLO 2.5 Tutorial: Criando um módulo Versão 2011.1.oracle CGCO/UFJF Framework MIOLO 2.5 Tutorial: Criando um módulo 1. Introdução O processo de desenvolvimento de aplicações com o MIOLO possui

Leia mais

Personalizando o Dreamweaver

Personalizando o Dreamweaver Personalizando o Dreamweaver - Acessando o painel de Preferências: O painel de preferências possui todas as configurações que o Dreamweaver oferece. Para quem é usuário de PC, poderá acessar pelo menu

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal.

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal. MANUAL DO SISCOOP Sumário 1 Menu de Navegação... 3 2 Gerenciar País... 5 3- Gerenciamento de Registro... 8 3.1 Adicionar um registro... 8 3.2 Editar um registro... 10 3.3 Excluir um registro... 11 3.4

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:

Leia mais

PHP (Seções, Cookies e Banco de Dados)

PHP (Seções, Cookies e Banco de Dados) PHP (Seções, Cookies e Banco de Dados) André Tavares da Silva andre.silva@udesc.br Seções Basicamente, as seções são métodos que preservam determinados dados ativos enquanto o navegador do cliente estiver

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

Leia mais