revisão fapesp
TRANSCRIPT
UNIVERSIDADE ESTADUAL PAULISTA
JULIO DE MESQUITA FILHO
Faculdade de Ciencias e Tecnologia
Presidente Prudente - Sao Paulowww.fct.unesp.br
REVISAO BIBLIOGRAFICA - FAPESP
Tıtulo: Plataforma Web para auxılio ao ensino de processamento de
imagens
Bolsista: Lenon Fachiano Silva
Orientador: Prof. Dr. Celso Olivete Junior
Colaborador: Prof. Dr. Rogerio Eduardo Garcia
Orgao Financiador: FAPESP
Processo: 2012/06844-3
Vigencia: 01/07/2012 a 30/04/2013
Relatorio Cientıfico Parcial referente as atividades realizadas pelo bolsista
de Iniciacao Cientıfica no perıodo de Julho de 2012 a novembro de 2012.
Presidente Prudente,
Novembro de 2012
Sumario
1 Introducao 1
2 World Wide Web e HTML 2
3 CSS 6
4 JavaScript e jQuery 10
5 MySQL 17
6 PHP 20
7 AJAX 31
i
Lista de Figuras
1 Exemplo de pagina HTML basica . . . . . . . . . . . . . . . . . 3
2 Partes de uma regra CSS . . . . . . . . . . . . . . . . . . . . . 6
3 Exemplo de seletores CSS . . . . . . . . . . . . . . . . . . . . . 7
4 Exemplo de script no HTML . . . . . . . . . . . . . . . . . . . 12
5 Exemplo de variavel JavaScript . . . . . . . . . . . . . . . . . 13
6 Linha de comando do MySQL . . . . . . . . . . . . . . . . . . 18
7 MySQL Workbench . . . . . . . . . . . . . . . . . . . . . . . . . 19
8 PHPMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
9 Conexao com Banco de Dados . . . . . . . . . . . . . . . . . . 22
10 Insercao em uma Tabela . . . . . . . . . . . . . . . . . . . . . 25
11 Metodo GET . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
12 Metodo POST . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
13 Lena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
14 Redimensionamento . . . . . . . . . . . . . . . . . . . . . . . . 29
15 Imagem em tons de cinza . . . . . . . . . . . . . . . . . . . . . 30
16 Modelo Classico vs AJAX . . . . . . . . . . . . . . . . . . . . 31
17 Sincronismo vs Assincronismo . . . . . . . . . . . . . . . . . . 32
18 Criacao do objeto XMLHttpRequest . . . . . . . . . . . . . . . . 34
ii
Lista de Siglas e Abreviaturas
AJAX - Asynchronous JavaScript and XML
ANSI - American National Standards Institute
CERN - Laboratorio Europeu de Partıculas
CSS- Cascading Style Sheets
DOM - Modelo de Objeto de Documento
ECMA - European Computer Manufacturer’s Association
FI - Form Interpreter
GPL - General Public License de GNU
HTML - HyperText Markup Language
HyTime - Hypermedia/Time-based Document Structuring Language
ISO - International Organization for Standardization
LGPL - GNU Lesser General Public License
MIME- Extensoes Multifuncao para Mensagens de Internet
PHP - Hypertext Preprocessor
SGBD - Sistema Gerenciador de Banco de Dados
SGML - Standard Generalized Markup Language
SQL - Structured Query Language
TCO - Custo Total de Propriedade
URL - Uniform Resource Locator
W3C - World Wide Web Consortium
Web - World Wide Web
WWW - World Wide Web
XML - Extensible Markup Language
iii
1 Introducao
O presente documento tem por objetivo apresentar uma revisao das tecnolo-
gias utilizadas no desenvolvimento da plataforma web.
1
2 World Wide Web e HTML
A World Wide Web surgiu de uma proposta de Tim Bernes-Lee (Sir Timothy
John Berners-Lee), enquanto trabalhava no Laboratorio Europeu de Fısica de
Partıculas(CERN), na Suıca. Tim Bernes-Lee pretendia reunir o conhecimento
adquirido pelo seu grupo de colegas em uma rede de hipertexto. Disponibi-
lizado no CERN em 1990, em 1991 ja estava na internet publica.[3]
Neste contexto, surgia o HTML(HyperText Markup Language) original,
derivado dos padroes HyTime(Hypermedia/Time-based Document Structu-
ring Language) e SGML(Standard Generalized Markup Language).O primeiro
fornece a base para o desenvolvimento de sistemas hipertexto padronizados,
enquanto o segundo, que nao foi desenvolvido para hipertexto, mas ofere-
ce uma maneira de transformar documentos em hiper-objetos e descrever
ligacoest.[4]
De uma maneira geral, o HTML permite a representacao grafica de in-
formacoes na Internet[6]. Para tal, sao utilizadas tags, tambem chamadas de
rotulos.
Esses elementos podem ser identificados atraves de ”〈”,”〉”e os caraceteres
entre estes sımbolos. As tags sao utilizadas para a marcacao e permitem re-
alizar a exibicao de paginas nos navegadores como se fosse um texto comum
formatado e exibido em um editor[7].
Em geral, as tags promovem seus efeitos em duplas. Existem tags de
abertura e tags de fechamento, diferenciando-se apenas por um ”/”na tag de
fechamento. Como exemplo, pode-se citar
<b>Negrito</b>
em que o vier entre as tags ficara em negrito(b refere-se a bold). Neste
caso, a saıda seria Negrito[6].
Algumas tags, excecoes a regra, nao necessitam de uma tag especıfica
para o fechamento. Estas tags representam comandos isolados, isto e, nao
2
necessitam de conteudo para ser processado. Nesse caso, o fechamento se da
na propria tag de abertura. Um exemplo e o comando
<br />
em que ocorre uma quebra de linha.
Na estrutura de um documento HTML, destacam-se os seguintes pares
de tags : <html></html>, <head></head> e <body></body>. Na Figura 1, e
possıvel ver um documento HTML basico.
Figura 1: Exemplo de pagina HTML basica
O primeiro par, <html></html>, especifica o inıcio e o fim de uma pagina.
Estes sao o primeiro e o ultimo comandos de um codigo HTML. Entre estas
tags, todo o conteudo da pagina devera ser descrito.
3
O segundo par, <head></head>, corresponde a delimitacao do cabecalho
de programacao e e o primeiro comando que aparece apos o <html>. Trata
de assuntos sobre a pagina[7]. No cabecalho de programacao, sao descritas
informacoes como tıtulo, nome do autor, versao da linguagem, base de en-
derecamento e metavariaveis, que ficam em tags especıficas.
Dentro desse cabecalho, devem aparecer os elementos <title>, entre os
quais sera especificado o tıtulo da pagina. Outros elementos pertencentes
ao cabecalho que podem aparecer nas paginas sao: <link>, que liga a uma
outra pagina; <style>, que inclui folhas de estilo; <script>, para incluir
scripts a pagina; e <meta>, para inclusao de informacoes sobre a pagina.[7]
O terceiro grande bloco da HTML, <body></body>, aparece apos a tag
de fechamento do cabecalho e refere-se ao corpo da pagina. Estre essas tags
estarao os elementos que serao mostrados na pagina Web[6]. Praticamente
todos os tipos de atributo(como id ou class) podem aparecer no corpo da
pagina.
O primeiro elemento que pode-se destacar no corpo da pagina e a <div>.
Esse elemento nao afeta diretamente o que sera exibido no navegador, porem
sao de grande utilidade uma vez que dividem a pagina em secoes e subsecoes[7].
Desta maneira, ocorre uma divisao da pagina em camadas, destacando que
cada camada agrupa um conteudo relacionado. Um exemplo disso seria agru-
par as notas em uma unica div : quando uma caracterıstica, como cor ou
tamanho da fonte, for associada a esta div, todo o conteudo sera formatado
segundo esta especificacao.
Ainda no corpo, tres atributos merecem ser destacados: id,class e style.
O primeiro, id, permite identificar de forma unica cada elemento da
pagina. Sua sintaxe segue o seguinte: id = "identificador", em que iden-
tificador refere-se e um valor unico, iniciado por letra e seguido por qual-
quer quantidade de letras, numeros, hıfens, sublinhados, ponto e vısrgula e
pontos[7].
O segundo atributo, class, refere-se a qual ou quais classe ou classses
4
o elementos, identidificado pelo id pertence. Sua sintaxe segue o seguinte:
<class = "Classe">, porem, caso o elemento possua mais de um tipo de
classe, estas sao indicadas por espaco entre os nomes de cada:
class = "Classe0 Classe1 Classe2"[7].
Por fim, style permite acrescentar regras de CSS ao elemento. Sua sin-
taxe segue o seguinte: style="font-family:arial;"[7]. Assim como em
class, caso haja mais especificacoes, elas sao separedas por espacos.
Todavia, e interessante que as cada parte do texto, mesmo dentro de uma
camada especıfica, possa ter, caso necessario, sua propria formatacao. Para
tal, algumas tags sao utilizadas.
As primeiras tags de destaque sao <p></p>, que formatam o texto como
um paragrafo.
Em seguida, tem-se os elementos hn. Estes elementos permitem a criacao
de cabecalhos e subcabecalhos em 6 nıveis diferentes, sendo que o n repre-
senta o nıvel. A sintaxe para tal e a seguinte: <h1></h1>. Quando utiliza-
dos valores maiores de n (<h2></h2>,...,<h6></h6>), uma fonte menor e
adotada.[7]
Quanto ao alinhamento do texto (a esquerda, a direita ou centralizado),
o atributo align e responsavel por isso. Tres valores podem ser atribuıdos a
align: left, center e right. O primeiro, adotado como padrao quando align
nao e requisitado, exibe o texto a esquerda da janela, o segundo exibe o texto
no centro e o terceiro, a direita.[7]
Porem, muitos destes atributos caıram em desuso. Um exemplo claro
disso e o align, que nao descreve a estrutura mas pagina, mas sim para afetar
o resultado visual[7]. Neste caso, o mais correto a se adotar sao as CSS.
5
3 CSS
CSS e uma sigla para cascading style sheets, folha de estilo em cascata,
em portugues. A W3C(World Wide Web Consortium, principal orgao de
padronizacao da World Wide Web) define CSS como um simples mecanismo
para adicionar estilos aos documentos web[8].
De fato, a W3C definiu que linguagens de marcacao nao deveriam utilizar
elementos que definissem a aparencia da documento. Desta forma, surgiu o
CSS, cabendo a este o trabalho de controlar a aparencia das paginas[7].
CSS trabalha atribuindo regras aos elementos do documento. Essas re-
gras definem como os elementos aos quais estao associados devem ser exi-
bidos. A juncao desas regras em um unico documento define a folha de
estilos.[7]Cada regra de CSS possui duas partes: um seletor e uma declaracao,
sendo que o segundo se divide em propriedade e valor (ver Figura 2).[9]
Figura 2: Partes de uma regra CSS
O seletor determina a qual ou quais elementos a regra vai ser aplicada.
Quando ha mais de um elemento a que se aplica a regra, os seletores sao
separados por vırgulas[7]. Como exemplo de seletores tem-se elementos do
HTML, uma classe ou um id. Na Figura 3 e possıvel observar um exemplo
do emprego de cada um destes tipos de seletor.
Ao utilizar um elemento do HTML como seletor, todos os elementos deste
tipo receberao as regras do CSS. Por exemplo, se utiliza-se body como sele-
tor, todo o corpo da pagina recebera as regras[10].
Ja no caso da utilizacao de uma classe, torna-se possıvel a aplicacao das
regras em qualquer elemento do HTML. Para tal, o nome do seletor deve ser
6
Figura 3: Exemplo de seletores CSS
iniciada com um ponto. Para atribuir a classe CSS a um elemento do HTML,
deve-se utilizar o atributo class : <div class="exemplo">...</div>. Desta
forma, somente os elementos que possuırem esta classe receberao as carac-
terısticas da regra[10]..
Quando id e utilizado como seletor, um elemento especıfico recebe a regra.
Desta maneira, apenas um elemento do HTML pode ter esta regra associada
a ele. Para tal, o seletor deve ser precedido por #[10]..
Quanto a declaracao, propriedade refere-se a caracterıstica que sera afe-
tada e valor e a especificacao que a propriedade recebe[7]. Cada par propriedade-
valor e separado por ponto-e-vırgula. Caso haja apenas um par, o emprego
de ponto-e-vırgula e facultativo, porem seu uso e aconselhavel[10].
7
Um recurso importante das CSS e a heranca. Quando uma regra e apli-
cada a um a um elemento, seus filhos a herdam. Porem, caso surja uma regra
mais especıfica, a anterior e sobreposta. Um exemplo disso seria a atribuicao
da fonte arial para o elemento body; caso se queira atribuir fonte verdana
para determinada div atraves de uma outra regra, esta mais espacıfica e a
que estara ativa[7].
Apesar de ser adicionar regras CSS dentro do proprio HTML por meio
do elemento style, a utilizacao de style sheets em documentacao externa pro-
porciona uma serie de vantagens. Algumas destas vantagens, conforme es-
pecificado em [7], estao destacadas abaixo:
• Reuso: A mesma folha de estilo pode ser usada em varias paginas
diferentes. Com isso, torna-se desenecessaria a marcacao de estilo em
cada pagina individualmente.
• Menor demanda sobre o servidor: Como os estilos estao declarados
em um unico documento, as paginas ficam menores. Logo, e necessario
baixar as folhas de estilo apenas uma vez e as demais paginas exigiram
menos do servidor, por serem menores.
• Praticidade: A utilizacao de um documento externo para CSS torna
possıvel alterar a aparencia de diversas paginas com uma pequena mu-
danca na folha de estilo. Isto e muito mais pratico que fazer a alatercao
em cada documento HTML.
Para tal utilizacao, seguinte sintaxe deve ser seguida e adiciona ao head :
<link rel="stylesheet" type="text/css" href="caminho/sua.css">
link e o elemento utilizado para gerar ligacao com a folha de estilos; rel es-
pecifica o tipo de relacionamento entre o documento que recebe a conexao e
aquele a que sera conectado; type informa o tipo de MIME (Extensoes Multi
funcao para Mensagens de Internet) do documento a que se esta conectando,
8
no caso text/css ; e href a URL do documento a que sera conectado.
Com a utilizacao de HTML e CSS, e possivel produzir paginas que trans-
mitam informacao de uma forma mais clara. Porem, estas paginas ainda
sao estaticas, o que pode tornar a navegacao um tanto quanto cansativa e
monotona. Neste contexto surge a linguagem JavaScript.
9
4 JavaScript e jQuery
O JavaScript e uma tecnologia empregada para melhoria da web. A uti-
lizacao desta linguagem permite a criacao de paginas que possibilitam uma
experiencia com conteudos mais atraentes, interativos e inteligentes quando
empregada no computador cliente[11].
Inicialmente chamado de Livescript, o JavaScript foi criado por Brendan
Eich, da Netscape Communications. Seu nome foi alterado no momento em
que Java se tornou um termo poupular e muito atraente[12]. Porem, esta
mudanca gerou alguns problemas.
Apesar de a sintaxe do JavaScript ser muito semelhante a do Java, que
por sua vez deriva do C/C++, as semelhancas nao vao muito alem disso. En-
tre outras diferencas, enquanto o Java possui um vocabulario de linguagem
de programacao completo, o JavaScript possuia um pequeno vocabulario e
um modelo de programacao mais facil de compreender. O JavaScript nao
surgiu para isolado, mas sim ser uma linguagem integrada ao HTML.[11]
Logo que o JavaScript comecou a ser suportado pelo Netscape Navigator
2.0(primeiro navegador a suporta-lo), a Microsoft viu o quao util poderia ser e
lancou o JScript, sua propria variante[12], ainda que preferisse que populari-
zacao do VisualBasicScript[11]. A primeira versao do JScript era compatıvel
com JavaScript, sendo possıvel, naa maioria dos casos, que o codigo escrito
para um dos navegadores (Microsoft Internet Explorer ou Netscape Naviga-
tor) funcionasse no outro. Porem, com o passar do tempo, nem todas as
caracterısticas adicionadas a uma das linguagens eram incluıdas na outra,
comecando assim a haver incompatibilidade entre os navegadores[12].
Em 1996, a Netscape, que, visando popularizacao, ja havia tornada publica
a definicao do JavaScript [12], se reuniu com outras empresas, incluindo a Mi-
crosoft, para a criacao um padrao basico para a linguagem. A essa reuniao
deu-se o nome de European Computer Manufacturer’s Association(ECMA).
Em 1997, a primeira especificacao foi publicada sob o nome ECMAScript.
Esse denominacao deveu-se as questoes de licenciamento do nome JavaScript [11].
10
Ao ser lancado o padrao, os navegadores ja haviam avancado. O EC-
MAScript, que era basicamente o JavaScript 1.1 por essencia, passou a ser
aceito por ambos navegadores. Com o passar do tempo, esse padrao evolui e
encorpora caracterısticas do JavaScript 1.3 e 1.5. Apesar do padrao, algumas
diferencas ainda podem ser detectadas entre navegadores[11].
E se a diferenca quanto a linguagem JavaScript basica parece sutil, a
diferenca quanto ao modelo de objeto de documento(DOM) causa grandes
problemas. Durante a evolucao dos navegadores, nunca chegou-se a um con-
senso sobre o modelo a ser seguido. Apesar de um padrao ter sido negociado,
os principais navegadores nao adotam todas as especificacoes. Desta maneira,
torna-se complicado criar um script compatıvel com todos os browsers [11].
Mas, enfim, a diferenca entre um script e um programa muitas vezes nao
e claro. Tecnicamente, script e uma sequencia de instrucoes que sao interpre-
tadas ou executadas por um outro programa. Isso significa que, ao contrario
de um programa comum, o processador nao e o responsavel por executar o
script. Desta maneira, para executar um script nao e necessario um compi-
lador, como e o caso da linguagem C, que e estruturada e compilada[12].
Uma vez que ha necessidade de um outro programa que execute as in-
strucoes JavaScript, um par de tags especıfico torna-se necessario para in-
clusao do script no HTML. Este par, como ja dito anteriormente e
<script>...</script>
Este bloco, que indica ao navegador que o conteudo do bloco e script, e
colocado em qualquer lugar entre as <head> e </head>. Colocando o script
no cabecalho, ele sera primeiramente carregado, porem isso nao impede a
inclusao no corpo do documento[12].
Porem, ainda e necessario dizer qual o tipo de scrip sera usado. Para tal,
e utilizado language. A linguagem e especificada entre aspas. Uma outra
linguagem script podeira ser utilizada, por exemplo VBScript, sendo que a
declaracao ficaria da seguinte forma[12]:
11
<script language="vbscript">
Um exemplo disto pode ser visto na Figura 4.
Figura 4: Exemplo de script no HTML. Destaque para language. Fonte:[12]
A omissao de language faz com que o navegador interprete o script como
JavaScript. Isto deve-se ao fato de essa ter sido a primeira linguagem de
scripting surgida. Porem, e aconselhavel sua utilizacao[12].
Declarada a linguagem utilizada, a programacao pode ser iniciada. Uma
caracterıstica interessante da linguagem JavaScript e que para declarar uma
12
variavel e necessario apenas o comando var. Diferente de linguagens como
Java ou C/C++, o tipo da variavel nao e declarado. O tipo e associado
de acordo com o valor associado. Isso pode ser obsevado na Figura 5. Os
comentario em JavaScript sao como nas demais linguagens citadas[12].
Figura 5: Exemplo de variavel JavaScript. O tipo da variavel muda de acordocom o valor que e atribuıdo.
A inclusao de scripts diretamente no HTML realiza o esperado, porem
traz os mesmos problemas que a utilizacao de CSS no HTML. Logo, uma
solucao para isso e a utilizacao das chamadas ”bibliotecas de script libraries”.
As bilbiotecas correspondem a arquivos que nao possuem nada mais que
codigo JavaScript. A utilizacao dessas bibliotecas evita a duplicacao de
codigo e todos os trantornos que isto acarreta, como a elimanacao de proble-
mas no codigo, que tera que ser feita em todos os arquivos em que o codigo
foi copiado[11].
Para que um arquivo externo, sem tags HTML, possa ser carregado,
primeiramente ele estar salvo com a extensao .js. Em seguida, para que
o navegador encontre o arquivo externo criado, a tag script deve ser escrita
13
da seguinte maneira[11]:
<script type="text/JavaScript" src="arquivo.js"></script>
Neste tipo de chamada, nao ha nada entre as tags de abertura e fechamento,
porem elas sao obrigatorias. O atributo SRC fica responsavel por indicar a
url da biblioteca.
Essa e uma maneira de melhor organizar os scripts criados pelo desen-
volvedor ou ate mesmo bibliotecas criadas por terceiros que contenham fun-
cionalidades interessantes. Este e o caso da bilbioteca jQuery.
jQuery e um biblioteca JavaScript disponibilizada como software livre e
aberto. Foi criada por John Resig e, nas palavras do proprio criador, possui a
simplicidade como foco principal. Foi criada para poupar os desenvolvedores
de terem que escrever codigos longos e complexos. A sintaxe jQuery permite
que os efeitos criados com varias palavras em JavaScript sejam reduzidas a
algumas poucas[13].
Essa foi justamente a motivacao de John Resig. Insatisfeito com a maneira
como eram escritos os codigos JavaScript, em seu blog ele publicou sua frus-
tracao e uma possıvel solucao. O autor do jQuery propunha a utilizacao de
seletores, como em CSS, para tornar a mais simples a programacao. Com a
utilizacao destes seletores, tornou-se possıvel o acesso direto a cada elemento
do DOM, sem a necessidade de lacos, como no JavaScript [13].
A partir desse conceito, foi desenvolvida uma biblioteca que acrescenta
maior dinamismo as paginas web. Com jQuery, e possıvel, como descrito pelo
autor em [13]:
• Acrescentar efeitos visuais que tornam a nevegacao uma experiencia
mais agradavel ao usuario;
• Acessar e manipular o DOM;
• Prover interatividade;
14
• Alterar conteudos;
• Simplificar tarefas especıficas do JavaScript
Para utilizar jQuery, e necessaria a inclusao no documento HTML do .js
correspondente:
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
A url passada corresponde a versao do jQuery presente no computador
do desenvolvedor. A inclusao deste documento torna-se necessaria sempre
que se quiser utilizar a biblioteca.
Uma vez que a biblioteca esta incluıda, ja e possıvel utilizar as funcoes
criadas com jQuery. Para tal, deve-se utilizar um contrutor para iniciar a
programacao. O construtor jQuery e identificado por jQuery() ou simples-
mente $()[13].
O acesso aos elementos se da da seguinte maneira: $(’div’). Com isso,
acessa-se todos os elementos div de um HTML. Porem, uma div especıfica
pode ser acessada diretamente por meio de seu id [13]. Abaixo tem-se um
exemplo disso:
elemento HTML
<div id="myId"><div>
identificacao do jQuery
$(’#myId’)
Isso, como se pode observar, ocorre de forma muito semelhante ao CSS.
Outro ponto que o jQuery difere do JavaScript convencional e a capaci-
dade de retornar objetos por seus metodos. Isso torna possıvel o encadea-
mento de metodos. Um exemplo disto e:
$(’div’).children(’p’).fadeOut().addClass(’xpto’)
15
Esse exemplo, retirado de [13], diz ao construtor que encontre os paragrados
que sejam filho de div e neles aplique o efeito fadeOut e adicione a classe
xpto. O desenvolvimento deste processo utilizando apenas JavaScript puro
seria trabalho e exigiria um certo tempo. Bem diferente do que e observado
com jQuery [13].
Uma vez que ha como produzir um experiencia interessante ao usuario,
torna-se necessario utilizar uma maneira de armazenar aquilo que foi pro-
duzido e o conteudo que sera apresentado. Para tal, e utilizado um banco de
dados.
16
5 MySQL
Os bancos de dados correspondem a uma maneira de tornar o conteudo de
uma aplicacao web disponıvel para o usuario. Para administrar os bancos
de dados, sao utilizados os Sistemas Gerenciadores de Bancos de Dados
(SGBDs).
O mercado oferece diversos Sistemas Gerenciadores de Bancos de Dados.
Cada um traz suas vantagens e desvantagens. Entre eles, o MySQL se destaca
oferecendo o melhor cenario. Este SGBD possui, entre outras caracterısticas,
os seguintes destaques[14]:
• Pode ser executado em muitas plataformas;
• Oferece um baixo TCO(Custo Total de Propriedade);
• E estavel;
• Documentacao excelente;
• Suporte
Porem, a grande vantagem da utilizacao do MySQL e o fato se seguir
a General Public License de GNU(GPL) e a GNU Lesser General Public
License(LGPL). Isso significa que, para a maioria de suas versoes, o MySQL
nao necessita de nenhuma licenca ou compra[14].
O padrao SQL-92 e quase totalmente seguido pelo MySQL, o que facilita
a migracao[14]. A SQL, Structures Query Language, e uma linguagem de
programacao padrao para acesso e manipulacao de dados vindos de bancos
de dados relacionais. SQL e um padrao ANSI e ISO.[16]
Porem, algumas caracterısticas podem impedir esta migracao para outro
SGBD que utilize o padrao SQL[14].
O gerenciamento do servidor de banco de dados pode se dar de duas
maneiras. A forma tradicional e por Command-Line Interface (linha de
17
comando do MySQL). Outra maneira e por meio de uma interface grafica.
Para este ultimo metodo existem diversas ferramentas, porem, dois destaques
sao o MySQL WorkBench e o PHPMyAdmin[14].
Na Figura 6 e possıvel visualizar a interface de linha de comando. Quanto
a interface grafica, pode-se observar exemplos nas Figuras 7 e 8.
Figura 6: Linha de comando do MySQL. Fonte: http://www.aprendendodjango.com/preparando-um-servidor-com-windows/
Agora que aplicacao web tem seus dados guardados no banco de da-
dos, torna-se necessaria uma maneira de interagir com o MySQL. Para isso,
utiliza-se uma outra linguagem. E um bom exemplo de linguagem para ser
utilizada e o PHP.
18
Figura 7: MySQL Workbench
Figura 8: PHPMyAdmin
19
6 PHP
O PHP, trabalhando do lado servidor, permite a geracao de conteudo dinami-
camente. O servidor lida de forma diferente com esta linguagem. Enquanto
com paginas HTML o servidor le a requisicao do navegador, encontra a pagina
no servidor e envia a pagina de volta pela rede, com paginas PHP acontece
o seguinte[16]:
• O servidor le a requisicao do navegador
• Encontra a pagina
• Realiza as instrucoes do codigo, modificando a pagina
• Envia de volta pela rede
O PHP foi criado em 1994 por Rasmus Lerdorf. No inıcio consistia em
um punhado de scripts utilizados pelo autor para gerar paginas dinanimicas
e vistoriar as visitas feitas ao seu currıculo na internet[15].
Tao logo as pessoas foram se interessando pelos scripts de Rasmus, foi
lancado um pacote de ferramentas denominado ”Personal Home Page”, o
primeiro significado de PHP [16].
Com o interesse pela ferramenta aumentando, foi feito um sistema de
processamento de scripts e uma ferramenta para analise de entradas vindas
de formularios HTML. A esta ferramenta foi dado o nome de Form Inter-
preter(Interpretador de Formularios), ou simplesmente, FI. Assim surgia a
variante do PHP denominada PHP/FI [16].
Em 1997, dois estudantes que utilizavam o PHP em seus trabalhos aca-
demicos se juntaram a Rasmus Lerdorf para aperfeicoar a linguagem. Com
o apoio dos jovens, Andi Gutmns e Zeev Suraski, surgiu o PHP 3. Esta
consistia em uma reescrita de todo o codigo-fonte do PHP/FI, acrescentando
extensibilidade, possibilidade de conexao com varios bancos de dados, uma
sintaxe mais consistente, suporte a orientacao a objetos e uma nova API.
20
Neste momento PHP passou a significar Hypertext Preprocessor [15].
No ano seguinte, Zeev e Andi comecaram a reescrever o nucleo do PHP a
fim de melhorar sua performance. Essas alteracoes, que geraram o chamado
Zend Engine, trouxeram melhorias e novos recursos, como o suporte a diver-
sos servidores. O PHP utilizando esse mecanismo foi denominado PHP4 [15].
Agora que tem-se uma ferramenta capaz de se comunicar com o banco de
dados, e necessario desenvolver um codigo que o faca.
Assim como ocorre com as folhas de estilo e JavaScript, os comandos
PHP podem vir dentro do HTML ou em um arquivo separado. Os arquivos
que contem codigo PHP devem possuir a extensao .php. Ha possibilidade de
utilizar instrucoes de um arquivo .php em outro, para tal utiliza-se a seguinte
linha no codigo:
require("arquivo.php");
ou entao
require_once("arquivo.php");
em que a unica diferenca entre os comando e que o segundo e executado
apenas uma vez, enquanto no primeiro isso nao e assegurado.[15]
Um codigo em PHP sempre vem entre dois delimitadores[15]:
<?php
?>
entre eles sao desenvolvidos os comandos.
Um codigo para conectar com o banco de dados seria semelhante ao visto
na Figura 9.
No codigo visto na Figura 9, pode-se observr elementos precedidos por $.
Estes elementos sao as variaveis do PHP [15].
As variaveis em PHP, de forma semalhante ao que ao que ocorre com
21
Figura 9: Exemplo de codigo para conexao com banco de dados
JavaScript, tem seus tipos determinados de acordo com o valor que lhes e
atribuıdo[15].
Algumas vezes, torna-se necessario alterar o nome das variaveis. Nestes
casos, utiliza-se $$, como no exemplo retirado de [15]:
<?php
$variavel = ’nome’; //define o nome da variavel
$$variavel= ’maria’; //cria uma variavel identificada pelo conteudo de $variavel
echo $nome; //este comando exibe o valor de $nome na tela. Resultado = maria
?>
Para que ambas variaveis passem ter o mesmo valor na memoria, deve-se
utilizar &$, de tal forma que, em:
22
<?php
$a = 5;
$b = &$a;
?>
o valor atribuıdo tanto a $a ou $b, alterara o valor da memoria, e ambos
passarao a exibir o mesmo conteudo[15].
Logo, no codigo visto na Figura 9, $dbhost, $dbuser, $dbpass e $dbname
sao variaveis que possuem o endereco do servidor, nome do usuario, a senha
e o nome da base de dados, respectivamente.
Na linha seguinte do codigo que realiza conexao, tem-se a funcao my-
sql connect. Aqui ve-se uma das grandes vantagens do PHP : o grande numero
de funcoes predefinidadas[14].
mysql connect realiza a conexao com o servidor, passando o nome do
servidor, nome do usuario e a senha. O comando or die, que segue o co-
mando anterior, retorna uma mensagem de erro caso a conexao nao tenha
sido estabelecida[14].
Uma vez que a conexao ja esta estabelecida, o PHP possui funcoes que po-
dem substituir funcoes do MySQL para tornar mais simples as operacoes[16].
Um exemplo disso e mysql select db, que realiza a selecao do banco de dados
ativo[16].
Outros exemplos de funcoes PHP que substituem comandos SQL podem
ser observados abaixo[16]:
• mysql create db: Cria um novo banco de dados passando uma string
para nomear o banco;
• mysql drop db: Exclui um banco de dados passando uma string que
se refere ao nome do banco que devera ser excluıdo;
• mysql close: Encerra uma conexao com o banco de dados;
23
• mysql errno: Retorna o numero do erro da ultima operacao;
• mysql error: Retorna a mensagem de erro da ultima operacao;
• mysql query: Envia um comando SQL para ser executado pelo servi-
dor MySQL.
A utilizacao de mysql query permite o envio de instrucoes SQL como
CREATE, ALTER, DROP, DELETE, INSERT, UPDATE e SELECT. As
tres primeiros retornam um identificador de sucesso ou falha. Os tres seguintes
podem ser associados a mysql affected rows, que retorna a quantidade de li-
nhas afetadas. Ja o ultimo retorna um ponteiro para o resultado; este pon-
teiro pode ser utilizado para recuperar os resultados da consulta atraves da
funcao mysql fetch assoc ou mysql fetch row.[16] [14]
Na Figura 10 e possıvel observar um exemplo de codigo de insercao em
tabela denominada tabela. Porem, normalmente os valores a serem inseridos
provem de formularios HTML. Nestes casos e preciso utilizar um metodo
especıfico de tranferencia.
Existem dois metodos que permitem enviar formularios para processa-
mento: POST e GET. Estes dois metodos diferenciam-se pela maneira como
os dados sao transferidos: enquanto GET envia mensagem por url, POST
envia encapsulado no corpo da mensagem. Esta caracterıstica faz com que os
dados passados por GET sejam visıveis para o usuario enquanto os passados
por POST, nao[15].
A sintaxe para um formulario HTML a ser processado pelo metodo GET
seria como o seguinte
<form method="GET">
<input type="text" size="30" name="Nome" >
<input type="submit" value="Nome">
</form>
24
Figura 10: Exemplo de codigo para insercao em uma tabela
enquanto o valor seria recebido pelo arquivo PHP correspondente da
maneira como e observado na Figura 11.
Figura 11: Exemplo de codigo para processar formulario pelo metodo GET
25
Ja para utilizar o metodo POST, o formulario HTML deveria ser a seguinte
<form method="POST" enctype="multipart/form-data" action=" exempPOST.php">
<input type="text" size="30" name="Nome" >
<input type="submit" value="Nome">
</form>
e o modo como o valor deve ser recebido pelo PHP, o visto na Figura
12. O parametro action guarda o caminho para o arquivo que processara o
formulario.
Figura 12: Exemplo de codigo para processar formulario pelo metodo POST
Mas o PHP tem um poder de processmento muito grande e sua capaci-
dade vai muito alem de consultas e insercoes em bancos de dados. Essa
linguagem possui capacidade inclusive para processar imagem. Esse poder
deriva de uma grande quantidade de funcoes para representar figuras geome-
tricas regulares, modificacao de imagens e manipulacao de texto.[16]
Para a maioria dos processamentos de imagens, o PHP utiliza uma bi-
blioteca especıfica: a GD Library, uma biblioteca criada para gerar imagens
26
graficas bidimensionais. Quando instalada com o PHP, ela permite criacao,
exclusao e redimensionamento de imagens, desenho de figuras geomatricas
basicas e manipulacao de textos.[16]
Pode-se destacar a velocidade de processamento wdesta biblioteca, que
tabalha com os formatos .png e .jpg. Essa biblioteca criada por Thomas
Boutell inicialmente processava o formato .gif , porem foi retirado por conter
um trecho de algoritmo registrado por um empresa.[2]
Os bons resultados obtidos com o uso dessa biblioteca permitem a uti-
lizacao dela para comparacao de algoritmos e testes de ferramentas que ne-
cessitem desse processamento. Abaixo pode-se observar a codificao de alguns
procedimentos que utilizam a GD. Nas Figuras 14 e 15 observa-se os resul-
tados obtidos com o uso dessa biblioteca, aplicados na Figura 13.
Figura 13: Lena. Imagem original. Fonte: http://www.kitware.com/blog/
home/post/246.Acesso em 7-11-2012
<?php
//carrega imagem para variavel
27
$origem = imageCreateFromJPEG("lena.jpg");
//procedimento para criac~ao na memoria de uma imagem de
//200px por 250px
$saida = ImageCreateTrueColor(200,250);
//altera a dimens~ao
/*
$saida abrigara a imagem
$origem e a imagem original
0,0,0,0 representam as bordas
200,250 a dimens~ao da imagem resultante
380,380 a dimens~ao da porc~ao capturada da imagem original
*/
ImageCopyResampled($saida, $origem, 0,0,0,0,200,250,380,380);
//cria uma imagem a partir de uma variavel
/*
$saida e a variavel que guarda a imagem
"lena_red.jpg" o nome da imagem gerada
100 e a qualidade da imagem obtida
*/
imagejpeg($saida, "lena_red.jpg", 100);
?>
28
Figura 14: Imagem redimensionada por meio da biblioteca GD
<?php
//converte para tons de cinza
function grayscale( $image )
{
imagefilter( $image, IMG_FILTER_GRAYSCALE );
return $image;
}
29
$image = grayscale( imagecreatefromjpeg( ’lena.jpg’ ), 10 );
imagejpeg($image, "lena_gray.jpg", 100);
?>
Figura 15: Imagem em tons de cinza.Metodo da biblioteca GD
Com a utilizacao de scripts que trabalham no servidor e outras que fun-
cionam na maquina cliente, obtem-se um bom dinamismo. Porem, ainda ha
problema essencial: ao solicitar uma pagina ao servidor, este busca a nova
pagina e envia o cliente, tornando canssativa e desgastante para o usuario
visualizar essa troca de paginas inteiras. Muitas vezes, existe necessidade de
trocar apenas parte do que esta sendo exibido e nao todo conteudo. Para
solucionar este problema, surgiram as tecnicas de AJAX.[19]
30
7 AJAX
AJAX e uma sigla para Asynchronous JavaScript and XML, JavaScript e
XML assıncronos, em portugues. Trata-se de uma tecnica que permite car-
regar algo em uma pagina da web sem que toda a pagina seja alterada. Para
tal, utiliza JavaScript e XML ou outra linguagem de marcacao que possa
ser recuperada do servidor. O desenvolvimento foi iniciado por Jesse James
Garret, porem, posteriormente, diversos grupos deram continuidade.[17]
As tecnicas de AJAX permitem uma fuga do modelo classico da web,
funcionando como uma ferramenta intermediaria. O modelo classico con-
siste em requerer uma pagina inteira e exibi-la. Com a utilizacao do AJAX,
uma codificacao JavaScript fica responsavel por alterar a interface vista pelo
usuario. Na Figura 16 observa-se uma comparacao entre o modelo classico
de uma aplicacao web(a esquerda) e com a utilizacao de tecnicas AJAX [20]
Figura 16: Modelo Classico vs AJAX. A esquerda tem-se uma exemplicacao domodelo classico de aplicacao web; a direita com a utilizacao de tecnicas de AJAX.Fonte:[20]
O codigo em JavaScript permite que a interacao com o usuario aconteca
31
de forma assıncrona. Esse assincronismo faz com que o usuario nao veja, por
exemplo, uma tela branca enquanto se espera a resposta do servidor. Na
Figura 17 pode-se observar uma comparacao entre os padroes de aplicacao
web sıncrono e assıncrono, com a utilizacao de AJAX [20]
Figura 17: Sincronismo vs Assincronismo. Na imagem superior e possıvel obser-var uma interacao sıncrona de aplicacoes web, enquanto na inferior e visto umainteracao assıncrona com AJAX Fonte:[20]
A transmissao assıncrona entre pagina e servidor se da atraves do XML-
HttpRequest. Este foi criado para o Internet Explorer 5, sob o nome de
32
XMLHTTP, como objeto do ActiveX, sendo posteriormente implementado
nativamente no Mozilla Firefox 1.0.[17] Hoje a maioria dos navegadores uti-
liza o XMLHttpRequest como um objeto JavaScript, porem o Internet Ex-
plorer ainda o utiliza como ActiveX.[19]
Para criar um objeto XMLHttpRequest nos navegadores em geral, a sin-
taxe e a seguinte[17]:
var objAjax = new XMLHttpRequest();
Ja no Internet Explorer, existe uma distincao. Nos navegadores mais antigos,
a sintaxe reconhecida e a seguinte:
var objAjax = new ActiveXObject("Microsoft.XMLHTTP");
Porem, nos navegadores mais recentes, muda ha uma alteracao:[17]
var objAjax = new ActiveXObject("Msxml2.XMLHTTP");
Gracas a esses detalhes, um bom exemplo JavaScript para a criacao do objeto
XMLHttpRequest esta na Figura 16, conforme visto em [17]:
Logo, com a utilizacao dessas linguagens e tecnologias, torna-se possıvel
o desenvolvimento de um projeto para plataforma Web que seja capaz de
realizar bons processamentos, tanto de texto quanto imagem, e que ofereca
uma experiencia dinamica e agradavel ao usuario.
33
Figura 18: Criacao do objeto XMLHttpRequest
Referencias
[1] HTML 4.01 Specification. Disponıvel em: http://www.w3.org/TR/
html401/. Acesso em: 23-10-2012.
[2] Apostila PHP. Fabio B Salvador. Disponıvel em: http://omalho.
34
blog.br/apostilas/apostilaphp.pdf. Acesso em: 05-11-2012.
[3] Longer Biography. Disponıvel em: http://www.w3.org/People/
Berners-Lee/Longer.html. Acesso em: 23-10-2012.
[4] Introducao a Linguagem HTML. Disponıvel em: http://www.
icmc.usp.br/ensino/material/html/intro.html. Acesso em: 23-10-
2012.
[5] A history of HTML. Disponıvel em: http://www.w3.org/People/
Raggett/book4/ch02.html. Acesso em: 23-10-2012.
[6] Mazzetti, Gerardo e Mink, Carlos. HTML 4 com XML. Sao Paulo:
MAKRON Books, 2000.
[7] Duckett, Jon Introducao a Programacao Web com HTML, XHTML e
CSS. 2a Edicao. Rio de Janeiro: Editora Ciencia Moderna Ltda. 2010.
[8] Cascading Style Sheets. Disponıvel em: http://www.w3.org/
Style/CSS/. Acesso em: 30-10-2012.
[9] Cascading Style Sheets, level 2 CSS2 Specification W3C Recom-
mendation 12-May-1998.
[10] Construindo Sites com CSS e XHTML. Silva, Maurıcio Samy. Sao
Paulo : Novatec Editora, 2008.
[11] JavaScript, a Bıblia. Goodman, Danny. Rio de Janeiro: Elsevier,
2001.
[12] Iniciando em JavaScript 1.5 - Exemplos Praticos. Kingsley-
Hughes, Adrian e Kingsley-Hughes, Kathie. Sao Paulo: MAKRON
Books Ltda, 2001.
[13] jQuery, a biblioteca do programador JavaScript. Silva, Maurıcio
Samy. Sao Paulo : Novatec Editora, 2010.
35
[14] MySQL, a Bıblia. Steve Suehring. Rio de Janeiro: Campus, 2002.
[15] PHP: programando com orientacao a objetos. Dall’Oglio, Pablo.
Novatec Editora, 2009.
[16] Profissional PHP - Programando. Castagnetto, Jesus; Rawat, Har-
ish; Schumann, Sascha; Scollo, Chris; Veliath, Deepak. Sao Paulo:
MAKRON books, 2001.
[17] Ajax com jQuery: requisicoes ajax com a simplicidade de
jQuery. Silva, Maurıcio Samy. Sao Paulo: Novatec Editora, 2009.
[18] Ajax nao e uma tecnologia, e um jeito. Gilberto Alves
Jr. Disponıvel em: http://webinsider.uol.com.br/2005/11/01/
ajax-nao-e-uma-tecnologia-e-um-jeito/. Acesso em: 07-11-2012.
[19] Utilizacao de AJAX no desenvolvimento de sistemas Web.
Monografia. Limeira, Jose Luiz Silveira. Disponıvel em: http://www.
limeira.eti.br/monografia_ajax.pdf. Acesso em: 07-11-2012.
[20] Ajax: A New Approach to Web Applications.
Disponıvel em: http://www.adaptivepath.com/ideas/
ajax-new-approach-web-applications. Acesso em: 07-11-2012.
36