AJAX (ASYNCRONOUS JAVASCRIPT AND XML POSSIBILITANDO …€¦ · ferramentas ajax em construção de websites dinâmicos: Ajax (Asyncronous Javascript And Xml) Possibilitando Design

JOSIEL SOARES DE JESUS

Teixeira de Freitas 2018

A Importância de Banco de Dados na utilização de ferramentas Ajax em construção de Websites Dinâmicos

AJAX (ASYNCRONOUS JAVASCRIPT AND XML) POSSIBILITANDO DESIGN DE WEBSITES BEM

APRESENTÁVEIS

Teixeira de Freitas 2018



Trabalho de Conclusão de Curso apresentado à Faculdade Pitágoras, como requisito parcial para a obtenção do título de Bacharel em Ciência da Computação.

Orientador: Bruno Roberto



APRESENTÁVEIS




APRESENTÁVEIS

Trabalho de Conclusão de Curso apresentado à Faculdade Pitágoras, como requisito parcial para a obtenção do título de Bacharel em Ciência da Computação.

BANCA EXAMINADORA

Prof(a). Esp. Andressa Lima de Araújo

Prof. Esp. Emerson De Almeida Santana

Prof. Msc. Flávio José de Oliveira

Teixeira de Freitas, 12 de dezembro de 2018

Dedico este trabalho a meus queridos pais

Januário Soares e Veraiuza Souza pelo

apoio ao longo do curso e sou grato também

a ambos por acreditarem em meu potencial

me motivando a continuar nesta jornada

acadêmica.

JESUS, Josiel Soares de. A importância de Banco de dados na utilização de ferramentas ajax em construção de websites dinâmicos: Ajax (Asyncronous Javascript And Xml) Possibilitando Design de Websites bem apresentáveis. 2018. 40.Trabalho de Conclusão de Curso (Graduação em Bacharelado de Ciência da Computação) – Faculdade Pitágoras, Teixeira de Freitas, 2018.

RESUMO

Aqui neste trabalho tem o objetivo de investigar as vantagens de se utilizar um serviço web (website) que seja fácil a navegação, responsivo, e inteligente em seus aspectos de programação da solução. Você vai encontrar um estudo que leva em conta o lado cliente e também o lado servidor da aplicação, com esta pesquisa cheguei à conclusão de que é importante um cuidado no momento de programar aplicações web que têm natureza assíncrona, pois exige certo trabalho do servidor dedicado, e não é o objetivo congestionar o serviço web. Buscou se o levantamento de saberes específicos quanto a utilização das tecnologias JavaScript, PHP, MySQL, HTML. Foi necessário a consulta de websites nacionais e estrangeiros no idioma inglês, consulta de livros teóricos e a visualização atenta em material veiculado em vídeo. Investiga se Ajax quanto sua característica marcante de possibilitar consultas rápidas em bases de dados, para preenchimento de somente os elementos requisitados sem a necessidade de carregar a página inteira. Investiga se o sistema de base de dados MySQL e julga se importante usar Ajax na consulta de tabelas, agregando funcionalidade para a página pelo fato da natureza relacional deste sistema. A finalidade é agregar conhecimento de programação ao pesquisador.

Palavras-chave: Ajax; JavaScript; JQuery; Banco de Dados.

JESUS, Josiel Soares de. The importance of Database in the use of Ajax tools in construction of dynamic Websites: Ajax (Asyncronous Javascript And Xml) Enabling Design of pretty Websites. 2018. 40. Conclusion Work (Bachelor in Computer Science) – Faculdade Pitágoras, Teixeira de Freitas, 2018.

ABSTRACT

Here we aim to investigate the advantages of using a web service that is easy to navigate, responsive, and intelligent in its aspects of solution programming. You will find a study by the client side and also the server side of the application, with this research i came to the conclusion that it is important to be careful when programming web applications that have asynchronous nature because it requires certain work of the dedicated server, and it is not the goal to congest the web service. It looked for the raising of specific knowledge regarding the use of the technologies JavaScript, PHP, MySQL, HTML. it was necessary to consult national and foreign websites in english idiom, consult theoretical books and watch carefully on video material. It investigates Ajax on its characteristic marking of enabling quick queries in databases, to fill only the requested elements without the need to reload the entire page. It investigates the MySQL database system and judges whether it is important to use Ajax in the database query, adding functionality to the page because of the relational nature of this system. The purpose is to increase programming skills and knowledge to the researcher.

Key-words: Ajax; JavaScript; JQuery; Database.

LISTA DE ABREVIATURAS E SIGLAS

AJAX Asyncronous JavaScript and XML (JavaScript e Xml Assíncronos)

CRUD Acrônimo CREATE, READ, UPDATE e DELETE, Comumente designado

para as principais programações em base de dados

CSS Cascading Style Sheet (Folha de Estilo em Cascata)

DOM Document Object Model (Modelo de Objeto de Documento)

ECMA European Computer Manufacturers Association (Associação Européia de

Fabricantes de Computadores)

HTML HyperText Markup Language (Linguagem de Marcação de texto)

SGBD (Sistema de Gerenciamento de Base de Dados)

XML Extensible Markup Language (Linguagem extensiva de marcação)

W3C World Wide Web Consortion – Consórcio internacional de padronização

e organização da Web.

SUMÁRIO

1 INTRODUÇÃO ....................................................................................................... 13

2 ACERCA DA INTERATIVIDADE PARA O USUÁRIO........................................... 15

2.1 CONVENÇÕES UTILIZADAS NESTA PESQUISA ............................................. 17

3 BREVE HISTÓRIA DA LINGUAGEM JAVASCRIPT ............................................ 18

3.1 FRAMEWORKS BASEADOS EM JAVASCRIPT ................................................ 20

4 BASE DE DADOS NO CONTEXTO DE PROGRAMAÇÃO AJAX ........................ 22

4.1 COLOCANDO AJAX BASEADO EM BASE DE DADOS PARA FUNCIONAR .... 26

4.2 DICAS E PRECAUÇÕES QUANTO AO USO DE AJAX E BASE DE DADOS ... 28

4.3 CLIENT SIDE VERSUS SERVER SIDE.............................................................. 29

5 UMA ABORDAGEM SOBRE JQUERY ................................................................. 31

5.1 ACERCA DO MATERIAL EXTERNO DESTA OBRA .......................................... 33

6 PROPOSTA DE TRABALHOS FUTUROS ............................................................ 34

7 CONSIDERAÇÕES FINAIS ................................................................................... 35

REFERÊNCIAS ......................................................................................................... 36

APÊNDICE A ............................................................................................................ 38

APÊNDICE B ............................................................................................................ 41

APÊNDICE C ............................................................................................................ 42

APÊNDICE D ............................................................................................................ 43

APÊNDICE E ............................................................................................................ 44

APÊNDICE F ............................................................................................................. 47

13

1 INTRODUÇÃO

Estar bem apresentável nos navegadores da internet é altamente buscado pelas

empresas, pois o website é um elo importante de comunicação que está alinhado com a

marca de cada empresa, aplicado independente da regra de negócio específica. Com

efeito pode se ressaltar que é altamente recomendado um atencioso estudo a etapa de

construção do webservice, pois ressalta-se que é um dos principais canais de

comunicação entre empresa e cliente.

A execução deste projeto enriquece o leitor que almeja trilhar os caminhos da

programação web, de forma que o mune com práticas facilitadoras na atuação rumo ao

planejamento de serviços web. E tem o diferencial de definir um conjunto de boas práticas

para a construção de serviços web ricos em interatividade e principalmente que agrade ao

público usuário da aplicação web, esta, com funcionalidades que lembra sistemas de

computadores desktop.

Esta pesquisa se justifica pelo fato de que se busca agregar conhecimento acerca

da importância de banco de dados em programação web em seus aspectos que dê

significado a partir das informações nele veiculadas. Onde acredita-se que este trabalho

científico seja útil ao usuário programador que deseja trilhar caminhos quanto a

elaboração de webservices responsivos, amigáveis, e ricos em interatividade ao usuário

final. De forma que o sistema como um todo deve ter sentido saindo de uma base de

dados bem estruturada.

Sabendo na necessidade de construção de webservices modernos que

contemplem necessidades de usuário semelhante a aplicações de desktop, tem se a

seguinte questão problema: Qual a importância de uso de banco de dados e sua

normalização para a construção de serviços de internet dinâmicos?

Objetivo Geral e norteador deste trabalho consiste em construir um texto ponte para

ligar ao leitor à fala de autores que abordam a tecnologia Ajax (Asyncronous Java Script

And Xml), um objetivo específico é esclarecer de que se trata o front-end ou Client Side.

Outro objetivo específico é pontuar o que é o back-end ou Server Side. Mais um objetivo

específico é ressaltar a importância de base de dados em serviços web. Um quarto

objetivo específico trata em estabelecer a importância de um sistema bem apresentável

ao usuário final, responsivo e dinâmico via JavaScript; e finalmente um último objetivo

específico é abordar saberes teóricos à nível bibliográfico acerca da tecnologia JavaScript

denominada jQuery que facilita a implementação de soluções Ajax.

14

A metodologia adotada neste projeto consiste na escrita onde mescla leituras sobre a

tecnologia Ajax de referência teórica dos últimos 12 anos, este período por conta de a

tecnologia Ajax não ser novidade no curriculum de desenvolvedores, foram feitas leituras

sobre base de dados por meio do acervo disponível na biblioteca da instituição, a cada

ponto relevante desta análise foram feitos fichamentos, buscou se embasamento teórico

com artigos científicos digitalizados a nível de trabalho de conclusão de curso e finalmente

não menos importante foi necessário também consultar vídeos online, e websites de

tecnologia sobre a implementação de Ajax com base de dados MySQL, as palavras

chaves utilizadas nas buscas seja em acervo da biblioteca, seja em material eletrônico na

internet foram: Ajax e MySQL, Ajax e base de dados, JavaScript e base de dados,

websites responsivos, websites dinâmicos, tecnologias de desenvolvimento de websites,

servidor web, servidor de base de dados, JavaScript e servidor.

15

2 ACERCA DA INTERATIVIDADE PARA O USUÁRIO

Assim como ressalta Barbosa (2010, p.7) existem diversos atores

envolvidos na implementação e uso de sistemas interativos, desde fabricantes de

hardware, de software, vendedores, profissionais de suportes, provedores de internet,

produtores de conteúdo, usuários, entre outros. Cada um na sua especialidade com

diferentes usos do sistema computacional interativo, todas estas partes envolvidas

costumam serem chamados de stakeholders.

Ainda assim como analisou Barbosa (2010), existe uma diferença sutil e

importante entre o que um sistema interativo deve permitir fazer (visão do cliente

responsável pela compra), o que ele deve de fato permitir fazer (visão de quem

produz, focada nas funcionalidades do software), e a maneira como ele é utilizado

(visão dos usuários, focada em que o software afeta seu trabalho ou sua vida).

Bem como analisou este mesmo autor, grande parte da Computação e

especificamente a subárea da Engenharia de Software, busca em sua finalidade

construir sistemas interativos mais eficientes, robustos, livres de erros e que possuem

fácil manutenção. De forma que é um desafio construir sistemas que lidam com a

criatividade e a reinterpretação das coisas pelas pessoas.

Assim como a autora listou, a área de Engenharia de Requisitos privilegia os

critérios de qualidade da Engenharia de Software, enquanto a área de Interação

Humano-Computador privilegia a qualidade de uso dos sistemas interativos.

Macedo (2004, p. 201 - 239) defende técnicas de mudar o estilo de um website

na Internet dinamicamente, usando JavaScript, PHP ou ASP, onde o autor destaca

três formas que praticamente têm o mesmo resultado: permitir ao usuário escolher a

folha de estilo CSS a seu gosto. Isto é válido pelo fato de que mune o usuário com a

possibilidade de interagir com a página, dotando aquela pessoa usos de

funcionalidades que lembram as customizações de quando em sua residência a

pessoa pode escolher a temperatura ideal para o ar-condicionado, ou também em um

automóvel escolher a estação de rádio mais adequada, ou seja, na web também é

possível tornar o usuário inserido na mecânica utilizada na veiculação da informação.

Aqui defende também a utilização do Ajax no contexto social da acessibilidade.

Para tornar o conteúdo web acessível a pessoas com deficiência qualquer que seja,

possibilitando inclusão e democratização da informação.

16

Macedo (2004, p. 242) explica acerca das três prioridades estipuladas pela

Web Content Accessibility Guidelines 1.0 do W3C (World Wide Web Consortion) que

pode ser encontrado no endereço https://www.w3.org/WAI/standards-

guidelines/wcag/. Segundo o autor mesmo que tentando e não conseguindo criar um

documento acessível, recomenda-se fornecer um link para um documento alternativo,

que baseado nas tecnologias W3C contenha informações (ou funcionalidades)

equivalentes, e este documento a cada alteração deve ser atualizado na mesma

frequência para que sempre este documento acessível seja compatível com o

documento original.

Assim como alerta Nielson (2007, p. 226) o design de interface pode aleijar ou

conferir poderes aos usuários na Web. Apesar de o termo “aleijar” ser bem forte é de

fato um termo apropriado pois um website que não adota minimamente os padrões de

responsividade e acessibilidade causa grande lesões digitais no usuário, que muitos

deles podem usar o serviço web pela última vez. O autor ressalta ainda que um bom

website deve ser acessível a todos os públicos sem restrição, e assim, estes podem

ter diferentes necessidades físicas ou não.

Este pesquisador assegura que quando se elimina um obstáculo do caminho

das pessoas faz com que a deficiência seja vencida, garantindo bons usos da

aplicação. E, estabelece ainda, que possibilitando ao usuário aumentar de certa forma

o tamanho de textos no monitor de vídeo garante certo nível de acessibilidade, uma

vez que a população envelhece e o nível de visão das pessoas reduz em função da

idade, portanto, esta funcionalidade é importante em diversos contextos, por exemplo,

em situações de baixa resolução da tela do usuário.

17

2.1 CONVENÇÕES UTILIZADAS NESTA PESQUISA

Por conta de ter uma referência e pelo desejo de encontrar os limites do objeto a

se observar, delimitando um conjunto específico esta pesquisa buscou analisar

principalmente termos chaves que ligavam em tecnologias específicas. Mesmo que este

trabalho de pesquisa não tenha escopo para estudo de caso, buscou se orientar em

soluções que abrangessem estas tecnologias listadas abaixo:

Como framework JavaScript foi estabelecido o jQuery.

Para framework front-end com um padrão visual único foi escolhido Bootstrap.

Acerca de base dados esta obra serviu se do Banco de Dados Relacional MySQL.

No contexto de programação back-end, ficou estipulado a linguagem PHP.

As palavras base de dados e banco de dados são sinônimos nesta pesquisa, ambos

termos retratam o mesmo objeto.

18

3 BREVE HISTÓRIA DA LINGUAGEM JAVASCRIPT

Gonçalves (2007, p.3) ressalta que a linguagem de marcação HTML

(HyperText Markup Language) que precisava evoluir, pelo fato de os projetistas de

páginas terem o anseio de deixar as páginas mais dinâmicas e ter controle da

aparência dos elementos das páginas, de fato aconteceu a evolução do HTML, mas

precisava mudar ainda mais e deixar as páginas mais complexas com interações com

usuários e demais funcionalidades que deixaram evidente que o HTML por si só era

incapaz de atender à demanda, o que desencadeou o surgimento da linguagem

JavaScript.

Gunkel (2018), estabelece uma breve história acerca desta linguagem de

programação, que segundo este pesquisador a criação da linguagem aconteceu em

1995, gerado por uma pesquisa da Netscape proprietária do então navegador de

internet que era o browser mais popular nesta época, a linguagem de programação

surgiu inicialmente com o nome de LiveScript, com o objetivo de estender as

capacidades de páginas HTML inicialmente eram estáticas recebendo dados do

servidor dedicado e ocupado para o navegador na máquina do usuário.

Assim como observa Gonçalves (2007) a linguagem JavaScript foi criada por

Brendan Eich funcionário da Netscape, e esta tecnologia foi implementada no

navegador Netscape Navigator na versão do browser, sendo o primeiro navegador a

fazer uso desta tecnologia, e, logo em seguida a Microsoft adotou esta tecnologia no

navegador Internet Explorer na terceira versão do browser.

Gunkel (2018), ressalta ainda que depois do lançamento da linguagem Java

pela Sun Microsystems foi estabelecido uma nova abordagem para a linguagem que

passou a ser designada como JavaScript, no entanto, apesar da similaridade no

nome, ambas linguagens Java e JavaScript são completamente diferentes. Após ser

verificado tamanha importância da linguagem JavaScript pela Microsoft, a

organização criou duas novas linguagens, a saber a JScript e a VBScript, em que

segundo este especialista, a linguagem JScript é levemente compatível com

JavaScript e a linguagem VBScript é uma sub implementação da linguagem Visual

Basic.

Gunkel (2018), mostra ainda que houve certa competição entre dois grandes

nomes de empresas da época, que brigavam por estabelecerem que sua linguagem

e navegador de internet eram mais relevantes. Observe que Microsoft e Netscape

19

naquela época brigavam pela popularização de sua marca, mas finalmente

concordaram em utilizar um padrão neutro vindo como solução da ECMA (European

Computer Manufacturers Association), que produziram o padrão em julho de 1997. O

pesquisador observa ainda que até a presente data o padrão ainda não foi

completamente absorvido em implementações das principais linguagens de

programação do mercado.

20

3.1 FRAMEWORKS BASEADOS EM JAVASCRIPT

Aqui tem uma modesta lista de frameworks JavaScript, sabe se que a lista de

frameworks desta tecnologia é extensa, aqui estabelece que inteligentemente não se

deve abraçar todas as soluções, mas é relevante estar informado acerca do que tem

no mercado e cada programador aprecia para si determinada tecnologia e adota

determinada causa para estudar e desenvolver.

Angular.js – Trata-se de um dos principais frameworks JavaScript na Web, que

segundo Cechinel (2018) o Angular.js foi concebido de certo modo numa frustrada

implementação dos engenheiros da Google, que trabalharam no projeto no sistema

Google Feedback, onde uma solução que já passava das 18 mil linhas em um projeto

que passou de seis meses para desenvolver, o engenheiro Misko Hevery conseguiu

reduzir em um prazo menor para um novo código com pouco mais de um mil e

quinhentas linhas, com praticamente todas as funcionalidades modulares, reutilizáveis

e testáveis. Dando início ao nascimento da tecnologia que é conhecida como

Angular.js.

Dojo Toolkit – Assim como estabelece Santana (2018) acerca do Dojo, esta biblioteca

ou framework em JavaScript possui eventos, códigos de manipulação DOM, é bem

documentado principalmente nas extensões Dijit que permite a criação widgets para

a implementação de temas de websites parcialmente prontos. Segundo a

pesquisadora, a ferramenta JavaScript também permite a visualização de material

sobre o Dojox, que é a interface de instalação de extensões para o Dojo. E que

segundo a autora ainda, o material na internet de tutoriais acerca do Dojo é pouco

escasso em relação a outros frameworks, a saber o jQuery por exemplo. A autora

ressalta também que o Dojo é relativamente rápido, sendo mais leve em comparação

a outros frameworks JavaScript.

jQuery – Stoffel (2018) define JQuery pela sua simplicidade de implementação de

soluções baseadas em JavaScript, possui código livre e aberto, de forma que

gratuitamente este framework pode ser usado livremente para implementação de

projetos pessoais, comerciais, ou para o fim a que se deseja. O autor ressalta ainda

que este framework foi criado por John Resig com a missão de possibilitar que tanto

21

designers quanto programadores iniciantes possam fazer uso do framework com

produtividade, afinal o lema deste framework é escreva pouco e faça mais. EIFFEL

(2018) estabelece ainda que o jQuery possui características como, rapidez, código

pequeno e rico em recursos. Com este framework pode gerar conteúdo HTML em

páginas web, manipulação de eventos, animações, tem o Ajax simples de se

implementar e compatibilidade com os navegadores mais populares.

Node.js – Oliveira (2018) pontua que Node.js é uma plataforma criada a partir do

motor do Google Chrome (V8), com o propósito inicial de servir para a criação de

programas de redes escaláveis, foi desenvolvida por Ryan Dahl em 2009,

estabelecido como um framework JavaScript para operar no lado servidor da

aplicação. Este estudioso verificou também que diferente de várias plataformas

modernas, Node.js é assíncrono e não precisa abrir várias threads para as execuções

concorrentes, o que evita bloqueio da operação. Oliveira (2018) verificou também que

em 2012 esta ferramenta já tinha mais de 3,5 milhões de usuários desenvolvedores e

com previsão de ainda mais crescimento nos anos seguintes, que tornou uma

ferramenta ideal para desenvolvimento de aplicações web, aplicações em tempo real,

aplicações para dispositivos móveis, aplicações desktop, ideal também para micro

serviços e útil também para internet das coisas.

React.js – Damasceno (2018), define React.js como um framework JavaScript

implementado para o desenvolvimento de interfaces interativas. Utiliza JavaScript

para renderizar os componentes a partir da alteração dos estados do objeto, de forma

que só serão atualizados os componentes que mudaram seu estado. Segundo o autor,

a partir de requisições Ajax se alimenta a aplicação com os dados necessários e com

esta solução também se pode gerar views de interação entre o lado cliente e o lado

servidor.

22

4 BASE DE DADOS NO CONTEXTO DE PROGRAMAÇÃO AJAX

Aqui se busca identificar saberes relevantes sobre a linguagem JavaScript e

investiga-se a aplicação desta linguagem no Front-End de WebServices baseados em

base de dados relacionais. Para Gonçalves (2006, p. 306) banco de dados relacionais são

estruturas na computação onde se armazena dados necessários para alguma aplicação.

O autor estabelece também que dados é tudo que se pode armazenar no

computador: texto; números; caracteres; imagens. Para que uma base de dados seja

relacional deve haver tabelas e colunas que se relacionam entre si, por meio de um valor-

chave contido em uma tabela. Busca se naturalmente que se haja harmonia no sistema,

acredita-se que a modelagem de dados deve ser bem elaborada para que não ocorra

redundância da informação, e não haja perdas de velocidade das consultas. Há de se

observar que quanto a infraestrutura de rede deve se levar em consideração sua eficácia,

pelo fato de que aplicações assíncronas exigem níveis dedicados de performance.

Assim como ressalta Gonçalves (2007, p. 2) Ajax não é uma tecnologia por si só,

mas trata-se de um conjunto de tecnologias a saber Java-Script, XML, DOM (Document

Object Model) bem como outras bibliotecas que inspiram desenvolvedores de todo globo

terrestre, salienta se que Ajax não é uma tecnologia nova, e tecnologia não é o termo mais

adequado para se referir a este conjunto, trata se bruscamente de engrenagens que giram

o ambiente web há um bom tempo, desde a década de 1990, desta forma não é

necessário reinventar a roda, já existem bibliotecas prontas e altamente recomendadas

para o uso e desenvolvimento Ajax.

De acordo com o que postula Darie (2006, p. 101), um armazenamento de dados

back-end é necessário quando se implementa uma forma de aplicação em que se espera

gerar saídas dinâmicas. E, ainda segundo o autor, a utilização de base de dados

relacionais é uma forma poderosa de poder armazenar e administrar dados. Para a

elaboração deste projeto de pesquisa foi estabelecido MySQL como sistema de base de

dados, haja vista que serviços de internet modernos usam base de dados na completude

do sistema em si, e aqui não é diferente, vale salientar que base dados não é parte de

Ajax o que todavia pode fazer requisições de servidor por meio de dados via HTML, XML

ou JSON, no entanto, acredita-se que que a implementação de sistema de base de dados

com Ajax e aliado também a uma boa prática de programação torna as aplicações web

dinâmicas e responsivas.

23

Uma área comumente utilizada que às vezes até de forma ingênua pelos usuários

é a validação de dados, que assim como Darie (2006, p. 121) ressalta, é uma área sensível

e se usada de forma errônea pode causar danos severos nas funcionalidades da aplicação

seja na escrita ou consulta em base de dados, sendo que há a necessidade de a equipe

de desenvolvimento adotar boas práticas quanto a implementação, seja com estipulação

de campos obrigatoriamente requeridos, aplicação de expressão regular para

normalização e máscaras de texto nas entradas de dados, entre outras posturas

desejáveis, sabiamente o autor explica que determinado sistema tem potencial de ser

utilizado por várias pessoas de diferentes habilidades e intenções.

Darie (2006, p. 121) destaca ainda que validação de formulário historicamente foi

usado de forma massiva via modo de servidor, no entanto observa se que é permissível

fazer esta tarefa também com JavaScript no modo de cliente, que a nível de exemplo,

pode se verificar se um endereço de e-mail foi digitado corretamente, ou se um apelido de

usuário foi digitado no campo respectivo, com o uso de Ajax implementado com suporte a

base de dados pode se atingir níveis satisfatórios de codificação de formulários amigáveis

aos usuários e responsíveis.

É proposto por Darie (2006, p. 123) duas formas de validação de dados, uma no

estilo via cliente por Ajax e outra no estilo via servidor por PHP, no primeiro modo tem-se

a varredura em todos campos da página e verifica quando determinado campo se perde

o foco, o valor deste campo é enviado para o servidor que este valida os dados e retorna

se houve falha ou sucesso como resultado, caso haja erro pode ser implementado uma

mensagem amigável informando o usuário do que está acontecendo para correção

imediata e submeter novamente o formulário. Via servidor com PHP estipulou que quando

o formulário inteiro foi enviado, verifica se os dados estão de acordo com as regras internas

da aplicação, caso não haja erro, os dados submetidos são válidos e aceitos e o

navegador é redirecionado para uma página de mensagem de sucesso, caso haja falha o

usuário pode ser redirecionado para a página de formulários novamente e os campos com

problemas são realçados indicando a necessidade de correção.

Para McLaughin (2006, p. 25), diante da busca por comprometimento em fornecer

um serviço web que contempla as necessidades requeridas, e que devem ser

profissionalmente bem tratadas, emerge então um conjunto de ferramentas web práticas

e bem consolidadas no mercado, que é tema deste estudo que se enreda. Ajax do

acrônimo Asyncronous JavaScript and XML vem à tona possibilitando um leque de

24

funcionalidades que são desejáveis na programação web, via tecnologia de banco de

dados por servidor.

De acordo com Niederauer (2007, p.18) a popularização do Ajax deu-se a partir de

quando as incompatibilidades de sistema operacional e restrições de navegador foram

superadas, desencadeando então seu uso e consolidando boas práticas de programação

que tornam a comunicação com o servidor um aliado na busca de beneficiar o usuário

final, com páginas web que atualizam dinamicamente, diferente do padrão de clique em

link e espera comumente aceito e ainda notoriamente em uso.

De acordo com Silberschatz (2012, pag. 241), programas escritos em

JavaScript podem se comunicar com o servidor Web assíncrono (em segundo plano),

de forma que não interrompe o uso do navegador Web pelo internauta, tornando a

navegação dinâmica e intuitiva apresentado as saídas na tela do usuário. Para que

haja harmonia no sistema acredita-se que a modelagem de dados deve ser bem

elaborada, para que não ocorra redundância da informação, e não haja perdas de

velocidade das consultas. Há de se observar que quanto a infraestrutura de rede deve

se levar em consideração sua eficácia, pelo fato de que aplicações assíncronas

exigem níveis dedicados de performance.

É altamente necessário a modelagem de dados com níveis significativos de

desempenho e segurança uma vez que se trata de uma implementação que custará

processamento e tráfego no servidor Web, presencia-se então um problema quanto a

utilização do Ajax, sobretudo no que diz respeito à disponibilidade do webservice, a

solução deste impasse consiste em estabelecer uma boa infraestrutura de servidor e

implementação de sistemas que adotam uma política sensata de replicação dos

arquivos trafegados em longas distâncias conectando os usuário a servidores que

estão localizados mais próximos geograficamente, e também, é aceitável a adoção de

boas práticas quanto ao uso do Ajax, de forma que não sobrecarrega

demasiadamente o servidor e ainda assim conduz boa experiência de uso e

navegação no serviço. Assim como postula Silberschatz (2012, pag. 547) a replicação

em um sitio remoto é indispensável para que haja alta disponibilidade do sistema,

assegurando de certa forma níveis aceitáveis de desempenho e de imunidade quanto

a desastres naturais ou incêndios.

Assim como estabelece Silberschatz (2012), a primeira forma normal em Base

de Dados no modelo Entidade-Relacionamento prevê que neste contexto de forma

normal admite-se que todos os domínios devem ser atômicos. Evitando retrabalho do

25

programador em compreender a estrutura de dados empregada na modelagem da

base de dados com nomes compostos, é preciso evitar redundâncias e

inconsistências na base de dados, uma vez que forçar a aplicação da primeira forma

normal em entidades que tem nomes compostos e complexos é insustentável e

dispensável inicialmente conforme propõe esta teoria da primeira forma normal.

Elucidando o que postula ainda Silberschatz (2012) a segunda forma normal é pouco

abordada pelo fato de que esta tem apenas interesse histórico.

26

4.1 COLOCANDO AJAX BASEADO EM BASE DE DADOS PARA FUNCIONAR

Babin (2007, p. 51-59) como forma de exemplo estabelece uma maneira prática

de conectar Ajax com sistema de base de dados MySQL, segue então

sequencialmente alguns passos como lista a seguir. Inicialmente deve se criar a base

de dados em um respectivo SGBD (Sistema de Gerenciamento de Base de Dados) e

estabelecer suas tabelas internas e relacionamentos. É preciso que haja na base de

dados usuário com sua devida senha para ter permissões de acesso ao sistema de

base de dados em questão. Para conectar na base de dados MySQL usando PHP é

necessário usar no código a função MySQLi_connect para tornar viável a

implementação e ligar o usuário que com determinada senha, permite-se acesso ao

sistema, e usando a função MySQLi_select permite-se escolher o banco de dados e

endereço de servidor, de forma que deixa o usuário apto ao próximo passo que são

as consultas em tabelas na base de dados.

Assim como ressalta Babin (2007, p. 53) para se estabelecer uma consulta

dinâmica e sem recarregar toda a página web com suporte a base de dados MySQL

e uso de Ajax, deve se implementar código JavaScript um trecho de código que o

autor denomina functions.js nome de implementação a critério do programador, e

sequencialmente no interior desta função deve se instanciar um objeto de nome

ActiveXObject que é padrão estipulado pela Microsoft caso o navegador do usuário

seja Internet Explorer, e para usuários de browsers como Firefox, Chrome, Opera por

exemplo, deve se instanciar um objeto JavaScript de nome XMLHttpRequest para

estabelecer assim, nível aceitável de compatibilidade.

Babin (2007, p. 55) implementa então, e complementando a função JavaScript

da solução Ajax, propõe funcionalidade que verifica se o elemento da página a que

está se analisando (pego pelo seu único ID) se este possui tamanho de texto igual a

zero (já tem algum conteúdo) se aplica um estilo CSS de Cascading Style Sheet (Folha

de Estilo em Cascata), caso contrário aplica outro estilo CSS diferente e seta o

conteúdo de seu texto para tudo em branco, caso diferentemente este elemento esteja

vazio (empty) a função Ajax faz um requisição que seta o valor do texto do elemento

com o resultado da consulta MySQL via PHP.

Verifica se então caso a mensagem de código de estado do servidor é 4 (o

servidor completou a solicitação), e verifica também se a informação retornada pelo

servidor via XML é 200 (tudo OK), e aliado a isto, com a implementação de innerHTML

27

permite se alterar o elemento da página com a resposta do servidor pelo valor

retornado via responseText.

O autor abordado estabelece ainda uma variável de nome da página PHP de

consulta ao servidor que contém o retorno via base de dados MySQL onde filtra a

saída relevante ao usuário de acordo com implementação Ajax, caso tenha sucesso

na consulta assíncrona. Sabiamente é de se notar que tendo resultado aceitável e

esperado via readyState do servidor seja 4 e status 200 o valor do elemento

considerado é alterado com base na resposta do servidor, “populando” aquele objeto

com o retorno da consulta na base de dados MySQL, onde é possível também aplicar

estilos CSS aos elementos que contém essa nova informação a ser apresentada ao

usuário.

28

4.2 DICAS E PRECAUÇÕES QUANTO AO USO DE AJAX E BASE DE DADOS

Há de se considerar que assim como ressalta Babin (2007, p. 57) há o preço a

pagar pela utilização dessa ferramenta para web, para que não seja um pesadelo a

utilização de consultas assíncronas à base de dados deve se implementar a solução

com certo cuidado. Deve se planejar o serviço web observando atentamente desde o

nível mais básico de um único usuário caso este use múltiplos processos em

determinada página, caso cada página se abra dois ou três processos ao se escalonar

o serviço para dezenas ou centenas de usuários pode comprometer seriamente o

recurso de hardware de processamento e banda do servidor onde a aplicação está

armazenada.

É aconselhável de se fazer um monitoramento de erros MySQL, que de acordo

com as consultas do usuário pode ocorrer certa quantidade de erros no serviço, a

equipe de desenvolvimento deve estar a par destes problemas que por hora pode

estar visível somente para o usuário da aplicação naquele momento. Estabelecendo

uma forma de monitoramento agrega robustez da aplicação de forma que o time de

desenvolvedores receba mensagens de e-mail sobre problemas internos da aplicação

e o usuário receba mensagens curtas e amigáveis sobre o que está acontecendo de

errado ou o que pode ser melhorado.

Babin (2007, p. 58) ressalta também que deve ser otimizado a aplicação de

forma a evitar ou quebrar códigos maliciosos via injeção de SQL, sendo que esta

prática pode ser atacadas com métodos GET por serem vulneráveis a códigos

maliciosos, o autor informa também que o código fonte JavaScript pode ser exibido

por completo no navegador do usuário que assim o inspecionar, e observa ainda que

a equipe de desenvolvedores mais do que nunca deve estar vigilante quanto as

vulnerabilidades do sistema, pois um serviço web está disponível para usuários das

mais diferentes intenções.

É rico o fato de saber que comumente softwares de base de dados que têm

boas práticas de forma que coíbem a injeção de SQL com códigos maliciosos, como

utilização de trechos de códigos como a função MySQL_real_scape_string,

addslashes para variáveis de texto e intval para variáveis baseadas em números, entre

outras que são ferramentas altamente úteis e é recomendado de se usá-las.

29

4.3 CLIENT SIDE VERSUS SERVER SIDE

Há um consenso nos fóruns de internet de que a técnica de programação Ajax

é tanto Client Side (lado de cliente) quanto Server Side (lado de servidor), por conta

de que o Ajax faz requisições diretamente do servidor e preenche a seleção CSS com

a resposta capturada do servidor, que estes dados podem ser arquivos de texto puro,

arquivos de marcação HTML, XML, notação JSON ou até mesmo resultado de

consultas em tabelas de base de dados. Aqui se propõe uma discussão acerca destes

dois aspectos de programação de serviços na internet.

Assim como registrou Sawyer (2014, p. 8) a linguagem de programação

JavaScript foi programada inicialmente com o propósito de ser Client Side e JavaScript

é conectada com o navegador por meio de respostas vindas do servidor web. Para

um website ser baixado e processado no navegador do usuário se faz uma conexão

entre navegador e JavaScript, de forma que a partir do funcionamento do JavaScript

localmente na máquina do cliente se faz acontecer as funcionalidades customizadas.

Sawyer (2014) postula também acerca de que há um outro tipo de programação

web que se trata da programação que tange ao lado do servidor (Server Side), onde

será encontrado em páginas programados em PHP, ASP.NET, Ruby on Rails entre

outras tecnologias de programação voltadas a servidor web. Pelo nome sugestivo

códigos de programação escritos na técnica Server Side são executados em

servidores web remotos, que traz diversos recursos desejáveis como base de dados,

processamento de pagamentos virtualmente, envio e recebimento de e-mails pelo

globo terrestre. Um sério gargalo que programação via servidor enfrenta é porque

necessita de navegador e internet para funcionar, sendo que no modo tradicional de

navegação web após uma consulta deve se esperar o carregamento de toda a página

para poder receber os dados esperados.

Por outro lado, Sawyer (2014) destaca que programação Client Side pode

reagir imediatamente e modificar dinamicamente o que é apresentado no navegador

do usuário, isso sem recarregar toda a página, determinado conteúdo pode aparecer

e desaparecer ou ser atualizado a partir da interação do usuário com a página. Com

responsividade as páginas web são mais parecidas a aplicações para computador que

páginas web estáticas. No entanto JavaScript não é a única ferramenta de

desenvolvimento Client Side disponível, pode se usar plug-ins para tornar as páginas

30

web mais inteligentes como o uso de Java Applets escritos na linguagem de

programação Java, são pequenos trechos de códigos que rodam no navegador.

Este estudioso observou que Ajax traz junto Client Side e Server Side para a

mesma aplicação web, segundo Sawyer Ajax é um método para usar JavaScript para

“conversar” com o servidor, pegando informações diretamente do servidor, e

atualizando elementos da página sem carregar toda a página web. Google Maps usa

esta tecnologia para permitir o usuário “andar” pelo mapa sem força-lo a carregar uma

nova página durante a utilização.

Assim como Sawyer (2014) enfatiza, está se encontrando interessantes usos

na utilização de JavaScript em páginas web. Node.js por exemplo, é uma versão

Server Side de JavaScript que permite conectar com base de dados, acessar sistemas

de arquivos de servidor, e agilizar muitas tarefas de servidor web.

Este pesquisador percebeu que adicionalmente tem se concebido novos

sistemas de base de dados que em sua estrutura usa se programação em JavaScript,

a saber, MongoDB e CouchDB que são populares exemplos disso. Pode se escutar o

termo full-stack JavaScript, que se trata do uso de JavaScript como linguagem no

modo Client Side, servidor web e controle de base de dados, ou seja uma linguagem

de programação mestra para controle de todo sistema web.

31

5 UMA ABORDAGEM SOBRE JQUERY

Gonçalves (2007, p. 221) define jQuery como sendo uma biblioteca que facilita

no desenvolvimento com JavaScript, de forma que permite fazer as mesmas

solicitações, porém com linhas de código mais reduzido, ou seja, permite certa

praticidade no desenvolvimento. O autor ressalta ainda que esta biblioteca em

JavaScript tem características desejáveis na programação sobretudo programação

web, uma vez que possui tamanho final reduzido do código fonte e tem a caraterística

marcante de sua simplicidade no desenvolvimento de aplicações Ajax.

Assim como sucintamente estabelece Duckett (2015, p. 296) jQuery é um

arquivo JavaScript que é incluído em páginas web, jQuery permite localizar elementos

por meio de seletores CSS e então fazer algo para com os elementos usando métodos

jQuery.

Assim como estabelece Silva (2009, p. 117) a biblioteca jQuery possui

funcionalidades Ajax que são organizadas pelo escritor em três pilares: requisições

Ajax, eventos Ajax e miscelânea. De forma que segundo o autor, nas requisições Ajax

estão reunidas as funções para diferentes tipos de requisições, que a nível de exemplo

estão contemplados métodos HTTP, POST e GET assim como também as

requisições JSON.

Duckett (2015, p. 296-297) ressalta caraterísticas e vantagens de se usar

jQuery ao invés do tradicional DOM (Document Object Model) que são:

• JQuery possui sintaxe do código mais simples.

• É multi-navegador e não exige que se escreva código de fallback (usar

versão mais antiga caso haja erro).

• Simplicidade e precisão ao selecionar elementos por usar a sintaxe de

estilos CSS.

• Por ter tido continuidade possui compatibilidade com os principais

navegadores modernos.

Depois de se fazer uma seleção em elementos CSS pode se aplicar métodos a ela.

O front-end consiste na parte de programação que roda na máquina do usuário, em

que o navegador faz o download da parte em HTML, CSS e JavaScript que

armazenados em cache rodam localmente pelo navegador.

Durante este projeto de pesquisa o framework jQuery esteve em sua versão jQuery

3.3.0, esta tecnologia tem o lema “write less, do more” que em português consiste na

32

ideia de que se pode com esta ferramenta fazer mais coisas escrevendo bem pouco,

de forma que é sugerido que os resultados podem ser obtidos com menos esforço de

programação.

Na Home Page de publicação desta tecnologia tem uma versão disponível

denominada jQuery Migrate 1.4.1, que segundo a página oficial trata se de um plugin

para simplificar a transição entre versões antigas deste framework, que está na versão

comprimida (sem mensagem de alerta caso haja problemas) e versão sem

compressão (gera alertas no console caso encontre problemas), aqui está o link caso

esteja interessado em começar a usar esta biblioteca: <https://jquery.com>.

Escolhendo adequadamente se deseja a versão comprimida ou a versão sem

compressão, cuja diferença evidentemente consiste no tamanho final do arquivo

requisitado. Para inclusão do jQuery deve se adicionar no cabeçalho da página a

localização do script com extensão .js baixado do site da biblioteca jQuery, como

exemplo se tem este link de solicitação remota:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

33

5.1 ACERCA DO MATERIAL EXTERNO DESTA OBRA

YogiHosting (2018) fornece a seu público de usuários ou visitantes uma

programação ilustrativa do processo de funcionamento do Ajax em seus aspectos

gerais, onde mostra em seu código uma implementação para codificação do website

de usuários parceiros ou para o público em geral que listados abaixo tem os códigos

em que a facilitadora propôs para requisição de dados (fetch data):

a) Requisitar dados de um arquivo de Texto puro.

Aqui se retorna todo o conteúdo do texto de nome file.txt onde está na mesma pasta

que está o arquivo html solicitante.

b) Requisitar dados de um arquivo de marcação HTML.

Aqui se retorna todo o arquivo da linguagem de marcação com seus elementos

organizados e exibidos na mesma página no arquivo solicitante.

c) Requisitar dados de um arquivo baseado em JSON.

Requisita o texto do arquivo nesse formato com notação específico que é uma

alternativa ao XML.

d) Requisitar dados de um arquivo escrito em XML.

e) E por fim, propositadamente a empresa propõe um código com erro na

consulta,

Todas essas requisições podem ser encontradas em sua íntegra no Apêndice A.

Webslesson (2018) propõe também uma solução de implementação de um CRUD

(Create, Read, Update e Delete em base de dados) para a Web e forma que utiliza

JQuery e Bootstrap para a programação de uma solução Ajax completa para usuários

iniciantes de programação que desejam aprender o funcionamento da tecnologia

baseada em JavaScript por meio do código fonte, onde o portal fornece o código em

sua página oficial: e também tem o costume de publicar vídeos na plataforma de

vídeos Youtube acrescentando assim seu alcance de público, com material narrado

em inglês.

O código fonte da API e o código fonte da base de dados estão na íntegra

organizados nos Apêndices B, C, D, E e F respectivamente.

34

6 PROPOSTA DE TRABALHOS FUTUROS

1) Apuração das eleições municipais aliado ao TRE (Tribunal Regional Eleitoral),

para que os eleitores tenham a informação imediata da apuração das eleições pelas

urnas que forem sendo retirados os votos, de forma que a página seja atualizada com

frequência a cada certa quantidade de votos que forem analisados por funcionários

ou voluntários que fazem parte do grupo responsável por esta tarefa democrática

importante, as práticas baseadas em Ajax e Base de Dados neste sentido julga se

importante e sigilosa com certo grau de segurança e facilidade de acesso da

informação, com um sistema responsivo, robusto, acessível em sua utilização, e de

fácil manutenção assim como prevê a Engenharia de Software.

2) Blog da disciplina de Língua Portuguesa, nesta aplicação da tecnologia Ajax

na Educação seja ela privada ou pública, consiste no fato de o professor(a) ser o

moderador principal de uma comunidade virtual de alunos de determinada escola

onde a partir do uso desta tecnologia (Ajax) aliada a uma Base de Dados bem

estruturada o aluno poderá lançar suas respostas a perguntas que o professor fizer

"para casa", ou atividade de redação ou resenha baseada em determinado livro, onde

o professor imediatamente receberá as respostas do aluno na página principal, e em

pouco tempo o professor(a) poderá já avaliar o trabalho e rendimento do aluno, que

neste momento o aluno estando com a página de envio da resposta poderá receber

na mesma tela sem sair da página e ver sua nota que foi atribuída pelo professor sem

carregar toda a página novamente, vendo o conteúdo que foi atualizado, por meio de

uma interface web interativa.

3) Aplicação da tecnologia Ajax em uma empresa de produção de conteúdo, seja

jornal web, ou revista eletrônica veiculada na web, com a tecnologia de programação

Ajax este desenvolvedor poderá criar uma interface interativa inteligente que permitirá

aos usuários da aplicação, a possibilidade de eles interagirem ativamente da dinâmica

do webservice, onde eles terão os campos para lançarem as notícias, e terão o

feedback em tempo oportuno dos artigos e temas mais gostados e comentados pelos

usuários, facilitando a gestão do conteúdo web, de forma que os escritores poderão

ter insights de o que escreverem em um segundo momento futuro, baseado em uma

prática defendida pela disciplina de Interação Humano-Computador, tudo isto baseado

em Ajax: JavaScript e XML assíncrono e tecnologia de Base de Dados Relacional.

35

7 CONSIDERAÇÕES FINAIS

Com esta pesquisa se verificou a escassez de material quanto a

implementação de base de dados com a tecnologia Ajax, uma vez que não se tem

acesso de imediato com JavaScript nas consultas nas tabelas da base de dados,

sendo necessário usar aliado ao JavaScript uma segunda linguagem de programação

para o lado do servidor, e alimentar as saídas nos elementos da página com o

resultado da consulta.

Foi possível perceber que o uso da linguagem JavaScript cresceu

significativamente, e se tem cada framework especializado em sua área, torna

acessível as funcionalidades que outrora não era possível, com o advento destes

novos frameworks tornou esta linguagem de programação obrigatória no curriculum

de programador web. Verificou se que mesmo que a linguagem JavaScript ter sido

projetada para trabalhar no lado cliente, o Ajax permite fazer a comunicação com

servidor remoto e preencher os elementos com respostas vindas do servidor de base

da dados, isto se aliado com uma segunda linguagem do lado servidor como PHP,

Ruby ou Java, sem falar no servidor Node.js que é um capítulo a parte quando se trata

de implementação JavaScript com solução que foge do escopo de programação front-

end (lado do cliente) e minimamente preso no navegador do usuário.

Analisou se também que no processo de implementações de serviços web,

deve se levar em consideração a segurança da informação e não é aconselhável

sobrecarregar o servidor de hospedagem do serviço com muitas consultas

assíncronas desnecessárias.

Com a visita nos websites listados, a saber Yogihosting (2018), Webslesson

(2018) e a partir do material localizado nos apêndices, pôde se analisar o

funcionamento da tecnologia Ajax na prática, seja requisitando arquivos estáticos

como documento de texto puro, documento HTML, ou documento XML ou documento

JSON, ou até mesmo consultas em um servidor de base de dados onde os resultados

das tabelas são verificados quase que instantaneamente pelo usuário em que o READ

(leitura) dos dados da tabela são sincronizados na página sem a necessidade de

atualizar o conteúdo da página inteira, atualizando apenas aquele elemento de

marcação onde o dado deve ser apresentado.

36

REFERÊNCIAS

BABIN, L. Ajax with PHP: From Novice to Professional: Build powerful interactive web applications by harnessing the collective power of PHP and Ajax! New York: Apress, 2007. BARBOSA, S. D. J. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2010. CECHINEL. A. Avaliação do framework Angular e das bibliotecas React e Knockout para o desenvolvimento do FrontEnd de aplicações Web. Disponível em:<https://repositorio.ufsc.br/bitstream/handle/123456789/182199/TCC%20PROJETOS%202%20-%20ALEXANDRE%20CECHINEL.pdf?sequence=1> Acesso em: 12 nov. 2018. DAMASCENO, D. H. M. Aplicação Web para Contagem de Tamanho Funcional de Software. Disponível em: <https://fga.unb.br/articles/0001/6943/TCC_FGA.pdf> Acesso em: 18 nov. 2018. DARIE, C. Ajax and PHP Building Responsive Web Applications. UK: Packt Publishing Ltd, 2006. DUCKET, J. JavaScript & jQuery: desenvolvimento de interfaces web interativas. Rio de Janeiro: Alta Books, 2015. GONÇALVES, E. Dominando AJAX. As melhores práticas ligadas a aplicações Web escritas tanto em Java como em PHP 5 utilizando Ajax. Rio de Janeiro: Editora Ciência Moderna Ltda, 2006. GONÇALVES, E. Ajax na Prática. Rio de Janeiro: Editora Ciência Moderna Ltda, 2007. GUNKEL. D. J. Introduction to JavaScript. Disponível em: < http://gunkelweb.com/coms359/texts/javascript.pdf> Acesso em: 18 nov. 2018. Macedo, M. S. Construindo sites adotando padrões Web. Rio de Janeiro: Editora Ciência Moderna Ltda. 2004. MCLAUGHLIN, B. Use a Cabeça! (Head Rush) Ajax. Rio de Janeiro: Editora Alta Books, 2006. NIEDERAUER, J. Web Interativa com Ajax e PHP. São Paulo: Novatec Editora, 2007. Nielson, J. Usabilidade na Web. Rio de Janeiro: Elsevier, 2007.

37

OLIVEIRA. L. G. ATLOM.JS: UM FRAMEWORK NODE.JS PARA APLICAÇÕES WEB BASEADO EM COMPONENTES. Disponível em: < http://www.repositorio.ufc.br/bitstream/riufc/29556/3/2017_tcc_lgoliveirajunior.pdf> Acesso em: 10 nov. 2018. SANTANA. J. P. JQuery ou Dojo, qual biblioteca JavaScript usar? Disponível em: <https://www.alice.cnptia.embrapa.br/bitstream/doc/921115/1/jquery.pdf> Acesso em: 10 nov. 2018. SAWYER, D. M. JavaScript & jQuery: The Missing Manual. Sebastopol: O’Reilli, 2014. SILBERSCHATZ, A. Sistema de Banco de Dados; tradução Daniel Vieira. Rio de Janeiro: Elsevier, 2012. SILVA, M. S. Ajax com JQuery: Requisições Ajax com a simplicidade JQuery. São Paulo: Novatec Editora, 2009. STOFFEL, S. ESTUDO COMPARATIVO ENTRE AS TECNOLOGIAS DE DESENVOLVIMENTO PARA WEB JAVASCRIPT E JQUERY FRAMEWORK Disponível em: <http://www.ucv.edu.br/fotos/files/tcc-versao-final_.pdf> Acesso em: 13 nov. 2018. YOGIHOSTING. JQUERY AJAX COMPLETE GUIDE FOR BEGINNERS AND EXPERTS – 7 EXAMPLES WITH CODES. Disponível em: <http://www.yogihosting.com/jquery-ajax/> Acesso em: 26 out. 2018. WEBSLESSON. Live Add Edit Delete Datatables Records using PHP Ajax. Disponível em: <https://www.webslesson.info/2017/07/live-add-edit-delete-datatables-records-using-php-ajax.html> Acesso em: 13 nov. 2018.

38

APÊNDICE A

YogiHosting (2018) implementou o seguinte código abaixo, para requisições de Texto

puro, HTML, JSON e XML, utilizou na programação jQuery v3.1.0. (Para compactar o

texto, o estilo CSS foi removido e os arquivos finais de requisição ficam a critério de

codificação do leitor programador, que são: “file.txt”; “file.html”; “product.json”;

“product.xml”);

<!DOCTYPE html> <html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery AJAX Method | YogiHosting Demo</title> <link rel="icon" type="image/png" href="http://www.yogihosting.com/wp-content/themes/yogi-yogihosting/Images/favicon.ico"> <meta charset="utf-8"> </head> <body> <h1>jQuery AJAX Method</h1> <h2><a href="http://www.yogihosting.com/jquery-ajax/">Read the tutorial on YogiHosting » </a><button id="reset">Reset »</button></h2> <div class="container"> <div id="content"> <h3>1. Get Content From Text File</h3> <button id="loadTextFile">Try</button> <div id="textData"></div> <h3>2. Get Content From Html File</h3> <button id="loadHtmlFile">Try</button> <div id="htmlData"></div> <h3>3. Get Content From JSON File</h3> <button id="loadJsonFile">Try</button> <div id="jsonData"></div> <h3>4. Get Content From XML File</h3> <button id="loadXmlFile">Try</button> <div id="xmlData"></div> <h3>5. Get Content From Non-Existing Text File</h3> <button id="loadNoTextFile">Try</button> <div id="textNoData"></div> </div> <script> $(document).ready(function () { $("#reset").click(function (e) { location.reload(); }); $("#loadTextFile").click(function (e) {

39

$.ajax({ url: "file.txt", success: function (result, status, xhr) { $("#textData").html(result); } }); }); $("#loadHtmlFile").click(function (e) { $.ajax({ url: "file.html", success: function (result, status, xhr) { $("#htmlData").html(result); } }); }); $("#loadJsonFile").click(function (e) { $.ajax({ url: "product.json", success: function (result, status, xhr) { var table = $("<table><tr><th>Produto</th><th>Cor</th><th>Preço</th></tr>"); var tr; for (var i = 0; i < result.length; i++) { tr = $("<tr>"); tr.append("<td>" + result[i].Produto + "</td>"); tr.append("<td>" + result[i].Cor + "</td>"); tr.append("<td>" + result[i].Preço + "</td>"); tr.append("</tr>"); table.append(tr); } table.append("</table>"); $("#jsonData").html(table); } }); }); $("#loadXmlFile").click(function (e) { $.ajax({ url: "product.xml", success: function (result, status, xhr) { var table = "<table><tr><th>Nome</th><th>Cor</th><th>Preço</th></tr>"; var cols=""; $("produto", result).each(function (i) { tdCol = "<td>" + $(this).find("nome").text() + "</td>"; tdCol += "<td>" + $(this).find("cor").text() + "</td>"; tdCol += "<td>" + $(this).find("preco").text() + "</td>"; cols += "<tr>" + tdCol + "</tr>"; }); table += cols + "</table>"; $("#xmlData").html(table);

40

} }); }); $("#loadNoTextFile").click(function (e) { $.ajax({ url: "no-file.txt", success: function (result, status, xhr) { $("#textNoData").html("Result: " + status + " " + xhr.status + " " + xhr.statusText) }, error: function (xhr, status, error) { $("#textNoData").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) } }); }); }); </script> </body> </html>

O código acima está disponível em YogiHosting (2018).

41

APÊNDICE B

Neste apêndice tem o CREATE, o C do acrônimo CRUD, que é baseado em uma

consulta ao banco de dados com Insert, inserindo os valores dos campos

correspondentes, para inserção de nome e sobrenome na tabela.

Aqui se têm “insert.php” código da solução proposta por Webslesson (2018).

<?php $connect = MySQLi_connect("localhost", "root", "", "crud_ajax"); if(isset($_POST["first_name"], $_POST["last_name"])) { $first_name = MySQLi_real_escape_string($connect, $_POST["first_name"]); $last_name = MySQLi_real_escape_string($connect, $_POST["last_name"]); $query = "INSERT INTO user(first_name, last_name) VALUES('$first_name', '$last_name')"; if(MySQLi_query($connect, $query)) { echo 'Data Inserted'; } } ?>

Note que o READ R do acrônimo CRUD, está no arquivo principal de nome “index.php”, com uma seleção e apresentação dos dados automática, fazendo acontecer o mecanismo do Ajax, de atualizar elementos da página sem a necessidade de carregar toda a página: sem refresh.

42

APÊNDICE C

Neste apêndice se tem o UPDATE, o U do acrônimo CRUD, que é baseado em

uma consulta ao banco de dados com o comando de mesmo nome UPDATE,

atualizando os valores nos campos correspondentes, para alteração em nome e

sobrenome na tabela quando o id passado estiver presente no banco.

Aqui se têm “update.php” código da solução proposta por Webslesson (2018).

<?php $connect = MySQLi_connect("localhost", "root", "", " crud_ajax "); if(isset($_POST["id"])) { $value = MySQLi_real_escape_string($connect, $_POST["value"]); $query = "UPDATE user SET ".$_POST["column_name"]."='".$value."' WHERE id = '".$_POST["id"]."'"; if(MySQLi_query($connect, $query)) { echo 'Data Updated'; } } ?>

43

APÊNDICE D

Aqui neste apêndice consta o DELETE, a última letra do acrônimo CRUD, que

é baseado em uma consulta ao banco de dados com o comando de mesmo nome

DELETE, apagando o registro que tem o id especificado como parâmetro, que foi

coletado com o método POST.

Aqui se têm “delete.php” código da solução proposta por Webslesson (2018).

<?php $connect = MySQLi_connect("localhost", "root", "", " crud_ajax "); if(isset($_POST["id"])) { $query = "DELETE FROM user WHERE id = '".$_POST["id"]."'"; if(MySQLi_query($connect, $query)) { echo 'Data Deleted'; } } ?>

44

APÊNDICE E

É de se estranhar como que ficou grandioso este código em relação aos anteriores,

no entanto aqui se tem toda marcação HTML para recebimento do resultado da

consulta ao servidor por meio do Ajax, e o mecanismo de implementação da API do

Ajax. É de se perceber que grande parte do código está programado em JavaScript,

e também semelhante ao Apêndice A neste Apêndice E foi removido os estilos

customizados e deixou se apenas o estilo padrão do Bootstrap. Note que este código

poderia crescer ainda mais caso não fosse utilizado o framework JQuery.

Aqui se têm “index.php” o código principal da solução proposta por Webslesson

(2018).

<html> <head> <title>Live Add Edit Delete Datatables Records using PHP Ajax</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS" /> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/CSS/bootstrap-datepicker.CSS" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> </head> <body> <div class="container box"> <h1 align="center">Live Add Edit Delete Datatables Records using PHP Ajax</h1> <br /> <div class="table-responsive"> <br /> <div align="right"> <button type="button" name="add" id="add" class="btn btn-info">Add</button> </div> <br /> <div id="alert_message"></div> <table id="user_data" class="table table-bordered table-striped"> <thead> <tr> <th>Frist Name</th> <th>Last Name</th> <th></th> </tr>

45

</thead> </table> </div> </div> </body> </html> <script type="text/javascript" language="javascript" > $(document).ready(function(){ fetch_data(); function fetch_data() { var dataTable = $('#user_data').DataTable({ "processing" : true, "serverSide" : true, "order" : [], "ajax" : { url:"fetch.php", type:"POST" } }); } function update_data(id, column_name, value) { $.ajax({ url:"update.php", method:"POST", data:{id:id, column_name:column_name, value:value}, success:function(data) { $('#alert_message').html('<div class="alert alert-success">'+data+'</div>'); $('#user_data').DataTable().destroy(); fetch_data(); } }); setInterval(function(){ $('#alert_message').html(''); }, 5000); } $(document).on('blur', '.update', function(){ var id = $(this).data("id"); var column_name = $(this).data("column"); var value = $(this).text(); update_data(id, column_name, value); }); $('#add').click(function(){ var html = '<tr>'; html += '<td contenteditable id="data1"></td>'; html += '<td contenteditable id="data2"></td>'; html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs">Insert</button></td>';

46

html += '</tr>'; $('#user_data tbody').prepend(html); }); $(document).on('click', '#insert', function(){ var first_name = $('#data1').text(); var last_name = $('#data2').text(); if(first_name != '' && last_name != '') { $.ajax({ url:"insert.php", method:"POST", data:{first_name:first_name, last_name:last_name}, success:function(data) { $('#alert_message').html('<div class="alert alert-success">'+data+'</div>'); $('#user_data').DataTable().destroy(); fetch_data(); } }); setInterval(function(){ $('#alert_message').html(''); }, 5000); } else { alert("Both Fields is required"); } }); $(document).on('click', '.delete', function(){ var id = $(this).attr("id"); if(confirm("Are you sure you want to remove this?")) { $.ajax({ url:"delete.php", method:"POST", data:{id:id}, success:function(data){ $('#alert_message').html('<div class="alert alert-success">'+data+'</div>'); $('#user_data').DataTable().destroy(); fetch_data(); } }); setInterval(function(){ $('#alert_message').html(''); }, 5000); } }); }); </script>

47

APÊNDICE F

O código fonte da base de dados proposto por Webslesson (2018): CREATE DATABASE IF NOT EXISTS crud_ajax; USE crud_ajax; SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; CREATE TABLE `crud` ( ìd` int(11) NOT NULL, `first_name` varchar(255) COLLATE utf32_bin NOT NULL, `last_name` varchar(255) COLLATE utf32_bin NOT NULL, èmail_id` varchar(255) COLLATE utf32_bin NOT NULL, `gender` varchar(255) COLLATE utf32_bin NOT NULL, àge` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf32 COLLATE=utf32_bin; ALTER TABLE `crud` ADD PRIMARY KEY (ìd`); ALTER TABLE `crud` MODIFY ìd` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12; COMMIT;

Documents

AJAX (ASYNCRONOUS JAVASCRIPT AND XML POSSIBILITANDO …€¦ · ferramentas ajax em construção de websites dinâmicos: Ajax (Asyncronous Javascript And Xml) Possibilitando Design