ajax (asyncronous javascript and xml possibilitando …€¦ · ferramentas ajax em construção de...
Post on 18-Mar-2020
19 Views
Preview:
TRANSCRIPT
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
JOSIEL SOARES DE JESUS
JOSIEL SOARES DE JESUS
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
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
JOSIEL SOARES DE JESUS
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
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` ( `id` int(11) NOT NULL, `first_name` varchar(255) COLLATE utf32_bin NOT NULL, `last_name` varchar(255) COLLATE utf32_bin NOT NULL, `email_id` varchar(255) COLLATE utf32_bin NOT NULL, `gender` varchar(255) COLLATE utf32_bin NOT NULL, `age` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf32 COLLATE=utf32_bin; ALTER TABLE `crud` ADD PRIMARY KEY (`id`); ALTER TABLE `crud` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12; COMMIT;
top related