CONSTRUÇÃO DE

WEBSITES COM
PHP E MYSQL
 Sobre o Instrutor
• Formado em Ciências da Computação e pós-Graduado em Sistemas de
Informação.
• Atuo como Gerente de TI do Coren-DF.
• Atuei por mais de 15 anos como professor universitário.
• Atuei por 5 anos como instrutor de cursos técnicos e de qualificação
profissional no Senac.

2
 Sobre você
• Nome e como gostaria de ser chamado(a).
• Local onde mora.
• Porque está fazendo este curso?
• Quais são suas expectativas?

3
 Sobre o curso
• Este curso tem como objetivo proporcionar ao aluno, conceito e conhecimento
sobre desenvolvimento de sites utilizando a linguagem de programação PHP,
além de apresentar as principais características de Bancos de Dados, com foco no
MySQL.
• É destinado a pessoas interessadas em desenvolver websites com linguagem de
programação PHP e Banco de Dados MySQL.

4
INTRODUÇÃO E
UTILIZAÇÃO DE
UM AMBIENTE
DE
PROGRAMAÇÃ
O WEB
 World Wide Web (WWW)
• O World Wide Web (WWW) é um termo técnico (e anglicismo de tecnologia da
informação) que foi traduzido para a língua portuguesa como rede mundial de
computadores, também conhecido como Web, que designa um sistema de
documentos em hipermídia que são interligados e executados na Internet.
• Os documentos podem estar na forma de vídeos, sons, hipertextos e imagens.
Para consultar a informação, pode-se usar um programa de computador
chamado navegador web (Internet Explorer, Google Chrome, Mozilla Firefox,
Microsoft Edge, Opera etc), para baixar informações (chamadas "documentos" ou
"páginas") de servidores web (ou "sítios") e mostrá-los na tela do usuário (tela do
utilizador).
• O usuário (utilizador) pode então seguir as hiperligações (links) na página para
outros documentos ou mesmo enviar informações de volta para o servidor para
interagir com ele. O ato de seguir hiperligações é, comumente, chamado
"navegar" ou "surfar" na Web. 7
 Padrões
• A funcionalidade da web é baseada em três padrões:
• Uniform Resource Locator (URL) ou ocalizador uniforme de recursos, um sistema
que especifica como cada página de informação recebe um "endereço" único
onde pode ser encontrada.
• protocolo://domínio:porta/caminho/recurso?query_string#fragmento
• Hypertext Transfer Protocol (HTTP) ou Protocolo de Transferência de Hipertexto,
um protocolo que especifica como o navegador e servidor web comunicam entre
si.
• HyperText Markup Language (HTML) ou Linguagem de Marcação de Hipertexto,
uma linguagem de marcação para codificar a informação de modo que possa ser
exibida em uma grande quantidade de dispositivos.

8
 Funcionamento
• Visualizar uma página web ou outro recurso disponibilizado normalmente inicia
ou ao digitar uma URL no navegador ou seguindo (acessando) uma hiperligação.
Primeiramente, a parte da URL referente ao servidor de rede é separada e
transformada em um endereço IP, por um banco de dados da Internet chamado
domain name system (DNS). O navegador estabelece, então, uma conexão TCP-IP
com o servidor web localizado no endereço IP retornado.
• O próximo passo é o navegador enviar uma requisição HTTP ao servidor para
obter o recurso indicado pela parte restante da URL (retirando-se a parte do
servidor). No caso de uma página web típica, o texto HTML é recebido e
interpretado pelo navegador, que realiza então requisições adicionais para
figuras, arquivos de formatação, arquivos de script e outros recursos que fazem
parte da página.
• O navegador, então, renderiza (reconstitui) a página na tela do usuário
(utilizador), assim como descrita pelos arquivos que a compõe. 9
Funcionamento - Modelo Cliente
Servidor na Web

10
 Client-side
• É tudo processado no lado do cliente. O client-side é interpretado diretamente
pelo browser (navegador) do usuário.
• Sendo assim ao acessar uma página web o HTML, CSS e JavaScript são
interpretados todos pelo navegador sem intervenção nenhuma de um servidor.
Por isso podemos exibir o código fonte em nosso browser e visualizar o HTML,
CSS e o JavaScript.

11
 Server-side
• O oposto do client-side. Aqui as informações são processadas por um servidor
web que interpretara e retornará o resultado que será exibido no browser. Sendo
assim não é possível visualizar o código de uma aplicação rodando no Server-side.

12
 Servidor Web
• Servidor web é um software responsável por aceitar pedidos em HTTP de
clientes, geralmente os navegadores, e servi-los com respostas em HTTP,
incluindo opcionalmente dados, que geralmente são páginas web, tais como
documentos em HTML com objetos embutidos (imagens, etc.) ou um
computador que executa um programa que provê a funcionalidade descrita
anteriormente.
• Os sites e as aplicações web são implantados em computadores denominados
Web Servers.
• O mais popular, e mais utilizado no mundo, é o servidor Apache (software livre).
A Microsoft possui a sua própria solução denominada IIS (Internet Information
Services).

13
 Aplicação web
• Em computação, aplicação web designa, de forma geral, sistemas de informática
projetados para utilização através de um navegador, através da internet ou
aplicativos desenvolvidos utilizando tecnologias web HTML, JavaScript e CSS.
Pode ser executado a partir de um servidor HTTP (Web Host) ou localmente, no
dispositivo do usuário.
• Uma aplicação web também é definida em tudo que se é processado em algum
servidor, exemplo: quando você entra em um e-commerce a página que você
acessa antes de vir até seu navegador é processada em um computador ligado a
internet que retorna o processamento das regras de negócio nele contido. Por
isso se chama aplicação e não simplesmente site web.

14
 Desenvolvimento Web
• Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de
sites, na Internet ou numa intranet. Este é o profissional que trabalha
desenvolvendo websites, podendo ser um Web Designer (Desenvolvedor do
Layout), ou Web Developer(Desenvolvedor de sistemas).
• O desenvolvimento refere-se a um processo de construção e testes do software
especifico para a web, com a finalidade de se obter um conjunto de programas,
que satisfazem as funções pretendidas, quer em termos de usabilidade dos
usuários ou compatibilidade com outros programas existentes.
• O desenvolvimento web pode variar desde simples páginas estáticas a aplicações
ricas, comércios eletrônicos ou redes sociais.

15
 Codificação no cliente (Front-end)
• A separação de sistemas de software em front-end e back end simplifica o
desenvolvimento e separa a manutenção.
• Uma regra de ouro é que o lado front (ou "cliente") é qualquer componente
manipulado pelo usuário.
• Desenvolvedor front-end: é o responsável que projeta as interfaces de um
website. São eles que trabalham com o HTML, JavaScrip e o CSS para construir as
páginas web.
• O desenvolvedor front-end é responsável por “dar vida” à interface. Trabalha com
a parte da aplicação que interage diretamente com o usuário. Por isso, é
importante que esse desenvolvedor também se preocupe com a experiência do
usuário.
• Na parte de estudo, este profissional foca em HTML (linguagem de marcação),
CSS (linguagem de estilo) e JavaScript (linguagem de script/programação). 16
 Codificação no servidor ( Back-
end )
• O código do lado servidor (ou "back-end") reside no servidor.
• Desenvolvedor back-end: é o responsável por dinamizar o site através das
linguagens de programação.
• Desenvolvedores que preferem se especializar apenas em back-end, geralmente,
não são muito bons em deixar páginas bonitas e com boa usabilidade, mas são
melhores em regras de negócio, banco de dados e todas as coisas que rodam no
servidor.
• É o back-end que fornece e garante todas as regras de negócio, acesso a banco de
dados, segurança e escalabilidade.
• Esses desenvolvedores trabalham com linguagens de programação como, por
exemplo, Java, C#, PHP, Python, Ruby ou até mesmo JavaScript (sim, tem jeito de
rodar JavaScript no servidor também).
17
18
Conceitos
básicos de
HTML5
 O que é HTML?
• O HTML é uma das linguagens que utilizamos para desenvolver websites. O
acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em
português Linguagem de Marcação de Hipertexto.
• O HTML é a linguagem base da internet. Foi criada para ser de fácil entendimento
por seres humanos e também por máquinas, como por exemplo o Google ou
outros sistemas que percorrem a internet capturando informação.
• Atualmente a HTML encontra-se na versão 5 e é padronizada pelo W3C (World
Wide Web Consortium), uma organização internacional responsável por
estabelecer padrões para a internet, como a linguagem XML, as CSS e o SOAP.

20
 O que é HTML segundo W3C
• HTML significa Hyper Text Markup Language.
• HTML descreve a estrutura das páginas da Web usando marcação.
• Os elementos HTML são os blocos de construção de páginas HTML.
• Os elementos HTML são representados por tags.
• As tags HTML peças de conteúdo, como "título", "parágrafo", "mesa", e assim por
diante
• Browsers não exibem as tags HTML, mas usa para processar o conteúdo da
página.

21
 Quem criou o HTML?
• Tim Berners-Lee. Esse é o nome do homem que criou o HTML. Ele criou o HTML
para a comunicação e disseminação de pesquisas entre ele e seu grupo de
colegas. O HTML ficou bastante conhecido quando começou a ser utilizada para
formar a rede pública daquela época, o que se tornaria mais tarde a internet que
conhecemos hoje.

22
 Marcas ou marcadores (tags)
• Todo documento HTML possui marcadores (do inglês: tags), palavras entre
parênteses angulares (chevron) (< e >).
• Os marcadores são os comandos de formatação da linguagem.
• Um elemento é formado por um nome de marcador (tag), atributos, valores e
filhos (que podem ser outros elementos ou texto).
• Os atributos modificam os resultados padrões dos elementos e os valores
caracterizam essa mudança.

23
 Estrutura Básica HTML
• doctype – tipo do documento
• <html> – tag principal, ela marca o início e o final
do documento.
• <head> – tag usada para delimitar o cabeçalho do
documento. Dentro dela outras tags de cabeçalho
serão usadas, como o title, meta, link, entre
outros.
• <title> – tag usada para indicar o título do
documento.
• <body> – tag usada para definir o corpo do
documento. Dentro dela serão colocadas as tags
que irão compor a nossa página

24
25
26
27
 HTML Títulos
• Cabeçalhos HTML são definidas com a <h1> de <h6> tags.
• <h1> define o título mais importante. <h6> define o título menos importante:
• Exemplo
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>

28
 HTML parágrafos
• Parágrafos HTML são definidas com a <p> tag:
• Exemplo:
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>

29
 Links em HTML
• Links HTML são definidas com a <a>tag:
• Exemplo:
• <a href="https://www.w3schools.com">This is a link</a>

30
 Imagens de HTML
• Imagens HTML são definidas com a <img> tag.
• O arquivo de origem ( src), texto alternativo ( alt), width e height são fornecidos
como atributos:
• Exemplo:
• <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

31
 Botões HTML
• Botões HTML são definidas com a <button>tag:
• Exemplo:
• <button>Click me</button>

32
 Listas de HTML
• Listas HTML são definidas com a <ul>(lista não ordenada / bala) ou o
<ol>(ordenado / lista numerada) tag, seguido por <li> tags (os itens da lista).
• Exemplo:
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
• </ul>

33
 HTML Styles
• O HTML styleatributo tem a seguinte sintaxe :
• <tagname style="property:value;">
• O background-color propriedade define a cor de fundo para um elemento HTML.
• <body style="background-color:powderblue;">
• O color propriedade define a cor do texto para um elemento HTML:
• <h1 style="color:blue;">This is a heading</h1>
• A font-family propriedade define a fonte a ser usado para um elemento HTML:
• <h1 style="font-family:verdana;">This is a heading</h1>
• A font-size propriedade define o tamanho do texto para um elemento HTML:
• <h1 style="font-size:300%;">This is a heading</h1>
• A text-align propriedade define o alinhamento do texto horizontal para um elemento HTML.
• <h1 style="text-align:center;">Centered Heading</h1>

34
 Elementos formatação HTML
• <b> - Texto em negrito
• <strong> - texto Importante
• <i> - O texto em itálico
• <em> - texto enfatizado
• <mark> - texto marcado
• <small> - texto pequeno
• <del> - O texto excluído
• <ins> - Texto inserido
• <sub> - Texto Subscrito
• <sup> - texto sobrescrito
35
 HTML tags de comentário
• <!-- This is a comment -->

• <p>This is a paragraph.</p>

• <!-- Remember to add more information here -->

36
 Valores de cor
• Em HTML, as cores também pode ser especificado usando valores RGB, valores HEX, valores HSL,
valores RGBA e valores HSLA:
• Em HTML, uma cor pode ser especificado como um valor RGB, usando a seguinte fórmula: RGB
( vermelho, verde , azul )
• Cada parâmetro (vermelho, verde e azul) define a intensidade da cor entre 0 e 255.
• Por exemplo, RGB (255, 0, 0) é apresentado como vermelho, vermelho porque é definido para o
valor mais alto (255) e os outros são definidos como 0.
• Para exibir a cor preta, todos os parâmetros de cor deve ser definida como 0, assim: rgb (0, 0, 0).
• Para exibir a cor branca, todos os parâmetros de cor deve ser definida para 255, assim: rgb (255,
255, 255).
• <h1 style="background-color:#ff6347;">...</h1>

37
Valores de cor

38
 HTML Tabelas
• Uma tabela HTML é definido com a <table> tag.
• Cada linha da tabela é definida com a <tr> tag.
• Um cabeçalho da tabela é definida com a <th>.
• Por padrão, títulos de tabela estão em negrito e centralizados
• Um dados / célula da tabela é definida com a <td> etiqueta.

39
 O elemento <form>
• O HTML <form> elemento define uma forma que é utilizado para a recolha de
entrada de usuário.
• O action atributo define a ação a ser executada quando o formulário é enviado.
• O method atributo especifica o método HTTP ( GET ou POST ) para ser utilizado
aquando da apresentação de dados do formulário.

40
 O elemento <input>
• O <input> elemento é o mais importante elemento de formulário.
• O <input> elemento pode ser apresentado de várias maneiras, dependendo do
tipo de atributo.
• Aqui estão alguns exemplos:
• <Input type = "text"> Define um campo de entrada de texto de uma linha
• <Input type = "radio"> Define um botão de rádio (para a seleção de uma das
muitas escolhas)
• <Input type = "submit"> Define um botão de envio (para enviar o formulário)

41
Exemplo <form>

42
43
 Tipos que podem ser utilizados com a
tag <input>
• button: Insere um botão
• checkbox: Insere um checkbox; para vários itens, basta inserirmos vários “inputs” deste tipo
• file: Insere botão seleção de arquivo através de uma caixa de diálogo
• hidden: Campo pertencente ao formulário, mas que não será exibido na página
• image: Insere uma imagem como um botão submit
• password: Insere um campo password (caracteres digitados não aparecem)
• radio: Insere um radiobox (análogo ao checkbox)
• reset: Restaura os valores iniciais do formulário
• submit: Encaminha os dados inseridos para algum arquivo
• text: Insere um campo de edição de texto

44
Input Type

45
 Web Design Responsive
• Web Design Responsive é sobre o uso de HTML e CSS para redimensionar
automaticamente, ocultar, reduzir ou ampliar, um site, para torná-lo ficar bem em
todos os dispositivos (computadores, tablets e telefones).
• Exemplo:
• <meta name="viewport" content="width=device-width, initial-scale=1.0">

46
Exercício: Criar em HTML um
formulário

47
 VSCode IDE
• O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft
para Windows, Linux e macOS.
• Ele inclui suporte para depuração, controle Git incorporado, realce de sintaxe,
complementação inteligente de código, snippets e refatoração de código.
• Extensão:
• Emmet - https://docs.emmet.io/cheat-sheet/
• Tema: Omni
• Live Server: Alt+l+O
• Identação de Código: Shift+Alt+F

48
Conceitos
básicos de
CSS
 Introdução a CSS
 CSS é a sigla em inglês para Cascade Style Sheet (Folha de
Estilo em Cascata)
 É um mecanismo simples para adcionar estilos (fontes, cores, espaçamentos,
bordas, etc) aos documentos web
 CSS é um Web Standard
 conjunto de normas, diretrizes, recomendações produzidos pelo W3C e destinados
a orientar desenvolvedores para o uso de práticas que possibilitem a criação de
uma Web acessível para todos (independente de dispositivo ou necessidades
especiais.
 Porque usar CSS?

• A grande vantagem é a separação da marcação da apresentação do site

•  O HTML destina-se unicamente a estruturar e marcar o conteúdo
•  O CSS fica com a responsabilidade de todo o visual do documento
•  HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais
elementos da página
•  CSS define cores, posicionamento na tela, estilos de linhas, bordas, fontes e tudo o mais relacionado a
apresentação
 Porque usar CSS?
 A adoção dessa técnica resulta em múltiplas vantagens e
benefícios que não são conseguidos quando se utiliza atributos
de estilização dentro das tags HTML
 É possível isolar toda a parte de apresentação é replicar em
quantas páginas for necessário.
 Se o site contar com 200 páginas HTML é possível aplicar em segundos toda a
parte da
apresentação para todas as páginas!
 Isso não seria possível se a apresentação tivesse misturada junto com as tags
HTML.
 A regra CSS e sua sintaxe
 A regra do CSS é composta de duas
partes

Regra de estilo
seletor { propriedade: valor; }

Declaração

 Seletor: é o alvo da regra de estilo. É a parte da marcação capaz de definir em

qual parte será aplicado o estilo.
 Propriedade: define o que será estilizado.
 Valor: define o quanto ou como será estilizado.
 A regra CSS e sua sintaxe
 Observações
 A declaração deve ser colocada entre sinais de chaves ( { } )
 Um sinal de dois pontos ( : ) separa a declaração do seu valor
 Quando houver mais de uma declaração em uma regra, a separação é feita por
meio de ponto é vírgula ( ; ). Entretanto, é uma boa técnica utilizar sempre o ( ; )
após cada regra, mesmo tendo apenas uma.

body{
background-color: blue;
}
 A regra CSS e sua sintaxe

body{
background-color: blue;
}

 No exemplo
 o seletor é o documento todo
(body)
 a propriedade é a cor do fundo
 e o valor é a cor azul
 A regra CSS e sua sintaxe

body{
background-color: blue;
font-familly: “Arial Narrow”;
}

 No exemplo, mais uma declaração foi adcionada.

 Note que, se o valor for composto por mais de uma palavra,
deverá vir
entre aspas (“ ”)
 Folhas de Estilo
 Conjunto de regras de estilo aplicáveis às páginas de um site
 Existem 3 formas de declaração de folhas de estilo
 Incorporada (embedded) – dentro da própria página
 Externa (linked) – em um arquivo externo com extensão .css
 Locais (inline) – colocada dentro da tag de abertura do elemento de
marcação (menos recomendado. Evitar tanto quanto possível!)
 Estilos INLINE
 As regras de estilo são escritas diretamente dentro da tag de
abertura do
elemento.
 Informações de estilo são definidas para apenas um elemento,
utilizando-se o atributo style
 É o método menos recomendado porque as alterações devem ser
feitas
localmente.
<!DOCTYPE...>
<html xmlns=...>
<head> ... </head>
<body>
<p style="color:white; background-color: green; text-
align: center; font-family:Arial Narrow; font-size:15pt;
font-weight:bold;">
Este parágrafo tem cor branca, fundo verde, está
centralizado, <br>
fonte Arial Narrow , tem tamanho 15 e está em
... negrito.
<
 Estilos INCORPORADOS

•  A declaração da folha de estilo é realizada dentro da tag <head> e com o elemento <style>
•  A folha de estilo fica incorporada nas tags <style> e </style> da página em questão

<!DOCTYPE...>
<html xmlns=...>
<head>
<title> Exemplo de CSS </title> ...
<style> <body>
p{ <p>
color: white; Este parágrafo tem cor
background-color: green; branca, fundo verde, está
text-align: center; centralizado, fonte Arial
font-family: “Arial Narrow , tem tamanho 15 e
Narrow”; font-size: está em negrito.
15pt; </p>
font-weight: bold;
} </body>
</style> </html>
</head>
...
Estilos INCORPORADOS
 Estilos Externos
 Nesse método, a declaração é definida em um arquivo externo
com extensão .css contendo as regras de estilo e pode ser
aplicada a vários documentos (várias páginas)
 Existem 2 tipos
 Folhas de estilo “linkadas” – é criado um link para o arquivo externo no
elemento <head>, com o uso do elemento link

...
<head>
<link rel=“stylesheet” type=“text/css” href=“estilo.css” media=“all”>
</head>
...
Estilos Externos
 Estilos Externos
 Folhas de estilo “importadas” – usa-se a diretiva @import dentro do
elemento <style>

...
<head>
<style type=“text/css”>
@import url(“estilo.css”) all;
</style>
</head>

...
 Seletor Universal
 Aplicado a todos os elementos do documento.
 O exemplo abaixo indica que todos os elementos textuais terão a
cor
azul

* { color: blue; }
 Seletor de Tipo
O estilo é aplicado diretamente a um determinado elemento de
marcação
 No exemplo abaixo, a folha de estilo criada (meuestilo.css) indica
que todos os parágrafos estarão em itálico com cor verde, os
cabeçalhos h3 e h4 serão da fonte Arial e os itens de uma lista
terão tamanho 12px.
 É possível definir a mesma regra para vários elementos, separando-os por vírgulas
 Seletor de Tipo
 É possível ainda, ter várias regras para o mesmo
elemento
h3, h4 {
font-family: Arial;
}

h3{
color: blue;
}

h4{
color: yellow;
}
Seletor de Tipo
 Propriedades
 color: define a cor de primeiro plano de um elemento. Já vimos o
que essa propriedade faz em exemplos anteriores
 background-color: define a cor de fundo de um elemento
 Propriedades (Background)
 background-image: usada para definir uma imagem de fundo para
a página
 Propriedades (Background)
 background-repeat: usada para definir a frequencia de
repetição da imagem de fundo.
 Por padrão, o valor é repeat (repetir na direção x e y)
 Propriedades (Background)
 background-position: permite alterar a posição padrão de uma
imagem de fundo
 Por padrão, o valor é canto superior esquerdo
 Propriedades (Background)
 background-attachment: permite fixar o plano de fundo. Quando
rolar pela página, permanecerá fixo.
 background-attachment: fixed;
 background-attachment: scroll;
 Propriedades (Fontes)
 font-family: prioridade para apresentação de um elemento em uma página. Se a
primeira fonte da lista não estiver disponível na máquina do usuário, deverá
ser usada a segunda e assim por diante:
 font-sytle: pode assumir os valores normal, italic ou oblique.
 font-weight: normal, bolder, bold, lighter,...
 Unidades de Medidas
 Quando valores são definidos para as
propriedades CSS, são utilizadas algumas
medidas;
 Dividem-se em 2 grupos:
 Unidades absolutas:
 in – polegada
 cm – centímetro
 mm – milímetro
 pt – ponto
 Unidades relativas:
pc – pica. 1 pc = 12 pt
font-size: 30px;
 %
font-size:
 em – 1 em é igual ao tamanho da fonte
definido 12pt; font-
 ex – 1 ex equivale à altura da letra “x”
minúscula
size: 120%;
px – define o tamanho de um pixel no font-size:
monitor
1em;
 Propriedades (Fontes)

•  As propriedades são herdadas dos elementos superiores. O parágrafo p

herda as propriedades definidas no body. Com isso, a fonte vista é a definida na
regra do body.
• Já os cabeçalhos possuem uma regra específica que define sua família de fonte.
Com isso, a regra definida em de h3 e h4 tem prioridade sobre a regra do body.
 Propriedades (Text)
 As propriedades de text alteram as propriedades dos elementos
de linha dentro de elementos de bloco.

 text-align: left, right, center, justify

 text-decoration: underline, overline, line-through...
 text-transform: uppercase, lowercase, capitalize...

o elemento <img> terá seu alinhamento alterado caso seja definido uma
propriedade text-align para um elemento de bloco onde o <img> esteja
aninhado, pois ele é um elemento de linha!
 Um pouco sobre cores
 Sistema de Cores
 RGB
 O vermelho (R - red), o verde (G – green) e o azul (B – blue) são combinados
para formar outras cores.
 Um pouco sobre cores
 CSS permite especificar cores de diferentes modos
 As cores podem ser definidas usando seu nome
 Mas só há apenas algumas cores que são definidas pelo nome: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

 Através de seus percentuais de vermelho (Red), verde (Green) e azul (Blue)

 Utilizando porcentagem: rgb(80%, 40%, 0%)
 Ou valor entre 0 e 255: rgb(204, 102, 0)

 Códigos hexadecimais: cada conjunto de dois dígitos representa o vermelho, o

verde e o azul
 Hexadecimal: #cc6600
 É o mais utilizado. Sempre inicie com o #. Em hexadecimal, os valores permitidos vão de 0 a F (0 a
9, A a F)
Um pouco sobre cores
h3 {
color: aqua;
}

Ou ainda...

h3{
color: rgb(0, 255, 255);
}

Ou ainda...

h3{
color: #00FFFF;
}
 Tabela de Cores RGB
 Neste endereço pode ser encontrada uma tabela com diversos
códigos de cores RGB
 Entretanto, são possíveis 16 milhões de combinações
 Tipos de Seletores
Como fazer para aplicar diferentes estilos a elementos de um
mesmo tipo?
 Se quiser que os dois parágrafos abaixo possuam estilos diferentes?

<p> Meu primeiro texto </p>

<p> Meu segundo texto </p>

p{ p{
border: 1px solid blue; border: 3px dashed purple;
color: red; color: gray;
} }
 Seletor de Classe
 Utiliza o atributo “class” diferencia elementos (não deve ser
iniciada com
números)

<p class=“tipo1”> Meu primeiro texto </p>

<p class=“tipo2”> Meu segundo texto </p>

p.tipo1{ p.tipo2{
border: 1px solid blue; border: 3px dashed purple;
color: red; color: gray;
} }

Alba Lopes, Profa.

[email protected]
du.br
Seletor de Classe
 Seletor de Classe
 Agrupa elementos diferentes em uma mesma
classe
<h1 class=“estilo1”> Meu cabeçalho</h1>
<p class=“estilo1”> Meu parágrafo</p>

Nesse caso, o nome do elemento não é inserido na regra CSS.

Apenas o
nome da class:
.estilo1{
background-color: yellow;
margin: 50px;
border: 1px dashed blue;
color: #339966;
}
Seletor de Classe
 Seletor de ID
 Funciona como o seletor de classe, mas seleciona elementos que
o id case com o especificado na regra.

<h1 id=“meucabecalho”> Cabeçalho </h1>

Nesse caso, ao invés do ( . ) é utilizado o

(#)
#meucabecalho{ h1#meucabecalho{
border: 1px solid blue; border: 1px solid blue;
color: red; color: red;
} }
 Seletores de ID
 IDs em HTML devem ser únicos na página. Não se deve ter dois
elementos com o mesmo valor de atributo de id!

ERRADO:

<h1 id=“meucabecalho”> Cabeçalho h1 </h1>

<h2 id=“meucabecalho”> Cabeçalho h2 </h1>

CERT
O:
<h1 id=“meucabecalhoh1”> Cabeçalho h1 </h1>
<h2 id=“meucabecalhoh2”> Cabeçalho h2 </h1>
 Seletor de atributo
 Adcionando estilo em elementos com atributos
específicos.

input[type=“text”]
{ background-color:
blue; color: white;
}
 Links
 Aplicar propriedades aos links de acordo com o seu estado
(visitado, não visitado, ativo)
 Normalmente (dependendo do navegador)
 Links não visitados são da cor azul
 Links visitados são da cor roxa
 VER EXEMPLO

 Utilização de pseudo-classes
 Adcionar “efeitos especiais” a alguns seletores
 Utilização de “:”
 Links
 Elemento a. Pseudo-classe:
link

 Quando o link não foi visitado

a:link{
color: green;
}
 Links
 Elemento a. Pseudo-classe:
hover

 Quando o mouse estiver em cima

do link

a:hover{
color: gray;
}
 Links
 Elemento a. Pseudo-classe:
visited

 Quando o link já tiver sido visitado

 VER EXEMPLO

a:visited{
color: yellow;
}
 Links
 Dica: removendo o sublinhado de
links
a{
text-decoration: none;
}

 É possível, utilizando várias propriedades de CSS, criar diversos

tipos de menu.
 Veja exemplos em: http://maujor.com/tutorial/cssmenu.php
 Listas
 list-style-type
Em (X)HTML existe 2 tipos de listas (ordenadas e não ordenadas /
<ol> e <ul> )
 Com CSS, é possível adcionar estilo as listas. Pode utilizar até
imagens.

ul{ ul{
list-style-type: circle; list-style-type: square;
} }
 Listas Desordenadas
 list-style-
type

Valor Descrição
none Sem marcador
disc Default. O marcador é um círculo preenchido
circle O marcador é um círculo
square O marcador é um quadrado
 Listas Ordenadas
 list-style-
type
Valor Descrição
none Sem marcador
circle Círculo
disc Default. Círculo preenchido
square Quadrado
armenian Número Armenian
decimal Número
decimal-leading-zero Número com zeros iniciais (01, 02, 03, etc.)
georgian Numeração georgiano tradicional (an, ban, gan, etc.)
lower-alpha Letra minúscula (a, b, c, d, e, etc.)
lower-greek Grego minúsculo (alpha, beta, gamma, etc.)
lower-latin Latin minúsculo (a, b, c, d, e, etc.)
lower-roman Romano minúsculo (i, ii, iii, iv, v, etc.)
upper-alpha Letra maiúscula (A, B, C, D, E, etc.)
upper-latin Latino Maiúsculo (A, B, C, D, E, etc.)
upper-roman Romano Maiúscula (I, II, III, IV, V, etc.) A
a
l
b
Listas
 O Modelo de Caixa (Box Model)

•  Descreve os boxes (caixas) geradas pelos elementos HTML. Todos os

elementos possuem uma “caixa invisível” ao redor dele, com algumas
propriedades.
•  Detalha as opções de ajustes de margens, bordas, padding e conteúdo para cada
elemento
 O Modelo de Caixa

Exemplo

“HERCULE POIROT PAROU no patamar por um instante

com a cabeça um pouco inclinada, como se
esperasse ouvir alguma coisa. Nenhum ruído vinha
do andar de baixo.
Aproximou-se da janela e viu Mary Restarick
embaixo novamente entretida com a
jardinagem”

Trecho retirado do livro “A Terceira Moça” de

Agatha Christie
 O Modelo de Caixa

Exemplo

<p>
“HERCULE POIROT PAROU no patamar por um instante
com a cabeça um pouco inclinada, como se esperasse ouvir
alguma coisa. Nenhum ruído vinha do andar de baixo.
Aproximou-se da janela e viu Mary Restarick embaixo
novamente entretida com a jardinagem”
</p>
<h4>
Trecho retirado do livro “A Terceira Moça” de Agatha
Christie
</h4>
O Modelo de
Caixa
 Com um pouco de estilo, podemos
transformar
 O Modelo de Caixa
 Com um pouco de estilo, podemos
transformar
TO
bord P
er

n
margi

paddi
ng
paddi

paddi
margi RIGH
ng

margi

ng
LEF n T
T n

paddi
ng
n
margi

BOTTO
M
Definindo as Margens de um Elemento

body{
margin-top: 100px;
margin-left: 70px;
margin-right: 40px;
margin-right:
10px;
}

Ou ainda...

body{
margin: 100px
40px 10px 70px;
}
 Definindo o Padding de um elemento
 Pode ser entendido como “enchimento” de um
elemento.
h4{
background: yellow;
padding: 20px 20px 20px 80px;
}


Antes:


Depois
 Bordas
 As bordas podem ser usadas para infinitas
coisas
 Elemento decorativo ou servir de separação entre dois
elementos
 CSS proporciona infinitas possibilidades de utilização de
bordas

 Espessura [border-width]
 Pode assumir valores: thin, medium, thick (fina, média e
grossa)
 Ou um valor
numérico
 Bordas
 Cores [border-color]

 Valores expressos em nomes: red, blue, black,

yellow...
 Ou em códigos: “#123456” “rgb(123, )
 Bordas
 Estilo [border-style]
 Vários estilos de borda estão disponíveis. O estilo visível depende do
navegador
h4{
background: yellow;
color: #8b0000;
padding: 20px 20px
20px 80px;
border-width: thick;
border-color:
#8b0000;

border-style:
double;

}
 Bordas
 É possível ainda definir propriedades diferentes para cada uma
das bordas (left, right, top, bottom)

h4{
(...)
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: dashed;
border-bottom-color: blue;

}
 “Compilando” valores...
 É possível fazer as declarações para o mesmo elemento
utilizando uma linha só:
 Isto não serve apenas para bordas

h4{

border-top: thick solid red;

border-bottom: thick dashed blue;

}
 LAYOUT DE SITES
 Elementos responsáveis pela estruturação de páginas HTML
 div e span
 Agrupar e prover estrutura aos documentos

 div é um “conteiner” para elementos de bloco.

 span é um “container” para elementos de linha

 div e span não faz nenhuma modificação aparente no código. Não

tem uma “função” específica quanto elemento. Apenas agrupa
outros elementos dentro dele (não tem valor semântico)

Alba Lopes, Profa.

[email protected]
du.br
Layout
Exemplo
 PROPRIEDADES IMPORANTES PARA LAYOUT
 Antes de iniciar a criação de layouts, é importante conhecer algumas
propriedades
 Float
 Position
 Propriedade Float
 Propriedade float:
 Permite empurrar um elemento para a direita ou esquera, permitindo que outros
elementos
fiquem em torno dele
 Muito utilizado em imagens e quando se trabalha com layouts
 Elementos podem flutuar APENAS na horizontal (left/esquerda ou right/direita).
 Elementos DEPOIS do elemento flutuante irão ficar ao seu redor.
 Elementos ANTES do flutuante não sofrerão alteração.
 PROPRIEDADES: FLOAT
 Propriedade float:
 Exemplo: sem usar a
propriedade

texto texto texto texto texto texto

texto texto texto texto texto
texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto
 Propriedade Float
 Propriedade float
 Exemplo: usando a propriedade float: left

texto texto texto texto texto texto

texto texto texto texto texto
texto texto texto texto texto
texto texto texto texto texto
texto texto texto texto texto
 PROPRIEDADES: FLOAT
 Propriedade float
 Exemplo: usando a propriedade float: right

texto texto texto texto texto texto

texto texto texto texto texto
texto texto texto texto texto
texto texto texto texto texto
texto texto texto texto texto
 PROPRIEDADES: FLOAT
 Propriedade float
 Se tiver vários elementos flutuantes próximos, eles irão flutuar um ao lado do outro,
enquanto
houver espaço
 Ex: imagem e parágrafos flutuantes.

 Ver exemplo
 PROPRIEDADES: FLOAT
 Desativando o float
 Se for preciso que um elemento flutue pela página mas que nenhum outro
elemento fique ao
seu redor, pode-se utilizar propriedade clear

.imagemFlutuante {
clear: both;
}
 PROPRIEDADES: FLOAT

Propriedade Descrição Valores

clear Especifica qual lado de um left
elemento não pode ter right
outros elementos flutuantes both
none
inherit
float Especifica se uma caixa deve left
ou não flutuar right
none
inherit
 PROPRIEDADES: POSITION
 Permite posicionar um elemento
 Permite sobreposição de elementos
 Posicionamento estático
 Elementos HTML são estáticos por padrão. É sempre colocado de acordo com o fluxo
normal da página
 PROPRIEDADES: POSITION
 Posicionamento fixo:
 Um elemento com posição fixa está posicionado em relação à janela do
navegador
 Ele não vai mover mesmo se a janela é rolada
p.pos_fixed
{ position:
fixed; top:
30px; right:
5px;
}
 Elementos podem se
sobrepor
 PROPRIEDADES: POSITION
 Posicionamento relativo:
 Elemento é posicionado em relação à sua posição
normal

h2.pos_esq
{ position:
relative; left: -
20px;
}

h2.pos_esq
{ position:
relative; left: -
20px;
}
 HTML E A TAG DIV
 Utilização da tag
 <div> ... </div>
 Cria uma divisão ou uma seção em um documento
 Geralmente usado para formatar um grupo de elementos
com estilos
<div id=“principal”> <div class=“superior”>

HTM L
</div> </div>

#principal{ .superior{

CSS border: solid 1px black; background-color: gray;

} }
DI Propriedades CSS para formatar e
V
posicionar a div:

 width
 margin
 padding

background
 border
 float
 position
 ...
 LAYOUT
 Passos para criação de layouts:
 Identificar como você deseja dispor os elementos da sua
página
 Agrupar os elementos utilizando <div>
 Criar CSS para a div especificada
 LAYOUT
 Passos para criação de layouts:
 Identificar como você deseja dispor os elementos da sua
página
 Agrupar os elementos utilizando <div>
 Criar CSS para a div especificada

<div id=“cabeçalho”> ... </div>

... ...
</div> </div>

<div id=“m<enduiv”>id=“conteudo”>

<div id=“rodape”> ... </div>

Arquivo HTML
Arquivo CSS
Resultado no navegador
Conceitos
básicos do
Bootstrap
 Frameworks CSS
• São conjuntos de componentes que provêm uma estrutura básica de elementos reutilizáveis,
tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será
construída.
• São utilizados principalmente para construção de páginas de websites e de sistema para
internet.
• Frameworks CSS oferecem diferentes módulos e ferramentas:
• Redefinição da folha de estilo
• Grid especialmente para o design responsivo
• Tipografia web
• Conjunto de ícones em sprites ou fontes de ícone
• Styling para tooltips, botões, elementos de formulários
• Partes de interfaces gráficas como o acordeão, guias, slideshow ou janelas modais (Luz)
• Equalizador para criar conteúdo de altura igual
132
 Bootstrap
• Bootstrap é um framework web com código-fonte aberto para desenvolvimento
de componentes de interface e frontend para sites e aplicações web usando
HTML, CSS e JavaScript, baseado em modelos de design para a tipografia,
melhorando a experiência do usuário em um site amigável e responsivo.
• https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
• https://getbootstrap.com.br/
• https://bootsnipp.com/

133
 O Bootstrap é importante?
• Mais do que outros framework front-end, o Bootstrap tem se tornado ao longo
dos anos uma das ferramentas mais importantes para a criação de websites. Isto
porque seus padrões seguem os princípios de usabilidade e as tendências de
design para interfaces.
• Além disso, sua padronização permite que os sites tenham um melhor aspecto,
sendo uma forma de criar páginas esteticamente agradáveis. E você sabe que
quanto melhor o design de uma página, maior a taxa de satisfação dos usuários.

134
 Características e Vantagens do
Bootstrap
• Biblioteca de componentes
• Reuso de código
• Documentação e comunidade
• Padrão visual
• Responsividade
• Biblioteca de componentes
• Talvez uma das características mais interessantes deste framework é o fato dele
possuir uma extensa biblioteca de componentes, como ícones, caixas de texto,
painéis e cores em links.

135
 Reuso de código
• Assim como é objetivo de todo framework, o Bootstrap permite que menos
código possa ser escrito, já que ele entrega uma série de formatações visuais
prontas.
• A única necessidade do desenvolvedor é saber qual a classe ele deve chamar.

136
 Responsividade
• Além de padronizar uma série de parâmetros, o Bootstrap é uma das formas mais
fáceis de deixar um site responsivo. Se você não sabe o que significa o termo, ele
quer dizer que um site é adaptável a diferentes tipos de tela, como celular, tablet
ou computador.
• Hoje, indica-se que todos os sites devem ser responsivos para melhorar a
experiência do usuário e trazer benefícios para rankeamento do Google. Com o
Bootstrap, isso é algo extremamente facilitado. Com apenas uma linha de código
é possível deixar todo o projeto responsivo e melhorar a exibição do conteúdo de
acordo com tags específicas.

137
 Template inicial
<!DOCTYPE html>

<html lang="pt-br">

<head>

<!-- Meta tags Obrigatórias -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<title>Olá, mundo!</title>

</head>

<body>

<h1>Olá, mundo!</h1>

<!-- JavaScript (Opcional) -->

<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>

</html>

138
 HTML5 doctype
• Bootstrap exige o uso do doctype HTML5. Sem isso, você verá alguns estilos
incompletos e esquisitos.

<!DOCTYPE html>
<html lang="pt-br">
...
</html>

139
 Meta tag responsiva
• Bootstrap tem uma abordagem mobile first, uma estratégia que optimizamos o
código para dispositivos móveis primeiro e, então, é que começamos a pensar em
media queries para aparelhos maiores. Por isso, para garantir renderização
adequada e touch zooming em todos eletrônicos, use a tag responsiva viewport
no <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

140
 Tables
• <table class="classe">
• .table
• .table-striped
• .table-bordered
• .table-hover
• .table-condensed

141
 Images
• <img src="imagem" class="classe" alt="" width="height="">
• .img-rounded
• .img-circle
• .img-responsive

142
 Jumbotron Inside Container
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

143
 Wells
• Basic Well
• Example
<div class="well">Basic Well</div>

.well-lg
.well-sm

144
 Alerts
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">

<strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
145
 Buttons
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

146
 NavBar
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

147
 Forms

• Wrap labels and form controls in <div class="form-group"> (needed for optimum
spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements

<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

148
 Modal
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

149
Introdução ao
PHP
 Servidor WEB XAMPP
• XAMPP Apache + MariaDB + PHP + Perl
• XAMPP é o ambiente de desenvolvimento PHP mais popular.
• O XAMPP é gratuito, de fácil de instalar a distribuição Apache, contendo MySQL,
PHP e Perl.
• O pacote de código aberto do XAMPP foi criado para ser fácil de instalar e de
usar.

151
 Arquivos do projeto no XAMPP
• A pasta de projetos utilizando o XAMPP é: C:\
xampp\htdocs
• Dentro dessa pasta crie uma pasta com o
nome do seu projeto. Ex: C:\xampp\htdocs\
PASTA_DO_PROJETO
• Agora arraste a pasta até a área de trabalho
do VSCode IDE.
• Dê um START no XAMPP e vai no navegador e
digite a (URL) :
http://localhost/PASTA_DO_PROJETO.
• OBS: é importante verificar se o Apache está
iniciado (start).
152
 VSCode IDE
• O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft
para Windows, Linux e macOS.
• Ele inclui suporte para depuração, controle Git incorporado, realce de sintaxe,
complementação inteligente de código, snippets e refatoração de código.
• Extensões recomendadas:

153
 Localhost
• Na computação, o termo localhost se refere à localização do sistema que está
sendo usado.
• É um dispositivo loopback ao qual é atribuído o endereço IP 127.0.0.1 no IPv4,
ou::1 no IPv6, e pode ser usado por aplicações TCP/IP para testarem a
comunicação consigo mesmas.

154
 Introdução ao PHP
• PHP (um acrônimo recursivo para "PHP: Hypertext Preprocessor", originalmente
Personal Home Page) é uma linguagem interpretada livre, usada originalmente
apenas para o desenvolvimento de aplicações presentes e atuantes no lado do
servidor, capazes de gerar conteúdo dinâmico na World Wide Web.
• PHP é uma linguagem de scripts open source de uso geral, muito utilizada e
especialmente adequada para o desenvolvimento web.
• Essa linguagem permite que desenvolvedores escrevam páginas geradas
dinamicamente de forma rápida.
• PHP (um acrônimo recursivo para "PHP: Hypertext Preprocessor", originalmente
Personal Home Page) é uma linguagem interpretada livre, usada originalmente
apenas para o desenvolvimento de aplicações presentes e atuantes no lado do
servidor, capazes de gerar conteúdo dinâmico na World Wide Web
155
 Principais características
• A linguagem PHP é uma linguagem de programação de domínio específico, ou seja,
seu escopo se estende a um campo de atuação que é o desenvolvimento web. Seu
propósito principal é de implementar soluções web velozes, simples e eficientes.
• Velocidade e robustez.
• Orientação a objetos.
• Portabilidade - independência de plataforma - escreva uma vez, rode em qualquer
lugar.
• Tipagem dinâmica.
• Sintaxe similar a C/C++ e o Perl.
• Open-source.
• Server-side (O cliente manda o pedido e o servidor responde em página HTML)
156
 Exemplo de uso do PHP
• O arquivo index foi salvo com a extensão .php para mostrarmos ao nosso
interpretador que há um código PHP a ser interpretado.
• Além disso, no exemplo usamos a função echo para escrever na tela uma
mensagem.

157
 Como comentar o código no PHP
• Para comentarmos o nosso código PHP usamos duas barras ou # para
comentários de uma linha, e para comentários de múltiplas linhas usamos /* */,
o mesmo usado em CSS.

158
 Constantes no PHP
• O valor de uma constante jamais poderá ser alterado enquanto estiver sendo
executada e para defini-la utilizamos a função define().
• Utilizando a função define() definimos que a constante com o nome de PHP, terá
como valor: Linguagem Open – Source.

159
 Variáveis no PHP
• Para criarmos uma variável basta utilizar o sinal de cifrão. Uma variável pode
armazenar textos e números. Além disso, a linguagem PHP é case sensitive, então
A é diferente de a.
• No exemplo criamos uma variável ($name) e declaramos a ela uma string, sendo
assim precisamos colocá-la entre aspas. Já a outra variável ($age) é declarada
como inteiro, então não é necessário o uso de aspas. Ao usarmos echo nas
variáveis, o resultado impresso é o conteúdo dessa variável.

160
 Nomeação de variáveis
• Não inicie o nome de uma variável com números;
• Não utilize espaços em brancos;
• Não utilize caracteres especiais, somente underline;
• Crie variáveis com nomes que ajudarão a identificar melhor a mesma;
• Evite utilizar letras maiúsculas.

161
 Tipos de variáveis
• Booleanos: Este é o tipo mais simples, pois só pode expressar apenas dois
valores: TRUE (1) ou FALSE (0, null ou uma string vazia);
• Integer: é um número inteiro, podendo ser negativo ou positivo;
• Float : também chamado de double ou números reais representados com um
ponto para separar os dígitos do valor inteiro dos dígitos do valor das casas
decimais.
• Strings: é uma palavra ou frase entre aspas simples ou duplas, assim como
também pode ser binário, como o conteúdo de um arquivo MP3 ou JPG.

162
 Tipos de variáveis
• Note que quando declaramos no echo "Olá, $a, o PHP interpretou o conteúdo da
$a, pois está entre aspas duplas. E quando usamos a mesma forma, só que entre
aspas simples (echo 'Olá, $a'), não temos o mesmo resultado. Então quando
queremos que o PHP interprete o valor de nossa variável dentro de uma string é
necessário o uso de aspas duplas. Fique atento!

163
 Concatenar Strings
• Usar um ponto para concatenar strings

164
 Operadores matemáticos
• Os operadores matemáticos disponíveis em PHP são:
• Adição: +
• Subtração: -
• Multiplicação: *
• Divisão: /
• Módulo: %

165
 Operadores de Atribuição no PHP
• Utilizamos os operadores de atribuição para definir variáveis e seus valores, além
de usá-los juntamente com os operadores matemáticos.

166
 Incrementar ou decrementar
• Podemos também incrementar ou decrementar variáveis utilizando os
operadores de incrementação.

167
 Array
• Para declarar um array em PHP utilizamos o construtor de linguagem array() , para o qual
podemos passar por parâmetro os valores que desejamos armazenar, separados por
vírgula.

• Após declarar a variável que contém os valores, podemos acessá-los utilizando sua
posição, como mostra o exemplo a seguir:

• Também podemos sobrescrever o valor presente em uma posição específica do array

utilizando a chave a ele associada.

168
 Array
• Por meio de uma estrutura de repetição, como o foreach, podemos percorrer os
dados em um array.

169
 Array
• Unset: para remover determinado elemento do array:
unset($arr[5]);
• Para remover o array da memória:
unset($arr);
• Count: retorna a quantidade de elementos de um array:
count($arr);
• Explode: transforma string em array
$arr = array();
$arr = explode("/", "20/01/2001");
• Implode: transforma array em string.
$arr = array("Flavio", "Alexandre", "Micheletti");
$nomeCompleto = implode("-", $arr);
var_dump($nomeCompleto)
170
 Operadores Relacionais
• Esses são usados para comparar valores ou expressões, retornando um valor
booleano (true ou false):
• Igual: ==
• Diferente: != ou <>
• Menor que: <
• Maior que: >
• Menor ou igual: <=
• Maior ou igual: >=

171
 Operadores Lógicos
• Existem também os operadores lógicos para a criação de testes condicionais:
• $a and $b: enquanto A e B forem verdadeiros;
• $a or $b: enquanto A ou B forem verdadeiros;
• !: Negação

172
 Estrutura de Decisão if/else
• A condição é avaliada para que, caso algo seja verdadeiro, faça isto, senão, faça
aquilo.
• Criamos a variável $idade que guarda um inteiro. Em seguida utilizamos IF para
verificar se $idade é menor que 18, e caso seja será impresso: Você não pode
entra aqui! Depois criamos um ELSE, que é o contrário da primeira condição.

173
 Estruturas de Decisão (SWITCH)
• Para não manter um código cheio de ELSEIF's, o mais indicado é usar o SWITCH,
que permite criarmos infinitas condições de forma organizada.

174
 Laços de Repetição (for)
• A primeira é executada ao início do loop, a segunda é a condição (enquanto ela
for verdadeira, o loop continuará), e a terceira é executada ao fim de cada
repetição.

175
 Laços de Repetição (foreach)
• O foreach faz o mesmo que as demais estruturas já apresentadas, porém, com
ela podemos trabalhar com arrays.
• No exemplo é criado um array e depois usamos o foreach para ir nesse array e
repetir tudo o que conter nele. A sintaxe do foreach é mostrada entre parênteses
onde colocamos o nome de nossa variável, e com o termo as alteramos o nome
dela para $can.
• Depois, basta dar um echo que tudo que conter em nosso array será mostrado.

176
 Funções
• Funções podem ser definidas blocos de código com um objetivo específico,
identificados por um nome através do qual pode ser referenciado a partir de
várias partes do código.
• Essa é uma das principais técnicas utilizadas para garantir a reutilização de
código, tornando a programação mais prática e o código mais “limpo” e
organizado.

177
 Funções para tratamento de
Strings
1. strlen() – Retorna o número de <?php
caracteres de uma string /* Validar se um campo de
<?php formulário tem o número
$str = "abcdef"; necessário de caracteres */
// Retorna 6 $nome =$_POST['comentario'];
echo strlen($str);
$str = ' ab cd '; if (strlen($nome) > 200) {
// Retorna 7 echo "O comentário deve ter no
echo strlen($str); máximo 200 caracteres.";

?> }
?> 178
 Funções para tratamento de
Strings
2. strtoupper() – Converte uma string para maiúsculas.

<?php
$str = "eu sou uma string";

// Retorna "EU SOU UMA STRING"

echo strtoupper($str);
?>

179
 Funções para tratamento de
Strings
3. strtolower() – Converte uma string para minúsculas.

<?php
$str = "EU SOU UMA STRING";

// Retorna "eu sou uma string"

echo strtolower($str);
?>

180
 Funções para tratamento de
Strings
4. urlencode() – Retorna a string, convertida para o formato
urlencode.
<?php
$frase = "Eu preciso ser passado por GET";
// Retorna "Eu+preciso+ser+passado+por+GET";
echo urlencode($frase)
?>
5. trim() – Retira espaços e linhas em branco do início e do final da
string fornecida.
<?php
// Retorna "faael"
181
echo trim(" faael \n \n ");
 Funções para tratamento de Data
1) Exibindo a data no formato 16/02/2004.
<?
//FUNÇÃO DATE()
echo $data = date("d/m/Y");
?>
2) Exibindo a data e a hora no formato 14/02/2004 21:04:02
<?
//FUNÇÃO DATE()
echo $data = date("d/m/Y H:i:s ");
?>
3) Exibindo a data por extenso Sat, 14 de Feb de 2004.
<?
//FUNÇÃO DATE()
echo $data = date("D, d de M de Y");
?> 182
 Funções Matemáticas
• // Arredonda pi 3.1416... para baixo
$round = round(M_PI);
print $round; // imprime 3
• // Desta vez, arredonda pi em 4 casas decimais
$round_decimal = round(M_PI, 4);
print $round_decimal; // imprime 3.1416
• // imprime um numero entre 0 e 32767
print rand();
• // imprime um numero entre 1 e 10
print rand(1,10);
• pow ( number $base , number $exp )
• sqrt ( float $arg )
183
 Funções de sessão
• Session_start inicia a sessão
session_start();
$_SESSION['usuario'] = 'Thiago';
• Deleta uma variável da sessão
unset($_SESSION['usuario']);
session_destroy(); // Destrói toda sessão
header('location:index.php');
• Testa variável de sessão
if((!isset ($_SESSION['login']) == true) and (!isset ($_SESSION['senha']) == true))
{
unset($_SESSION['login']);
unset($_SESSION['senha']);
header('location:index.php');
}

184
 Funções de include
• A declaração include_once inclui e avalia o arquivo informado
durante a execução do script.
<?php
include_once "a.php"; // this will include a.php
include_once "A.php"; // this will include a.php again! (PHP 4 only)
?>

185
 Outras funções
• isset — Informa se a variável foi iniciada
// Será interpretado como TRUE imprimindo o texto.
if (isset($var)) {
echo "Essa variável existe.";
}

186
 Criando funções¶
<?php
function foo ($arg_1, $arg_2, /* ..., */ $arg_n)
{
echo "Exemplo de função.\n";
return $valor_retornado;
}
?>

187