Desenvolvendo aplicações dinâmicas para Internet

Aula 01 – Apresentação do Curso

Objetivo

Ensinar o participante do curso a criar sites interativos e orientados por dados com a
combinação potente de tecnologias de código aberto e padrões da web, mesmo se você tiver
apenas conhecimentos básicos de HTML.

Você lidará com a programação dinâmica da web com a versão mais recente das tecnologias
principais de hoje: PHP, MySQL, JavaScript, CSS, HTML5 e as principais bibliotecas jQuery.

Web designers aprenderão como usar essas tecnologias juntas e aprenderão práticas valiosas
de programação da web ao longo do caminho - incluindo como otimizar sites para dispositivos
móveis. No final do treinamento, você colocará tudo junto para construir um site de uma rede
social totalmente funcional adequado para navegadores de desktop e móveis.

O que Aprenderei neste Curso?

• A explorar o MySQL, desde a estrutura do banco de dados até consultas complexas

• A usar a extensão MySQLi, a interface MySQL aprimorada do PHP
• A criar páginas dinâmicas da web em PHP que se adaptam ao usuário
• A gerenciar cookies e sessões e manter um alto nível de segurança
• Aprimorar a linguagem JavaScript com bibliotecas jQuery e jQuery mobile
• A criar chamadas Ajax para usar a comunicação do navegador-servidor em segundo
plano
• A estilizar suas páginas da web adquirindo habilidades CSS2 e CSS3
• A implementar recursos HTML5, incluindo geolocalização, áudio, vídeo e o elemento
canvas
• A reformatar seus sites em aplicativos da web para celular

A combinação de PHP e MySQL é a abordagem mais conveniente para Web design dinâmico,
baseado em banco de dados, mantendo-se diante dos desafios de frameworks - como Ruby on
Rails - que são mais difíceis de aprender.

Devido ao seu código aberto (ao contrário do concorrente Microsoft .NET Framework), é
gratuito para implementar e é, portanto, uma opção extremamente popular para
desenvolvimento web.

Qualquer candidato a desenvolvedor em uma plataforma Unix/Linux ou mesmo

Windows/Apache irá precisar dominar essas tecnologias. E, combinado com as tecnologias
parceiras de JavaScript, jQuery, CSS e HTML5, você será capaz de criar sites do calibre de padrões
da indústria como Facebook, Twitter e Gmail.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Público alvo

Este curso é para pessoas que desejam aprender como criar sites dinâmicos e eficazes. Isso inclui
webmasters ou designers gráficos que já estão criando sites estáticos, que desejam levar suas
habilidades para o próximo nível, bem como alunos do ensino médio, estudantes universitários
recém-formados e indivíduos autodidatas.

Na verdade, qualquer pessoa pronta para aprender os fundamentos do web design responsivo
e obter uma base sólida nas principais tecnologias de PHP, MySQL, JavaScript, CSS e HTML5, e
você aprenderá o básico das bibliotecas jQuery e jQuery Mobile.

Requisitos básicos

O único requisito para este curso é que você tenha disposição para aprender e possa dedicar
pelo menos uma hora por dia para praticar com os exemplos deste curso.

Suposições que fizemos

Este curso assume que você tem um conhecimento básico de HTML e saiba pelo menos criar um
site estático e simples, mas não pressupomos que você tenha qualquer conhecimento prévio
em PHP, MySQL, JavaScript, CSS ou HTML5 - embora se você já tiver conhecimento nessas
tecnologias, seu progresso ao longo do curso será ainda mais rápido.

Como este curso foi organizado

As aulas deste curso estão em ordem específica, primeiro apresentamos todas as principais
tecnologias que cobriremos e, em seguida, orientamos você durante a instalação de um servidor
de desenvolvimento web e um editor de texto puro para que você esteja pronto para trabalhar
com nossos exemplos.

Na aula 02, você obterá uma base na linguagem de programação PHP, onde cobriremos os
conceitos básicos de sintaxe, arrays, funções e programação orientada a objetos.

Então, com o PHP em seu currículo, você passará para uma introdução ao sistema de banco de
dados MySQL, onde você aprenderá tudo sobre como os bancos de dados MySQL são
estruturados para gerar consultas complexas.

Depois disso, você aprenderá como combinar PHP e MySQL para começar a criar suas próprias
páginas da web dinâmicas integrando formulários e outros recursos HTML. Vocês irão então
abordar os aspectos práticos essenciais do desenvolvimento de PHP e MySQL aprendendo uma
variedade de funções úteis e como gerenciar cookies e sessões, e também como manter um alto
nível de segurança.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Nas aulas seguintes, você obterá uma base sólida em JavaScript, a partir de funções e
manipulação de eventos para acessar o Document Object Model, inbrowser para validação e
tratamento de erros. Você também obterá uma introdução abrangente sobre a popular
biblioteca jQuery para JavaScript.

Com uma compreensão de todas essas três tecnologias principais, você aprenderá como fazer
chamadas Ajax nos bastidores e transformar seus sites em ambientes altamente dinâmicos.

A seguir, passaremos duas a três aulas aprendendo tudo sobre como usar CSS para estilizar e
organizar suas páginas da web, antes de descobrir como as bibliotecas jQuery podem tornar seu
trabalho de desenvolvimento muito mais fácil.

Nas aulas finais você usará os recursos interativos integrados ao HTML5, incluindo
geolocalização, áudio, vídeo e tela.

Depois de aprender como estas tecnologias trabalham juntas, você reunirá tudo o que aprendeu
em um conjunto completo de programas que juntos constituem um site de rede social
totalmente funcional.

Ao longo do curso, você encontrará muitos conselhos sobre boas práticas e dicas de
programação que pode ajudá-lo a encontrar e resolver erros de programação difíceis de
detectar.

Um pouco de história sobre conteúdo dinâmico da web

A World Wide Web é uma rede em constante evolução que já evoluiu muito além da sua real
concepção no início dos anos 1990, quando foi criado para solucionar um problema específico.

Experimentos de última geração no CERN (Laboratório Europeu de física partículas). O CERN

estava produzindo quantidades incríveis de dados - tantos que os dados se mostravam difíceis
de distribuir aos cientistas participantes, espalhados pelo mundo.

Neste momento, a internet já estava instalada, conectando várias centenas de milhares de

computadores, então Tim Berners-Lee (um cientista do CERN) desenvolveu um método de
navegação entre eles usando uma estrutura de hiperlinks, que veio a ser conhecido como
protocolo de transferência de hipertexto ou HTTP.

Ele também criou uma linguagem de marcação chamada linguagem de marcação de hipertexto
ou HTML. Para juntar tudo isso, ele escreveu o primeiro navegador e servidor da web.

Hoje consideramos essas ferramentas um dado adquirido, mas, naquela época, o conceito era
revolucionário.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

A maior conectividade até aqueles dias era feita por usuários de modem discado conectando-se
a um quadro de avisos (chamados BBS) hospedado por um único computador, onde você
poderia se comunicar e trocar dados apenas com outros usuários desse serviço.
Consequentemente, você precisava ser um membro de muitos sistemas de BBS para comunicar-
se efetivamente eletronicamente com seus colegas e amigos.

Mas Berners-Lee mudou tudo de uma só vez e, em meados da década de 1990, havia três
grandes navegadores gráficos competindo pela atenção de 5 milhões de usuários. Logo ficou
óbvio, porém, que algo estava faltando.

Sim, páginas de texto e gráficos com hiperlinks para levá-lo a outras páginas era um conceito
brilhante, mas os resultados não refletiram o potencial instantâneo dos computadores e da
internet para atender às necessidades específicas de cada usuário com conteúdo que muda
dinamicamente.

Usar a web foi uma experiência muito seca e simples, mesmo que agora tivéssemos rolagem de
texto e GIFs animados!

Carrinhos de compras, mecanismos de pesquisa e redes sociais alteraram claramente a forma

como usamos a internet.

Seguiremos dando uma breve olhada nos vários componentes que fazem a internet e o software
que ajuda a tornar seu uso uma experiência rica e dinâmica.

HTTP e HTML: noções básicas

HTTP é um padrão de comunicação que rege as solicitações e respostas que são enviadas entre
o navegador em execução no computador do usuário final e o servidor da web.

O trabalho do servidor é aceitar a solicitação do cliente e tentar respondê-la de forma

significativa, geralmente servindo a página da web solicitada - é por isso que o termo servidor é
usado.

A contrapartida natural de um servidor é um cliente, então esse termo é aplicado tanto para o
navegador da web quanto para o computador em que está sendo executado.

Entre o cliente e o servidor pode haver vários outros dispositivos, como roteadores, proxies,
gateways e assim por diante. Eles desempenham diferentes funções para garantir que as
solicitações e as respostas são transferidas corretamente entre o cliente e o servidor.

Normalmente, eles usam a internet para enviar essas informações. Alguns desses dispositivos
intermediários também podem ajudam a acelerar a internet, armazenando páginas ou
informações localmente no que é chamado de cache e, em seguida, veicular esse conteúdo para
os clientes diretamente do cache, em vez de obtê-lo totalmente do servidor de origem.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Um servidor web geralmente pode lidar com várias conexões simultâneas e, quando não está se
comunicando com um cliente, ele passa seu tempo ouvindo uma conexão de entrada. Quando
um pedido chega, o servidor envia de volta uma resposta para confirmar o recebimento.

O procedimento de solicitação / resposta

Em seu nível mais básico, o processo de solicitação / resposta consiste em um navegador da web
solicitando ao servidor da web para enviar uma página qualquer e o servidor que envia de volta
a página ao navegador que que a solicitou e este se encarrega de exibir a página solicitada
(consulte a Figura 1-1).

Figura 1-1. A sequência básica de solicitação / resposta do cliente / servidor

As etapas na sequência de solicitação e resposta são as seguintes:

1. Você insere http://server.com na barra de endereço do seu navegador.
2. Seu navegador procura o endereço de protocolo da Internet (IP) para server.com.
3. Seu navegador emite uma solicitação para a página inicial em server.com.
4. A solicitação cruza a Internet e chega ao servidor da web server.com.
5. O servidor web, após receber o pedido, procura a página web em seu disco.
6. O servidor da web recupera a página e a retorna ao navegador.
7. Seu navegador exibe a página da web.

Para uma página simples (estática), este processo também ocorre uma vez para cada objeto
dentro da página: um gráfico, um vídeo incorporado ou arquivo Flash e até mesmo um arquivo
CSS.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Na etapa 2, observe que o navegador procura o endereço IP de server.com. Cada máquina

conectada à internet tem um endereço IP — incluindo seu computador — mas geralmente
acessamos os servidores da web por nome, como google.com. Como você deve saber, o
navegador consulta um serviço adicional de Internet chamado Domain Name Service (DNS) para
encontrar o endereço IP associado ao servidor e usá-lo para se comunicar com o computador.

Para páginas dinâmicas, o procedimento é um pouco mais complicado, pois pode trazer códigos
PHP e MySQL na mistura. Por exemplo, em um site de vendas, você pode clicar em uma imagem
e o PHP irá montar uma solicitação usando a linguagem de banco de dados padrão, SQL - muitos
de cujos comandos você aprenderá neste curso - e enviar a solicitação para o servidor MySQL.

O servidor MySQL irá retornar informações referentes a imagem que você selecionou, e o código
PHP irá transformar tudo em HTML, e o servidor web irá enviar para o seu navegador (veja a
Figura 1-2).

Figura 1-2. Uma sequência dinâmica de solicitação / resposta de cliente / servidor

As etapas são as seguintes:

1. Você insere http://server.com na barra de endereço do seu navegador.
2. Seu navegador procura o endereço IP de server.com.
3. Seu navegador emite uma solicitação para esse endereço para a página inicial do
servidor da web.
4. A solicitação cruza a Internet e chega ao servidor da web server.com.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

5. O servidor web, após receber a solicitação, busca a página inicial em seu disco rígido.
6. Com a página inicial agora na memória, o servidor da web percebe que é um arquivo
que incorpora Script de PHP e passa a página para o intérprete de PHP.
7. O interpretador PHP executa o código PHP.
8. Caso, parte do PHP contenha instruções SQL, o interpretador PHP passa para o
mecanismo de banco de dados MySQL.
9. O banco de dados MySQL retorna os resultados das instruções para o interpretador PHP.
10. O interpretador PHP retorna os resultados do código PHP executado, junto com os
resultados do banco de dados MySQL para o servidor da web.
11. O servidor da web retorna a página ao cliente solicitante, que a exibe.

Embora seja útil estar ciente desse processo para que você saiba como esses três elementos
trabalham juntos, na prática, você realmente não precisa se preocupar com esses detalhes,
porque todos eles acontecem automaticamente.

As páginas HTML retornadas ao navegador em cada exemplo podem conter JavaScript, que será
interpretado localmente pelo cliente e que pode iniciar outra solicitação - da mesma forma que
objetos incorporados, como imagens, fariam.

Os benefícios de PHP, MySQL, JavaScript, CSS e HTML5

No início desta aula, apresentei o mundo da Web 1.0, mas não demorou muito e logo surgiu a
Web 1.1, com o desenvolvimento de melhorias nos navegadores que passaram a “entender”
Java, JavaScript, JScript (uma variante de JavaScript da Microsoft) e ActiveX. No lado do servidor,
o progresso estava sendo feito no Common Gateway Interface (CGI) usando linguagens de script
como Perl (uma alternativa à linguagem PHP) e scripts do lado do servidor - inserindo o conteúdo
de um arquivo (ou a saída de um programa executado localmente) em outro dinamicamente.

Assim que a poeira baixou, três tecnologias principais ficaram de pé acima das outras. Embora
Perl ainda seja uma linguagem de script popular com muitos seguidores, a simplicidade do PHP
e os links integrados para o Sistema Gerenciador de banco de dados MySQL conquistaram mais
do que o dobro do número de usuários. E o JavaScript, se tornou um elemento essencial nessa
equação para manipular dinamicamente Cascading Style Sheets (CSS) e HTML, agora assumem
tarefas ainda mais complexas de lidar com a comunicação assíncrona (troca de dados entre um
cliente e servidor após uma página da web foi carregada) do lado do cliente.

Usando comunicação assíncrona, as páginas da web executam tratamento de dados e envio de

solicitações para servidores da web em segundo plano - sem o usuário da web estar ciente de
que isso está acontecendo.

Sem dúvida, a natureza simbiótica do PHP e MySQL ajudou a impulsioná-los para a frente, mas
o que atraiu os desenvolvedores a eles em primeiro lugar? A resposta simples é a facilidade com
que você pode usá-los para criar rapidamente elementos dinâmicos em sites. MySQL é um

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

sistema de banco de dados rápido e poderoso, mas fácil de usar, que oferece praticamente tudo
o que um site precisa para localizar e fornecer dados aos navegadores.

Quando o PHP se alia ao MySQL para armazenar e recuperar esses dados, você tem as partes
fundamentais necessárias para o desenvolvimento de sites de redes sociais e o início da Web
2.0. E quando você traz JavaScript e CSS para a mistura, você tem uma receita para construir
sites altamente dinâmicos e interativos, especialmente porque agora existe uma ampla gama de
estruturas sofisticadas de funções JavaScript que você pode chamar para realmente acelerar seu
desenvolvimento web, como o conhecido jQuery, que agora é provavelmente a forma mais
comum dos programadores acessarem recursos de comunicação assíncrona.

MariaDB: o clone do MySQL

Depois que a Oracle comprou a Sun Microsystems (os proprietários do MySQL), a comunidade
desconfiou de que o MySQL poderia não permanecer totalmente de código aberto, então o
MariaDB foi criado tal qual o MySQL para mantê-lo livre sob a GNU GPL. O desenvolvimento do
MariaDB é liderado por alguns dos desenvolvedores originais do MySQL e mantém uma
compatibilidade extremamente próxima com MySQL.

Portanto, você pode encontrar MariaDB em alguns servidores em lugar do MySQL - mas não se
preocupe, tudo neste curso funciona igualmente, seja em MySQL ou MariaDB, que se baseia na
mesma base de código do MySQL Server 5.5. Para todos os efeitos, você pode trocar um pelo
outro e não notar diferença.

De qualquer forma, ao que parece, muitos dos medos iniciais parecem ter sido dissipados à
medida que o MySQL permanece open source, com a Oracle simplesmente cobrando pelo
suporte e pelas edições que fornecem recursos adicionais, como replicação geográfica e
dimensionamento automático. No entanto, ao contrário do MariaDB, o MySQL não é mais
voltado para a comunidade, sabendo que o MariaDB sempre estará lá, isso é mais que
necessário, para manter muitos desenvolvedores dormindo a noite, e provavelmente garante
que o próprio MySQL permanecerá open source.

Usando PHP

Com o PHP, é simples incorporar atividade dinâmica em páginas da web. Quando você dá às
páginas a extensão .php, elas terão acesso instantâneo à linguagem de script. Do ponto de vista
do desenvolvedor, tudo o que você precisa fazer é escrever um código como o seguinte:

<?php
echo "Hoje é ". date("l"). ".<br>";
?>
Aqui estão as últimas notícias.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

A tag de abertura <?php diz ao servidor web para enviar ao interpretador PHP todo o código até
a tag de fechamento ?> seja encontrada. Fora destas tags, tudo é enviado diretamente para o
cliente como HTML direto. Então, o texto Aqui estão as últimas notícias. é simplesmente
enviado para o navegador; dentro das tags PHP, a função de data embutida exibe o dia atual da
semana de acordo com o relógio do servidor.

O resultado final das duas partes será exibido da seguinte forma:

Hoje é Quarta-feira. Aqui estão as últimas notícias.

PHP é uma linguagem flexível e algumas pessoas preferem colocar seu texto diretamente ao
lado do código PHP, como abaixo:

Hoje é <?php echo date("l")?>. Aqui estão as últimas notícias.

Existem ainda outras maneiras de formatar e enviar informações, que iremos aprender nas aulas
sobre PHP. A questão é que, com PHP, os desenvolvedores da web têm uma linguagem de script
que, embora não seja tão rápida quanto compilar seu código em C ou linguagem similar, é
incrivelmente rápida e também se integra perfeitamente com a marcação HTML.

Se você pretende inserir os exemplos de PHP deste curso em um editor para trabalhar comigo,
você deve se lembrar de adicionar a tag <?php no início e ?> no final para garantir que seu código
seja processado pelo interpretador PHP.

Usando PHP, você tem controle ilimitado sobre seu servidor web. Se você precisar modificar seu
HTML em tempo real, processar um cartão de crédito, adicionar detalhes do usuário a um banco
de dados ou buscar informações de um site de terceiros, você pode fazer tudo no mesmo
arquivo PHP onde seu HTML reside.

Usando MySQL

Claro, não há muito sentido em alterar a saída HTML dinamicamente a menos que você também
tenha um meio de rastrear as informações que os usuários fornecem ao seu site à medida que
o usam.

Nos primeiros dias da web, muitos sites usavam arquivos de texto "simples" para armazenar
dados como nomes de usuário e senhas. Mas esta abordagem pode causar vários problemas se
o arquivo não for bloqueado corretamente contra a corrupção de vários acessos. Além disso,
um arquivo simples pode ficar muito grande e se tornar difícil de gerenciar - sem mencionar a
dificuldade de tentar mesclar arquivos e realizar pesquisas complexas em qualquer tipo de
tempo razoável.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

É aí que os bancos de dados relacionais com consultas estruturadas se tornam essenciais, e o

MySQL, por ser de uso gratuito e instalado em um grande número de servidores da web da
Internet, aumenta soberbamente para a ocasião.

O MySQL é um gerenciador de sistema de banco de dados robusto e excepcionalmente rápido

que usa comandos semelhantes ao inglês.

O nível mais alto da estrutura MySQL é um banco de dados, dentro do qual você pode ter uma
ou mais tabelas que contêm seus dados.

Por exemplo, vamos supor que você esteja trabalhando em uma tabela chamada usuários,
dentro da qual você criou colunas para sobrenome, nome, e e-mail, e agora você deseja
adicionar um usuário. O comando que você usa para fazer isso é o seguinte:

INSERT INTO users VALUES ('Santos', 'Marcos', '[email protected]');

Obviamente, primeiro você deve criar e abrir seu banco de dados e a tabela, configurar todos os
campos corretamente. Mas o que desejamos aqui no momento é mostrar como é simples inserir
dados em uma tabela com comando SQL INSERT.

O SQL é uma linguagem desenvolvida no início dos anos 1970, é remanescente de uma das
linguagens de programação mais antigas, o COBOL, porém adequada, para consultas de banco
de dados, razão pela qual ainda está em uso depois de todo esse tempo.

É igualmente fácil pesquisar dados. Vamos supor que você tenha um endereço de e-mail de um
usuário e precisa procurar o nome dessa pessoa. Para fazer isso, você pode emitir uma consulta
SQL com o seguinte comando:

SELECT sobrenome,nome FROM users WHERE email='[email protected]';

O MySQL retornará Santos, Marcos e quaisquer outros pares de nomes que possam estar
associados com esse endereço de e-mail no banco de dados.

Como era de se esperar, há muito mais que você pode fazer com o MySQL do que simplesmente
inserir e selecionar dados com os comandos INSERT e SELECT. Por exemplo, você pode combinar
conjuntos de dados relacionados para reunir informações relacionadas, solicitando resultados
em vários pedidos que façam correspondências parciais quando você conhece apenas parte da
string que está procurando pois o MySQL, retornará até o enésimo resultado e muito mais.

Usando PHP, você pode fazer todas essas chamadas diretamente para o MySQL sem ter que
acessar você mesmo a interface de linha de comando do MySQL. Isso significa que você pode
salvar o resultado em arrays (matrizes) para processamento e realização de múltiplas pesquisas,
cada uma dependendo do resultado retornado de pesquisas anteriores, para detalhar o item de
dados de que você precisa.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Para obter ainda mais potência, como você verá mais tarde, existem funções adicionais
integradas ao MySQL que você pode chamar para executar operações comuns com eficiência no
MySQL, em vez de criá-las a partir de várias chamadas PHP para MySQL.

Usando JavaScript

A mais antiga das três tecnologias principais discutidas neste curso é o JavaScript, que foi criada
para permitir o acesso de script a todos os elementos de um documento HTML. Em outras
palavras, ele fornece um meio para interação dinâmica do usuário, como verificar e validar e-
mail, campos em formulários de entrada e exibindo mensagens do tipo "Você realmente quis
dizer isso?" (embora recomendamos não usar JavaScript para segurança, o que deve sempre ser
executado no servidor da web).

Combinado com CSS (que veremos a seguir), JavaScript é o poder por trás das páginas da web
dinâmicas que mudam na frente de seus olhos, de vez em quando uma nova página é retornada
pelo servidor.

No entanto, JavaScript também pode ser complicado de usar, devido a algumas diferenças
importantes nas maneiras que diferentes designers de navegador escolheram para implementá-
lo. Isso veio principalmente porque alguns fabricantes de navegadores implementam
funcionalidade adicionais em seus navegadores em detrimento da compatibilidade com seus
rivais.

Felizmente, a maioria dos desenvolvedores agora recobrou o juízo e percebeu a necessidade de

compatibilidade total entre si, então é menos necessário hoje em dia ter que otimizar seu código
para navegadores diferentes. No entanto, milhões de usuários permanecem usando
navegadores legados, e provavelmente ainda os usarão por muitos anos. Felizmente, existem
soluções para os problemas de incompatibilidade, e mais tarde, veremos bibliotecas e técnicas
que permitem que você ignore com segurança essas diferenças.

Por enquanto, vamos dar uma olhada em como usar o básico do JavaScript, aceito por todos os
navegadores:

<script type="text/javascript">
document.write("Hoje é is " + Date() );
</script>

Este snippet de código informa ao navegador da web para interpretar tudo dentro das tags
<script> e </script> como JavaScript, que o navegador faz escrevendo o texto Hoje é + a data
atual junto com a data do relógio do servidor. O resultado parecerá algo assim:

Hoje é Dom, 01 de janeiro de 2017 01:23:45

A menos que você precise especificar uma versão exata do JavaScript, você pode omitir o
type="text / javascript" e usar apenas <script> para iniciar a interpretação do JavaScript.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Como mencionado anteriormente, o JavaScript foi originalmente desenvolvido para oferecer

controle dinâmico sobre os vários elementos de um documento HTML, e esse ainda é o seu
principal uso. Porém, cada vez mais, o JavaScript está sendo usado para comunicação
assíncrona, o processo de acesso ao servidor da web em segundo plano.

A comunicação assíncrona é o que permite que as páginas da web comecem a se parecer com
programas independentes, porque eles não precisam ser recarregados por completo para exibir
novos conteúdos. Em vez disso, uma chamada assíncrona pode puxar e atualizar um único
elemento em uma página da web, como alterar sua fotografia em um site de rede social ou
substitui-la clicando em um botão no qual você fornece a resposta a uma pergunta. Este assunto
será totalmente coberto nas aulas sobre JavaScript.

Após cobrir JavaScript, daremos uma boa olhada no framework jQuery, que você pode usar para
economizar código reinventando a roda. Quando você precisar de um código rápido e cross-
browser para manipular suas páginas da web.

Claro, existem outros frameworks disponíveis também, mas jQuery é de longe o mais popular.
Devido à manutenção contínua, é extremamente confiável, e é uma ferramenta importante no
kit de utilitários de muitos desenvolvedores web experientes.

Usando CSS

CSS é o companheiro crucial do HTML, garantindo que o texto HTML e as imagens serão
dispostas de maneira consistente e apropriada para a tela do usuário.

Com o surgimento do padrão CSS3 nos últimos anos, o CSS agora oferece um nível de
interatividade dinâmica anteriormente suportada apenas por JavaScript. Por exemplo, não só
você pode estilizar qualquer elemento HTML para alterar suas dimensões, cores, bordas,
espaçamento, e assim por diante, como agora você também pode adicionar transições e
transformações animadas para suas páginas da web, usando apenas algumas linhas de CSS.

Usar CSS pode ser tão simples quanto inserir algumas regras entre as tags <style> e </style> tags
no cabeçalho de uma página da web, como mostrado abaixo:

<style>
p {
text-align:justify;
font-family:Helvetica;
}
</style>

Estas regras mudam o alinhamento do texto padrão da tag <p> para que os parágrafos sejam
totalmente justificados e utilizem a fonte Helvetica.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Como você aprenderá nas aulas de CSS, existem muitas maneiras diferentes de definir as regras
de CSS, e você também pode incluí-las diretamente nas tags ou salvar um conjunto de regras
em um arquivo a ser carregado separadamente. Essa flexibilidade não apenas permite que você
estilize seu HTML com precisão, mas também pode (por exemplo) fornecer funcionalidade
integrada de foco para animar objetos quando o mouse passa sobre eles. Você também
aprenderá como acessar todas as propriedades CSS de JavaScript, bem como HTML.

E há o HTML5

Por mais úteis que tenham se tornado todas essas adições aos padrões da web, elas não eram
suficientes para desenvolvedores cada vez mais ambiciosos. Por exemplo, ainda não havia uma
maneira simples de manipular gráficos em um navegador da web sem recorrer a plug-ins como
o Flash. E o mesmo acontecia com a inserção de áudio e vídeo em páginas da web. Além disso,
várias inconsistências surgiram no HTML durante sua evolução.

Então, para esclarecer tudo isso e levar a Internet além da Web 2.0 e em sua próxima iteração,
um novo padrão para o HTML foi criado para resolver todas essas deficiências: HTML5. Seu
desenvolvimento começou em 2004, quando o primeiro rascunho foi elaborado pela Mozilla
Foundation e Opera Software (desenvolvedores de dois navegadores populares), mas somente
no início de 2013 que o rascunho final foi submetido ao World Wide Web Consortium (W3C), o
órgão internacional de gestão da web padrões.

Demorou alguns anos para que o HTML5 se desenvolvesse, mas agora estamos em um ponto
muito sólido e estável, a versão 5.1 (desde 2016). É um ciclo de desenvolvimento sem fim,
porém, e com o tempo, mais funcionalidade certamente serão incorporadas a ele. Alguns dos
melhores recursos em HTML5 para manipulação e exibição de mídia inclui <audio>, <video> e
elementos <canvas>, que adicionam som, vídeo e gráficos avançados. Tudo que você precisa
saber sobre estes e todos os outros aspectos do HTML5 serão abordados em detalhes nas aulas
finais deste treinamento.

Uma das pequenas coisas que gosto sobre a especificação HTML5 é que a sintaxe XHTML não é
mais necessária para elementos de fechamento automático. No passado, você poderia exibir
uma quebra de linha usando o elemento <br>. Então, para garantir compatibilidade futura com
XHTML (o substituto planejado do HTML nunca aconteceu), foi alterado para <br />, em que um
caractere de fechamento / foi adicionado (uma vez que todos os elementos deveriam incluir
uma tag de fechamento com este personagem).

Mas agora as coisas fecharam o círculo e você pode usar qualquer versão desses elementos.
Então, por uma questão de brevidade e menos pressionamentos de tecla, neste curso eu voltei
ao antigo estilo de <br>, <hr> e assim por diante.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

O Servidor Web Apache

Além de PHP, MySQL, JavaScript, CSS e HTML5, há um sexto herói na web dinâmica: o servidor
web. No caso deste curso, isso significa o Servidor web Apache.
Discutiremos um pouco sobre o que um servidor web faz durante a troca HTTP/ entre clientes e
servidores, e muito mais sobre o que acontece nos bastidores.

Por exemplo, o Apache não serve apenas arquivos HTML - ele lida com uma ampla gama de
arquivos, imagens e arquivos Flash a arquivos de áudio MP3, RSS (Really Simple Syndication)
feeds e assim por diante. E esses objetos não precisam ser arquivos estáticos, como imagens
GIF. Eles podem ser gerados por programas como scripts PHP. Isso mesmo: PHP pode até mesmo
criar imagens e outros arquivos para você, rapidamente ou com antecedência para exibir mais
tarde.

Para fazer isso, você normalmente deverá ter módulos pré-compilados em Apache ou PHP ou
chamadas em tempo de execução. Um desses módulos é a biblioteca GD (Graphics Draw), que
o PHP usa para criar e manipular gráficos.

O Apache também oferece suporte a uma grande variedade de módulos próprios. Além do
módulo PHP, o mais importante para seus propósitos como um programador da web serão os
módulos que tratam da segurança. Outros exemplos são o módulo Rewrite, que habilita o
servidor web para lidar com uma variedade de tipos de URL e reescrevê-las de acordo com seus
próprios requisitos internos, e o módulo Proxy, que você pode usar para exibir páginas
solicitadas com frequência de um cache para facilitar a carga no servidor.

Posteriormente neste curso, você verá como usar alguns desses módulos para aprimorar os
recursos fornecidos pelas três tecnologias principais.

Manuseando Dispositivos Móveis

Agora estamos firmemente em um mundo de dispositivos de computação móvel

interconectados, e o conceito de desenvolver sites exclusivamente para computadores desktop
tornou-se bastante obsoleto. Em vez disso, os desenvolvedores agora pretendem desenvolver
sites responsivos e aplicativos da web que se adaptam ao ambiente em que estão correndo, isto
é, sendo exibidos.

Posteriormente neste curso vocês verão como podem criar facilmente esses tipos de produtos
usando apenas as tecnologias detalhadas neste curso, junto com a poderosa biblioteca de
funções responsivas jQuery Mobile do JavaScript. Com ela, você poderá se concentrar no
conteúdo e usabilidade de seus sites e aplicativos da web, sabendo a forma como eles serão
exibidos e otimizado automaticamente para uma variedade de dispositivos de computação
diferentes - uma coisa a menos para você se preocupar.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Para demonstrar como fazer uso total de seu poder, na aula final você criará um exemplo de site
de social simples, usando jQuery Mobile para torná-lo totalmente responsivo e garantir uma boa
exibição em qualquer coisa, desde a pequena tela de um celular à um tablet ou computador
desktop.

Sobre código aberto

As tecnologias de código aberto, são tecnologias que qualquer pessoa tem permissão para ler e
mudar o código. Por este motivo essas tecnologias são tão populares e frequentemente
debatidas, mas PHP, MySQL e Apache são as três ferramentas mais comumente utilizadas em
suas categorias. O que pode ser dito definitivamente, porém, é que ser código aberto significa
que foram desenvolvidos na comunidade por equipes de programadores que escrevem recursos
que eles próprios desejam e precisam, com o código original e disponível para todos verem e
mudarem. Bugs podem ser encontrados rapidamente e violações de segurança podem ser
evitadas antes que aconteçam.

Outro benefício é que todos esses programas são gratuitos. Não se preocupe em ter que
comprar licenças adicionais se você precisar expandir seu site ou adicionar mais servidores, e
você não precisa verificar o orçamento antes de decidir se atualiza para as versões mais recentes
desses produtos.

Juntando tudo

A verdadeira beleza do PHP, MySQL, JavaScript (às vezes auxiliado por jQuery ou outros
frameworks), CSS e HTML5 é a maneira maravilhosa como todos trabalham juntos para produzir
conteúdo da web dinâmica: PHP lida com todo o trabalho principal no servidor da web. O MySQL
gerencia todos os dados, e a combinação de CSS e JavaScript cuida da apresentação da página.

O JavaScript também pode falar com seu código PHP no servidor web sempre que precisar
atualizar algo (no servidor ou na página da web). E com os novos recursos poderosos do HTML5,
como tela, áudio, vídeo, e geolocalização, você pode tornar suas páginas da web altamente
dinâmicas, interativas e repletas de multimídia.

Para dar uma resumida, vamos resumir o conteúdo olhando no processo de combinar algumas
dessas tecnologias em uma rotina assíncrona de comunicação que muitos sites usam: verificar
se um nome de usuário já existe no site quando um usuário está se inscrevendo para uma nova
conta. Um bom exemplo disso pode ser visto no Gmail (consulte a Figura 1-3).

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Figura 1-3. O Gmail usa comunicação assíncrona para verificar a disponibilidade de nomes de
usuário
As etapas envolvidas neste processo assíncrono serão semelhantes às seguintes:
1. O servidor gera o HTML para criar o formulário da web, que pede detalhes, como nome
de usuário, nome, sobrenome e endereço de e-mail.
2. Ao mesmo tempo, o servidor anexa algum JavaScript ao HTML para monitorar a caixa
de entrada do nome de usuário e verifica duas coisas: se algum texto foi digitado, e se a
entrada foi desmarcada porque o usuário clicou em outra campo de entrada.
3. Uma vez que o texto foi inserido e o campo desmarcado, no fundo o código JavaScript
passa o nome de usuário que foi inserido de volta para um script PHP no servidor web
e aguarda uma resposta.
4. O servidor web procura o nome de usuário e responde ao JavaScript se esse nome já foi
escolhido ou não.
5. O JavaScript então coloca uma mensagem ao lado da caixa de entrada do nome de
usuário para mostrar se o nome está disponível para o usuário.
6. Se o nome de usuário não estiver disponível e o usuário ainda enviar o formulário, o
JavaScript interrompe o envio e enfatiza novamente de que o usuário precisa escolher
outro nome de usuário.
7. Opcionalmente, uma versão melhorada deste processo pode até olhar para o nome de
usuário solicitado pelo usuário e sugerir uma alternativa que já está disponível.

Tudo isso ocorre silenciosamente em segundo plano e torna a experiência do usuário perfeita.
Sem comunicação assíncrona, todo o formulário teria que ser submetido ao servidor, que então
enviaria de volta o HTML, destacando quaisquer erros. Seria uma solução viável, mas nem de
longe tão organizada ou prazerosa como processamento de campo de formulário em tempo
real.

A comunicação assíncrona pode ser usada para muito mais do que simples verificação de
entrada e processamento, embora; vamos explorar muitas coisas adicionais que você pode fazer
com ele mais tarde neste curso.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Configurando um Servidor de Desenvolvimento

Se você deseja desenvolver aplicativos para internet, mas não tem seu próprio servidor de
desenvolvimento, você terá que enviar todas as modificações feitas para um servidor em algum
lugar na web antes de testá-lo.

Mesmo em uma conexão de banda larga rápida, isso ainda pode representar uma desaceleração
significativa em tempo de desenvolvimento. Em um computador local, no entanto, o teste pode
ser tão fácil quanto salvar uma atualização (geralmente apenas uma questão de clicar uma vez
em um ícone) e, em seguida, no Botão Atualizar no seu navegador.

Outra vantagem de um servidor local de desenvolvimento é que você não precisa se preocupar
com erros embaraçosos ou problemas de segurança enquanto você está escrevendo e testando
sua aplicação. É preciso estar ciente de que caso use um servidor externo as pessoas podem ver
tudo que está fazendo em seu aplicativo. Portanto antes de começar o primeiro passo é ter seu
próprio seu servidor rodando localmente.
Falaremos agora da experiência web do lado do servidor. Mas para testar os resultados do seu
trabalho - particularmente quando começamos a usar JavaScript, CSS e HTML5 posteriormente
– é recomendável também que você tenha todos os principais navegadores da Web instalados.

Sua lista de navegadores deve incluir pelo menos Microsoft Edge, Mozilla Firefox, Opera, Safari
e Google Chrome. Se você planeja garantir que seus sites tenham uma boa aparência em
dispositivos móveis, você deve ter acesso a uma ampla gama de dispositivos iOS e Dispositivos
Android, mas há excelentes emuladores gratuitos disponíveis na internet.

O que é um WAMP, MAMP ou LAMP?

WAMP, são abreviações para “Windows, Apache, MySQL e PHP”, enquanto MAMP são
abreviações para “Mac, Apache, MySQL e PHP” e LAMP abreviações para “Linux, Apache, MySQL
e PHP”. Cada uma dessas abreviações descreve uma configuração totalmente funcional usada
para desenvolver páginas da web dinâmicas da Internet.

WAMPs, MAMPs e LAMPs vêm na forma de pacotes que instala todos os programas juntos para
que você não precise instalá-los e configurá-los separadamente. Isso significa que você pode
simplesmente baixar e instalar um único programa e seguir alguns passos para que seu servidor
de desenvolvimento web esteja pronto e funcionando rapidamente, com o mínimo de
complicações.

Durante a instalação, várias configurações padrão são criadas para você. As configurações de
segurança de tal instalação não será tão rígida quanto em um servidor web de produção, porque
é otimizado para uso local. Por essas razões, você nunca deve instalar nenhum deles e configura-
lo como um servidor de produção. No entanto, para desenvolver e testar sites e aplicativos,
qualquer uma dessas instalações é suficiente.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Se você escolher não seguir a rota WAMP/MAMP/LAMP para construir seu próprio sistema de
desenvolvimento, você deve saber que baixar e integrar as várias partes pode ser muito
demorado e pode exigir muita pesquisa para configurar tudo totalmente. Mas se você já tem
todos os componentes instalados e integrados uns com os outros, eles devem trabalhar
adequadamente com os exemplos deste curso.

Instalando AMPPS no Windows

Existem vários servidores WAMP disponíveis, cada um oferecendo configurações ligeiramente

diferentes. Das várias opções de código aberto e gratuito, uma das melhores é o AMPPS. Você
pode baixe-lo clicando no botão na página inicial do site, mostrado na Figura 1-4. Recomendo
que você sempre baixe a versão estável mais recente (enquanto escrevo isso, é a 3.9, que tem
cerca de 128 MB). Os vários instaladores do Windows, macOS e Linux estão listados na página
de download em: https://ampps.com/download

Figura 1-4: Página de Download do Ampps

Depois de fazer download a instalação é simples. Como todo programa para Windows basta
executar o instalador, aceitar o contrato e ir clicando em NEXT (próximo) até o final da
instalação. Antes de finalizar a instalação você é solicitado a instalar o Visual Studio C++
Redistributable caso este ainda não esteja instalado em seu computador.

Antes de continuar recomendo que você se familiarize com a documentação do AMPPS. Quando
a consultar verá que há um link de suporte na parte inferior da janela de controle que o levará
ao site AMPPS. Para iniciar o AMPPS e preciso iniciar os serviços, para isso basta clicar no botão
start conforme mostra a figura abaixo.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Figura 1-5: Iniciando os serviços

Quando o Apache e o MySQL estiver on, o próximo passo é testar a instalação.

Testando a instalação

A primeira coisa a fazer neste momento é verificar se tudo está funcionando corretamente. Para
isso insira um dos dois URLs a seguir na barra de endereço do seu navegador:

Localhost ou 127.0.0.1

Figura 1-6: AMPPS rodando no seu navegador

A Figura 1-6: mostra a tela introdutória, onde você terá a oportunidade de fornecer uma senha
para proteger o AMPPS. Eu recomendo que você não marque a caixa e apenas clique no botão
Submit (Enviar) para continuar sem definir uma senha.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Uma vez feito isso, você será levado para a página de controle principal em localhost/ampps/
(de agora em diante, assumirei que você está acessando AMPPS por meio de localhost em vez
de 127.0.0.1). A partir daqui você pode configurar e controlar todos os aspectos da pilha AMPPS,
portanto, anote isso para referência futura ou talvez defina um marcador no seu navegador. Em
seguida, digite o seguinte para visualizar a raiz do documento (descrito na seção a seguir) do seu
novo servidor da web Apache:

localhost

Desta vez, em vez de ver a tela inicial sobre como configurar a segurança, você deve ver algo
semelhante à Figura 1-7.

Figura 1-7. Visualizando a raiz do documento

Acessando a raiz do documento (Windows)

A raiz do documento é o diretório que contém os principais documentos da web para um

domínio. Este diretório é aquele que o servidor usa quando um URL básico sem um o caminho
é digitado em um navegador, como http://yahoo.com ou, para seu servidor local,
http://localhost.

Por padrão, o AMPPS usará o seguinte local como a raiz do documento:

C:\Arquivos de programas(x86)\Ampps\www

Caso você esteja usando um Sistema Operacional de 32 bits, ou...

C:\Arquivos de programas\Ampps\www

Caso você esteja usando um Sistema Operacional de 64 bits.

Para garantir que você tenha tudo configurado corretamente, você deve agora criar o arquivo
obrigatório “Olá mundo”. Portanto, crie um pequeno arquivo HTML conforme exibido abaixo
usando o bloco de notas do Windows ou qualquer outro programa ou editor de texto, mas não
um processador como o Microsoft Word (a menos que você salve como texto simples):

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

<!DOCTYPE html>
<html lang = "pt-BR">
<head>
<title> Um teste rápido </title>
</head>
<body>
Olá Mundo!
</body>
</html>

Depois de digitar o código acima, salve o arquivo no diretório raiz do documento, usando o nome
do arquivo teste.html. Se você estiver usando o Bloco de notas, certifique-se de que o valor em
“Salvar como tipo” é alterada de“ Documento texto (*.txt) ”para“ Todos os arquivos (*.*) ”.

Agora você pode chamar esta página em seu navegador, digitando a seguinte URL em sua barra
de endereço (consulte a Figura 1-8):

Figura 1-8. Sua primeira página da web

Lembre-se de servir uma página da web a partir da raiz do documento (ou em uma subpasta) é
diferente de carregar um em um navegador da web de sistema de arquivos do seu computador.
O primeiro garantirá o acesso ao PHP, MySQL e todos os recursos de um servidor web, enquanto
o último simplesmente carrega o arquivo no navegador, que fará o melhor para exibir, mas não
será capaz de processar quaisquer instruções PHP ou outro servidor. Portanto, você geralmente
deve executar exemplos usando o prefixo localhost da barra de endereço do seu navegador, a
menos que você tenha certeza que o arquivo não depende da funcionalidade do servidor da
web.

WAMPs alternativos

Quando o software é atualizado, às vezes funciona de maneira diferente do que você esperava
e bugs podem até ser introduzidos. Então, se você encontrar dificuldades que não consegue
resolver no AMPPS, você pode preferir escolher uma das outras soluções disponíveis na web.

Você ainda poderá fazer uso de todos os exemplos deste curso, mas terá que seguir as instruções
fornecidas com cada WAMP, que podem não ser tão fáceis de seguir como o guia anterior.

Aqui está uma seleção de alguns dos melhores, na minha opinião:

• EasyPHP
• XAMPP

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

• WAMPServer
• Glossword WAMP

Atualizações para AMPPS

É muito provável que o os desenvolvedores de AMPPS farão melhorias no software e, portanto,

as telas de instalação e método de uso podem evoluir com o tempo, assim como as versões do
Apache, PHP ou MySQL. Então por favor não presuma que algo está errado se as telas e a
operação parecerem diferentes. Os desenvolvedores de AMPPS tomam todo o cuidado para
garantir que seja fácil de usar, basta seguir as instruções fornecidas e consultar a documentação
no site.

Instalando AMPPS no macOS

Os AMPPS também estão disponíveis para macOS e você pode baixá-lo no site, como mostrado
anteriormente. Consulte detalhes de instalação não macOS no próprio site do AMPPS.

Instalando um LAMP no Linux

Este curso é voltado principalmente para usuários de PC e Mac, mas seu conteúdo funcionará
igualmente bem em um computador Linux. No entanto, existem dezenas de distribuições
populares do Linux, e cada uma delas pode exigir a instalação de um LAMP de uma maneira
ligeiramente diferente, então eu não posso falar de todas, a melhor coisa que pode fazer é
pesquisar sobre como instalar um LAMP na sua distribuição.

Dito isso, muitas versões do Linux vêm pré-instaladas com um servidor web e MySQL, e as
chances são de que você já esteja pronto. Para descobrir, tente inserir o URL localhost em seu
navegador e veja se você obtém a página da web raiz do documento padrão:

Se isso funcionar, você provavelmente tem o servidor Apache instalado e pode muito bem ter o
MySQL instalado e funcionando; verifique com o administrador do sistema para ter certeza. Se
você ainda não tem um servidor da web instalado, no entanto, há uma versão do AMPPS
disponível para download no site.

Assim como no macOS consulte a instalação na documentação da sua distribuição Linux.

Trabalhando Remotamente

Se você tiver acesso a um servidor web já configurado com PHP e MySQL, você pode sempre
que desejar usá-lo para o seu desenvolvimento web. Mas a menos que você tenha uma conexão

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

de alta velocidade, nem sempre é a sua melhor opção. O desenvolvimento local permite que
você teste as modificações com pouco ou nenhum atraso no upload.

Acessar o MySQL remotamente também pode não ser fácil. Você deve usar o protocolo seguro
SSH para fazer login em seu servidor para criar bancos de dados manualmente e definir
permissões da linha de comando. Sua empresa de hospedagem irá aconselhá-lo sobre a melhor
forma de fazer isso e lhe fornecerá uma senha que tenha definido para o seu acesso MySQL
(também como, é claro, para entrar no servidor em primeiro lugar). A menos que você não tenha
escolha, eu recomendo que você não use o protocolo Telnet inseguro para fazer login
remotamente em qualquer servidor.

Login

Recomendo que, no mínimo, os usuários do Windows instalem um programa como PuTTY, para
acesso Telnet e SSH (lembre-se de que SSH é muito mais seguro do que Telnet). Em um Mac,
você já tem SSH disponível. Basta selecionar a pasta Aplicativos, seguido por Utilitários e, em
seguida, inicie o Terminal. Na janela do Terminal, faça login em um servidor usando SSH da
seguinte forma:

ssh [email protected]

onde server.com é o nome do servidor no qual você deseja fazer login e mylogin é o nome de
usuário com o qual você fará o login. Em seguida, será solicitada a senha correta para esse nome
de usuário e, se você o inserir corretamente, você será conectado.

Usando FTP

Para transferir arquivos de e para seu servidor da web, você precisará de um programa de FTP.
Se vocês pesquisarem na web por um bom, você encontrará tantos que pode demorar bastante
tempo para se decidir por um com todos os recursos certos para você.

Meu programa de FTP preferido é o FileZilla de código aberto, para Windows, Linux e macOS
10.5 ou mais recente. As instruções completas sobre como usar o FileZilla são disponíveis no
wiki.

Usando um Editor de Programa

Embora um editor de texto simples funcione para editar HTML, PHP e JavaScript, houve algumas
melhorias tremendas em editores de programas dedicados, que agora incorporam recursos
muito úteis, como destaque de sintaxe colorido. Os editores de hoje são programas inteligentes
e podem mostrar onde há erros de sintaxe antes mesmo de você executar um programa. Depois

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

de usar um editor moderno, você se perguntará como conseguiu codificar bem sem ter usado
um.

Existem vários programas bons disponíveis, mas eu escolhi o Sublime Text (veja Figura 1-9). É
um software pago, mas aversão de avaliação que nunca expira é mais fácil de usar e está
disponível no macOS, Windows e Linux/Unix, e se adapta à maneira como eu programo. Você
pode baixar uma cópia visitando o site do Sublime Text em https://www.sublimetext.com/3
selecionando o link Download na parte superior da página correspondente ao seu Sistema
Operacional.

Todo mundo tem diferentes estilos e preferências de programação, de modo que há muitos
mais editores de programas disponíveis para escolher - ou você pode querer ir diretamente para
um ambiente de desenvolvimento integrado (IDE), conforme descrito a seguir.

Figura 1-9. Editor Sublime Text 3

Como você pode ver na Figura 1-9, o Sublime destaca a sintaxe de forma adequada, usando
cores para ajudar a esclarecer o que está acontecendo.

Usando um IDE

Tão bons quanto editores de programa dedicados podem ser para sua produtividade de
programação, sua utilidade é insignificante quando comparada a ambientes de
desenvolvimento integrados, que oferecem muitos recursos adicionais, como depuração no
editor e programa testes, bem como descrições de funções e muito mais. A Figura 1-10 mostra
o popular IDE phpDesigner com um programa PHP carregado no quadro principal e o Code
Explorer do lado direito listando as várias classes, funções, e variáveis que ele usa.

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

Figura 1-10. Quando você está usando um IDE como o phpDesigner, o desenvolvimento PHP
torna-se muito mais rápido e fácil

Ao desenvolver com um IDE, você pode definir pontos de interrupção e, em seguida, executar
todos (ou partes) do seu código, que vai parar nos pontos de interrupção e fornecem
informações sobre o estado atual do programa. Como um auxílio para a aprendizagem da
programação, os exemplos neste curso podem ser inseridos em um IDE e executados
imediatamente, sem a necessidade de acessar seu navegador da web. Tem vários IDEs
disponíveis para diferentes plataformas, a maioria dos quais são comerciais, mas existem alguns
gratuitos também. A Tabela 1-1 lista alguns dos IDEs PHP mais populares, junto com seus URLs
de download.

Escolher um IDE pode ser algo muito pessoal, então, se você pretende usar um, aconselho você
deve baixar alguns ou mais para experimentá-los primeiro; todos eles têm versões de teste ou
são de uso gratuito, por isso não custará nada.

Você deve reservar um tempo para instalar um editor de programa ou IDE com o qual se sinta
confortável
agora; você estará pronto para experimentar os exemplos das próximas aulas. Armado com
essas ferramentas, você agora está pronto para passar para prosseguir, onde começaremos
explorando PHP com mais profundidade e descobrindo como fazer HTML e PHP funcionarem
juntos, bem como a forma como a própria linguagem PHP é estruturada.

Questões

1. Quais são os quatro componentes (no mínimo) necessários para criar uma página
totalmente dinâmica na da web?
2. O que significa HTML?

CEAD/UFPI Marcos Antonio dos Santos

 Desenvolvendo aplicações dinâmicas para Internet

3. Por que o nome MySQL contém as letras SQL?

4. PHP e JavaScript são linguagens de programação que geram resultados dinâmicos para
páginas da web. Qual é a sua principal diferença e por que você usaria ambos deles?
5. O que CSS significa?
6. Liste três novos elementos principais introduzidos no HTML5.
7. Se você encontrar um bug (o que é raro) em uma das ferramentas de código aberto,
como você acha que poderia consertá-lo?
8. Por que uma estrutura como o jQuery Mobile é tão importante para o desenvolvimento
moderno sites e aplicativos da web?
9. Qual é a diferença entre um WAMP, um MAMP e um LAMP?
10. O que o endereço IP 127.0.0.1 e o URL http: // localhost têm em comum?
11. Qual é a finalidade de um programa de FTP?
12. Cite a principal desvantagem de trabalhar em um servidor web remoto.
13. Por que é melhor usar um editor de programa em vez de um editor de texto simples?

CEAD/UFPI Marcos Antonio dos Santos

 Extra – Testando o MySQL

Passo 1: Acessar o MySQL

cd C:\"Arquivos de programas (x86)\Ampps\mysql\bin"

Passo 2: Fornecendo usuário e senha

mysql -u root -pmysql

Passo 3: Vendo os bancos de dados existentes

SHOW databases;

Passo 4: Criando um banco de dados

CREATE DATABASE publicacao;

Passo 5: Abrindo o banco de dados

USE publicacao;

Passo 6: Criando uma tabela

CREATE TABLE classicos (
autor VARCHAR(128),
titulo VARCHAR(128),
tipo VARCHAR(16),
ano CHAR(4)) ENGINE InnoDB; (Existe o tipo YEAR, mas este suporta apenas os anos 1901 a 2155)

Passo 7: Verificando se sua tabela foi criada

DESCRIBE classicos;

Passo 8: Inserindo dados na tabela criada

INSERT INTO classicos(autor, titulo, tipo, ano)
VALUES ('Mark Twain', 'As Aventuras de Tom Sawyer', 'Ficção', '1876');

INSERT INTO classicos(autor, titulo, tipo, ano)

VALUES ('Jane Austen', 'Orgulho e Preconceito', 'Ficção', '1811');

INSERT INTO classicos(autor, titulo, tipo, ano)

VALUES ('Charles Darwin','A Origem das espécies’, ‘Não Ficção','1856');

INSERT INTO classicos(autor, titulo, tipo, ano)

VALUES ('Charles Dickens','A velha de loja de curiosidades','Fiction','1841');

INSERT INTO classicos(autor, titulo, tipo, ano)

VALUES ('William Shakespeare','Romeo e Julieta','Play','1594');

Passo 9: Verificando os dados na tabela criada

SELECT * FROM classicos;