CS - Web (Js + PHP)
Enviado por
Fernando Avelino QuissangaCS - Web (Js + PHP)
Enviado por
Fernando Avelino QuissangaWhatsApp: +244 946269760 Facebook: Ja Ta Ki
Mentira Da Programação Web com JS e Php
Aula: Programação web refere-se ao desenvolvimento de sites, aplicativos e serviços online, que são
acessíveis através da internet. Envolve a criação de códigos para construir a interface do usuário (front-
end) e a lógica de funcionamento do site (back-end).
1. Introdução Estrutura básica do documento
Conceitos básicos da web <!DOCTYPE html>
- Front-end: Refere-se à parte visual do site ou aplicativo <html>
com a qual o usuário interage. Envolve tecnologias como HTML, <head>
CSS e JavaScript. <title>Título da Página</title>
- Back-end: É a parte do site que não é visível para o </head>
usuário, mas que controla o funcionamento e a lógica por trás <body>
das cenas. Inclui linguagens de programação como Python, PHP, Conteúdo da Página
Ruby, entre outras. </body>
</html>
Ferramentas para desenvolvimento web
Para desenvolver projetos web, você precisará de ferramentas - Tags: são palavras-chave usadas para representar elementos
como: do documento. Elas são colocadas entre colchetes angulares "<"
• Editores de código (ex: Visual Studio Code, Sublime e ">".
Text);
• Navegadores (ex: Google Chrome, Mozilla Firefox); - Elementos: são compostos de uma tag de abertura e outra de
• Frameworks (ex: React, Angular); fechamento (com / antes do nome da tag), e entre elas, o
• Servidores locais (ex: XAMPP, WAMP) para testar suas conteúdo a ser exibido na página.
aplicações.
- Atributos: fornecem informações adicionais sobre um
elemento. Eles são colocados dentro da tag de abertura, depois
Exercício do nome da tag, e são compostos de um nome e um valor.
1º. No seu PC (Windows, Mac, Linux):
a. Instale o Netbeans ou Visual Studio Code (VS Code) Body e Head são duas das principais tags no HTML que são
no teu computador, pesquisando na internet; usadas para construir o conteúdo de uma página. Abaixo estão
b. Certifica - se de ter navegador: Microsoft Edge ou alguns exemplos de como usá-las corretamente:
Chrome no seu computador.
c. Instale o XAMPP. - Body: Esta tag envolve todo o conteúdo visível da página,
d. Instale o Git baixando em https://git-scm.com/ e incluindo texto, imagens, vídeos e elementos interativos. É
seguindo as instruções de instalação para o seu aqui que você deve incluir tudo o que os usuários verão quando
sistema operacional. visitarem sua página.
2º. No seu Fone (Android)
a. Instale o Acode ou Dcoder, Compiler IDE no teu fone, Exemplo de uso da tag Body:
pesquisando na PlayStore;
b. Certifica - se de ter navegador atualizado: Chrome <!DOCTYPE html>
no seu fone. <html>
c. Instale o Termux ou AWebServer. <head>
3º. No seu Fone (IPhone) <title>Minha página</title>
a. Instale o Coda ou Buffer Editor ou Textastic Code </head>
Editor ou Koder Code Editor no teu fone, pesquisando <body>
no AppStore; <h1>Bem-vindo ao meu site!</h1>
b. Certifica - se de ter navegador atualizado; <p>Aqui está o conteúdo principal.</p>
c. Instale o Kodiak PHP/MySQL Client. <img src="imagem.jpg" alt="Imagem">
</body>
</html>
2. Visão Geral Do HTML e CSS
Como trabalhar com HTML? - Head: Esta tag, por outro lado, contém informações que não
1. Abra um editor de texto como o Bloco de Notas, Sublime são mostradas aos usuários. Ela inclui os metadados da página,
Text, Visual Studio Code etc. como título, descrição e palavras-chave, bem como qualquer
2. Crie um novo arquivo e salve-o com extensão ".html", por outro tipo de informação que o navegador precise saber antes
exemplo, "meusite.html". de carregar o conteúdo da página.
3. Digite o seguinte código na primeira linha do
arquivo:`<!DOCTYPE html>` Exemplo de uso da tag Head:
4. Em seguida, adicione as tags HTML básicas de abertura e
fechamento: <!DOCTYPE html>
``` <html>
<html> <head>
<head> <title>Minha página</title>
<title>Título do Site</title> <meta name="description" content="Descrição da página">
</head> <meta name="keywords" content="palavra-chave1, palavra-
<body> chave2, palavra-chave3">
<!-- conteúdo do site aqui --> <link rel="stylesheet" type="text/css" href="estilo.css">
</body> </head>
</html> <body>
``` <h1>Bem-vindo ao meu site!</h1>
5. Dentro das tags do body, digite uma tag heading <p>Aqui está o conteúdo principal.</p>
(cabeçalho): <img src="imagem.jpg" alt="Imagem">
``` </body>
<h1>Olá, mundo!</h1> </html>
```
6. Salve o arquivo e abra-o em um navegador da web. Você deve Neste exemplo, a tag Head contém as meta tags que fornecem
ver o texto "Olá, mundo!" em negrito no topo da página. informações sobre o conteúdo da página. Também inclui um link
para um arquivo CSS que contém estilos que serão aplicados à
Pronto, agora você criou o seu primeiro "Olá, mundo!" em HTML. página.
Estrutura/Formatação dos Texto /* Definir a cor do texto */
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
<b>Bold text</b> p {
<i>Italic text</i> color: #333;
<code>Monospaced</code> }
<sub>Subscript</sub> /* Definir a largura da borda */
<sup>Superscript</sup> h1 {
<h1>Top-level heading</h1> border: 1px solid #ccc;
<h2>Sub-heading</h2> }
<h3>Sub-sub-heading</h3> </style>
<p>Paragraph</p> </head>
<br> (forced line break) <body>
<h1>Exemplo de texto com cor vermelha</h1>
Caracteres especiais: </body>
< < > > & & ° ° • • Δ Δ π π “ </html>
“ ” ” ‘ ‘ ’ ’ — — − −
  vaja mais em: o Aqui está um exemplo de como adicionar um estilo
(http://www.webstandards.org/learn/reference/charts/entities/) à tag HTML (Externo):
Ola-mundo.html
Comentario em HTML: <!-- Este comentario naão vai <!DOCTYPE html>
aparecer, apenas para te ajudar a lembrar de certas <html>
coisas suas --> <head>
<meta charset="utf-8" />
Ancora/Link: <a href="http://site.com/path/file.html"> <link rel="stylesheet" type="text/css" href="estilo.css">
para navegar em certas paginas </a> </head>
<body>
Imagem: <img src="imagefile.png" width="200" <h1>Hello world!</h1>
height="100" alt="nome ou dica da foto"> <p>I ♥ CSS</p>
</body>
Listas: existem dois tipos e seus atributos. </html>
Ordenada: numeradas Não ordenada: marcas
<ol> <ul> estilo.css
<li> primeiro item</li> <li> item</li> h1 {
<li> segundo item</li> <li> outro item</li> color: green;
<li> terceiro item</li> <li> mais item</li> text-decoration: underline;
</ol> </ul> }
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
Elementos Genéricos: existem muitas elementos
}
semânticos postos no HTML 5, conforme podes conferir
nos nossos materiais sobre a aula de HTML 5. Header
o Aqui está um exemplo de como adicionar um estilo
(cabeçalho da página ou seção), Nav (área de navegação,
à tag HTML (na linha): Fontes e cores
Main (conteúdo principal), Section (seções da página),
<h1 style="font-size:24px; color:red;"> Hoje </h1>
Footer (rodapé da página, Article (seção autônoma da
<body style="font-family:sans-serif; background-
página, como um artigo ou notícia). Mas os principais
color:#d0d0d0;"> corpo </body>
são:
o <div>Elementos em blocos</div>
o <span> Elementos em linhas</span>
Centralizar um texto: <h1 style="text-
align:center;">Centered Heading</h1>
CSS e sintaxe: o CSS é um acrônimo para "Cascading
Style Sheets" e é usado para estilizar páginas web. Ele Bloco flutuante:
<div style="width:200px; float:right; margin:0 0 10px 10px;">
é uma linguagem de folha de estilo que é usada para
Conteúdo flutuante (normalmente um imagem) vai aqui.
definir a aparência visual de uma página web.
(Note os 10-pixel bottom (abaixo) e left (esquerda) margins.)
</div>
- Sintaxe básica: um bloco de declaração começa com uma chave
<p>Este paragrafo ficará flutuante.</p>
({) e termina com uma chave (}). Cada declaração consiste de
uma propriedade seguida por um valor, separados por dois
pontos (:). As declarações são separadas por ponto e vírgula
(;). Centralizar o Layout: <div style="width:600px; margin-
- Seletores: o seletor CSS é usado para selecionar o elemento left:auto; margin-right:auto;"> Conteúdo
HTML que você deseja estilizar. Os seletores podem ser simples centralizado</div>
(como selecionar um elemento por seu tipo) ou complexos (como
selecionar um elemento por seu atributo). Duas colunas Layout
- Propriedades: as propriedades CSS são usadas para definir a <div style="width:610px;">
aparência visual de um elemento HTML. Alguns exemplos de <div style="width:400px; float:left; margin-right:10px;">
propriedades incluem cor, tamanho de fonte, largura e altura. Coluna esquerda
Elemetos { </div>
Propriedades: Seletores; <div style="width:200px; float:left;">
} Coluna direita
Aqui estão alguns exemplos de como usar CSS: </div>
o Aqui está um exemplo de como adicionar um estilo </div>
à tag HTML (Internos):
<html> 3. Formulários/ UI –Interface do Usuário
<head> Formulários HTML são usados em páginas da web para permitir
<style> que os usuários insiram informações e enviem essas informações
h1 { para o servidor. Aqui estão alguns exemplos de como usar
color: red; campos, botões, menus suspensos e validação de formulários
} corretamente:
body {
background-color: #f2f2f2;
}
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Campos de formulário: existem vários tipos de campos 11º. Criar uma página HTML utilizando o modelo básico com as
que podem ser usados em um formulário, como campos de tags <html>, <head> e <body>
texto, de senha, de e-mail e de número. Esses campos 12º. Inserir um vídeo na página usando a tag <video> e
são definidos usando as tags input e podem ser especificando o caminho do vídeo
personalizados com vários atributos para controlar como 13º. Usar a tag <ul> para criar uma lista com marcadores
eles se comportam. Exemplo de campo de formulário: personalizados
<label for="nome">Nome:</label> 14º. Inserir um áudio na página usando a tag <audio> e
<input type="text" id="nome" name="nome"> especificando o caminho do arquivo de áudio
Neste exemplo, o campo de texto para o nome do usuário é 15º. Criar uma página com pelo menos 2 seções separadas pela
definido usando a tag input com o atributo type="text". O tag <hr>
atributo id é usado para identificar o campo e o atributo name 16º. Inserir uma tabela com células mescladas usando a tag
é usado para enviar o valor do campo para o servidor. <td rowspan=""> ou <td colspan="">
17º. Criar um menu de navegação para a página usando a tag
Botões de formulário: os botões podem ser usados em um <nav>
formulário para permitir que os usuários enviem os 18º. Usar a tag <article> para criar um bloco de conteúdo
dados inseridos. Existem dois tipos principais de independente na página.
botões, botões de envio e botões de redefinição. 19º. Crie uma folha de estilo externa e ligue-a a um arquivo
Exemplo de botão de formulário: HTML.
<input type="submit" value="Enviar"> 20º. Defina a cor de fundo para uma div.
Neste exemplo, o botão é definido usando a tag input com o 21º. Defina a cor do texto para uma div.
atributo type="submit". O atributo value é usado para definir 22º. Defina um tamanho de fonte para o texto em um
o texto exibido no botão. parágrafo.
23º. Defina um tamanho de fonte diferente para o texto em um
Menus suspensos: os menus suspensos são usados para cabeçalho.
permitir que os usuários selecionem entre um conjunto 24º. Crie uma borda para uma div.
de opções. Eles são definidos usando a tag select e 25º. Altere a opacidade de uma imagem.
podem ser personalizados com várias tags option. 26º. Defina uma imagem como plano de fundo para uma div.
Exemplo de menu suspenso: 27º. Centralize uma imagem horizontalmente em uma div.
28º. Centralize um bloco de texto em uma div.
<label for="cores">Selecione a cor:</label> 29º. Adicione margens a uma div.
<select id="cores" name="cor"> 30º. Adicione preenchimento a uma div.
<option value="vermelho">Vermelho</option> 31º. Defina o estilo de lista para uma lista não ordenada.
<option value="azul">Azul</option> 32º. Defina o estilo de lista para uma lista ordenada.
<option value="verde">Verde</option> 33º. Adicione uma sombra a uma caixa de texto.
</select> 34º. Adicione um gradiente de cor a uma div.
35º. Cria uma tela de login
Neste exemplo, o menu suspenso para selecionar uma cor é
definido usando a tag select com as tags option para fornecer
as opções. O atributo value é usado para enviar o valor
selecionado para o servidor. 4. JavaScript
Tag de script
Validação de formulários: a validação de formulários é <script> /* código JavaScript */ </script> (código no mesmo
usada para garantir que os dados inseridos pelos arquivo)
usuários sejam válidos antes de serem enviados para o
servidor. Isso é feito usando a tag form com o atributo <script src="meuScript.js">
onsubmit, juntamente com uma função JavaScript que // comentário de uma linha;
verifica os dados. Exemplo de validação de formulário: /* várias linhas */
</script> (código em arquivo externo)
<form onsubmit="return validaFormulario()">
<label for="idade">Idade:</label> Declaração de variáveis:
<input type="number" id="idade" name="idade"> var minhaVariavel; // declara o escopo da variável
<input type="submit" value="Enviar"> var minhaVariavel = 42; // combina declaração e inicialização
</form>
Saída e Entrada:
Neste exemplo, a tag form é usada com o atributo onsubmit que Entrada e saída em JavaScript geralmente se referem a
chama a função JavaScript validaFormulario() antes de enviar interações do usuário com o navegador. Algumas das maneiras
os dados para o servidor. A função pode usar uma variedade de comuns em JavaScript incluem:
técnicas para verificar se os dados estão corretos, como regex - Usando o método document.write() - Este método permite que
ou comparação de valores máximos e mínimos. você escreva diretamente no documento HTML, substituindo
completamente o conteúdo anterior do documento.
Essas são apenas algumas das muitas técnicas e tags usadas no - Usando o método console.error() - Este método escreve uma
HTML para criar formulários na web. Ao usar essas tags mensagem de erro no console. É usada para indicar problemas
corretamente, você pode criar formulários elegantes, que impedem a execução correta do código.
funcionais e seguros que atendem às necessidades de seus - Usando o método prompt() - Este método cria uma caixa de
usuários. diálogo que pede ao usuário para inserir informações e retorna
o valor inserido pelo usuário.
Exercício - Usando o método confirm() - Este método cria uma caixa de
1º. O que mais gostou e entendeu? diálogo que pede ao usuário para confirmar ou cancelar uma
2º. O que é HTML? ação e retorna o valor da escolha do usuário.
3º. O que é CSS? - Usando o método alert() - Este método cria uma caixa de
4º. Criar um parágrafo com o texto "Meu primeiro parágrafo em diálogo que exibe uma mensagem para o usuário e requer que o
HTML" usuário clique em "OK" para continuar.
5º. Inserir uma imagem na página usando a tag <img> e
especificando o caminho da imagem Em geral, JavaScript é uma linguagem de programação versátil
6º. Criar uma lista não ordenada com pelo menos 3 itens que permite uma ampla variedade de entradas e saídas. As
7º. Criar uma lista ordenada com pelo menos 3 itens entradas podem ser coletadas de várias fontes diferentes,
8º. Usar a tag <a> para criar um link para outra página enquanto a saída pode ser exibida de várias maneiras
9º. Inserir uma tabela com pelo menos 3 colunas e 3 linhas diferentes, dependendo das necessidades do desenvolvedor.
10º. Usar a tag <div> para criar uma divisão na página e
aplicar estilo a ela usando CSS
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Operadores: - Escopo de variáveis em funções
Aritmética + - * / - Variáveis declaradas dentro de uma função são apenas
Atalhos += -= *= /= ++ -- acessíveis dentro do escopo da função
Relações == != < <= > >= - Variáveis declaradas fora de uma função são acessíveis
Lógica && (e) || (ou) ! (não) true false globalmente
Objeto Matemático: Math.PI; Math.E; Math.sqrt(x);
Math.pow(x,y); Math.cos(t); Math.acos(x); Math.exp(x); - Funções anônimas
Math.sin(t); Math.asin(x); Math.log(x); Math.tan(t); - São funções sem nome que podem ser atribuídas a variáveis
Math.atan(x); Math.atan2(y,x); Math.max(x,y); Math.min(x,y); ou passadas como parâmetros para outras funções
Math.abs(x); Math.round(x); Math.floor(x); Math.ceil(x); - Exemplo: const nomeDaVariavel = function() { /* corpo da
Math.random(). função */ }
Estruturas de controle: as estruturas de controle em - Arrow functions (funções de seta)
JavaScript podem ser divididas em três categorias - São uma forma mais concisa de escrever funções em
principais: estruturas de controle condicionais, JavaScript
estruturas de controle de repetição e estruturas de - Exemplo: const nomeDaFuncao = () => { /* corpo da função
controle de saltos. */ }
a. if (condition) {statementsIfTrue} - Funções de callback
- São funções passadas como parâmetros para outras funções
b. if (condition) {statementsIfTrue} else - São usadas para executar uma ação quando uma outra ação é
{statementsIfFalse} concluída
c. cresult = condition ? expr1 : expr2 - Funções de primeira classe
- São funções que podem ser armazenadas em variáveis,
d. for ([init expr]; [condition]; [update expr]) passadas como parâmetros ou retornadas por outras funções
{statements} - São consideradas objetos de primeira classe em JavaScript
e. for (var in object) {statements} - Métodos de função: São funções que fazem parte do objeto e
podem ser chamadas usando a notação de ponto. Exemplo:
f. for each ([var] varName in objectRef) {statements} objeto.nomeDoMetodo()
g. with (objRef) {statements} Objetos:
particula = {nome:"elétron", massa:9.1e-31, carga:1.6e-19};
h. do {statements} while (condition) eSobreM = particula.carga / particula.massa;
i. yield value Arrays:
x = new Array(N); // cria um array com N elementos, de 0 a N-1
j. while (condition) {statements}
let array = [1, 2, 3, 4, 5];
k. return [value]
array.length; //retorna o tamanho do array
l. switch (expression) { array.push(6); //adiciona o valor 6 no final do array
case labelN :statements array.pop(); //remove o último valor do array e retorna esse
[break] valor
... array.unshift(0); //adiciona o valor 0 no início do array
[default : array.shift(); //remove o primeiro valor do array e retorna
statements] esse valor
} array.slice(2, 4); //retorna um novo array com os elementos da
posição 2 até a posição 4 (não inclusa)
m. label : array.splice(2, 2, 7, 8); //remove 2 elementos a partir da
continue [label] posição 2 e adiciona os valores 7 e 8 no lugar
break [label] array.join(", "); //retorna uma string com os valores do array
separados por ", "
n. try {statements to test} array.sort(); //ordena o array em ordem crescente (não
catch (errorInfo) {statements if exception occurs in funciona com valores numéricos)
try block} array.reverse(); //inverte a ordem dos elementos do array
[finally {statements to run, exception or not}]
Métodos principais (variável.):
o. throw value a. constructor, length, prototype, concat(array2),
every(func[, thisObj]), filter(func[, thisObj]),
forEach(func[, thisObj]), indexOf(func[, thisObj]),
Funções: uma função é um bloco de código que pode ser join("char"), lastIndexOf(func[, thisObj]),
chamado repetidamente em um programa map(func[, thisObj]), pop(), push(), reverse(),
- É uma forma de encapsular um conjunto de instruções em um shift(), slice(i,[j]), some(func[, thisObj]),
único nome. Funções podem ter parâmetros e retornar valores. sort(compareFunc), splice(i,j[,items]),
Sintaxe de definição de função toLocaleString(), toString(), unshift()
- function nomeDaFuncao(parâmetros) {// corpo da função
} String:
let texto = "Exemplo de texto";
- Chamada de uma função
- Para chamar uma função, é necessário apenas usar seu nome texto.length; //retorna o tamanho da string
e passar os parâmetros, caso existam texto.indexOf("exemplo"); //retorna a posição da primeira
- Exemplo: nomeDaFuncao(parametro1, parametro2) ocorrência de "exemplo"
texto.lastIndexOf("e"); //retorna a posição da última
- Tipos de funções ocorrência de "e"
- Funções sem parâmetros e sem retorno
- Funções com parâmetros e sem retorno
- Funções sem parâmetros e com retorno
- Funções com parâmetros e com retorno
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Métodos principais (variável.): Acesso a elementos HTML:
a. constructor, length, prototype, id = "meuElementoH" (na tag de abertura do HTML)
anchor("anchorName"), big(), blink(), bold(), var meuElementoJ = document.getElementById("meuElementoH");
charAt(index), charCodeAt([i]), concat(string2), (em JavaScript)
fixed(), fontcolor(#rrggbb), fontsize(1to7),
fromCharCode(n1...)*, indexOf("str" [,i]), Métodos principais (document):
italics(), lastIndexOf("str" [,i]), link(url), a. Métodos: clear(), close(), createAttribute(”name”),
localeCompare(), match(regexp), replace(regexp,str), createCDATASection(”data”), createComment(”text”),
search(regexp), slice(i,j), small(), split(char), createDocumentFragment(), createElement(”tagname”),
strike(), sub(), substr(start,length), createElementNS(”uri”, “tagname),
substring(intA, intB), sup(), toLocaleLowerCase(), createEvent(”evtType”), createEventObject([evtObj]),
toLocaleUpperCase(), toLowerCase(), toString(), createNSResolver(nodeResolver), createRange(),
toUpperCase(), valueOf() createStyleSheet([”url”[, index]]),
createTextNode(”text”), createTreeWalker(root, what,
Formatação de números: minhaString = filterfunc, exp), elementFromPoint(x, y),
Number(Math.PI).toFixed(2); // "3.14" evaluate(”expr”, node, resolver, type, result),
execCommand(”cmd”[, UI][, param]),
Métodos principais (variável.): getElementById(”ID”), getElementsByName(”name”),
a. constructor, MAX_VALUE, MIN_VALUE, NaN, importNode(node, deep), open([”mimetype”][,
NEGATIVE_INFINITY, POSITIVE_INFINITY, prototype, “replace”]), queryCommandEnabled(”commandName”),
toExponential(n), toFixed(n), toLocaleString(), queryCommandIndterm(”commandName”),
toString([radix]), toPrecision(n), valueOf(). queryCommandState(”commandName”),
queryCommandSupported(”commandName”),
“Aqui começa o DOM e BOM” queryCommandText(”commandName”),
Atributos de eventos HTML: queryCommandValue(”commandName”), recalc([all]),
write(”string”), writeln(”string”), ,
onclick = "minhaFuncao();" (usado para botões, links)
onchange = "minhaFuncao();" (usado para sliders, etc.)
b. Atributos: activeElement, alinkColor, anchors[],
Métodos principais: applets[], baseURIM, bgColor, body, charsetE,
a. DOM: appCoreM, clientInformation, clipboardData, characterSet, compatMode, contentType, cookie,
closed, Components[], contentM, controllers[], defaultCharset, defaultView, designMode, doctype,
crypto, defaultStatus, dialogArguments, documentElement, documentURI, domain, embeds[],
dialogHeight, dialogLeft, dialogTop, dialogWidth, expando, fgColor, fileCreatedDate, fileModifiedDate,
directories, document, event, external, fileSize, forms[], frames[], heightMS, images[],
frameElement, frames[], fullScreen, history, implementation, inputEncoding, lastModified,
innerHeight, innerWidth, length, location, linkColor, links[], location, mediaE, mimeType,
locationbar, menubar, name, navigator, netscape, nameProp, namespaces[], parentWindow, plugins[],
offscreenBuffering, opener, outerHeight, outerWidth, protocol, referrer, scripts[], security, selection,
pageXOffset, pageYOffset, parent, personalbar, strictErrorChecking, styleSheets[], title, URL,
pkcs11, prompter, returnValue, screen, screenLeft, URLUnencoded, vlinkColor, widthMS, xmlEncoding,
screenTop, screenX, screenY, scrollbars, scrollMaxX, xmlStandalone, xmlVersion
scrollMaxY, scrollX, scrollY, self, sidebar, status,
statusbar, toolbar, top, window, Modificando conteúdo:
addEventListener(”evt”, func,capt), alert(”msg”), meuElementoJ.innerHTML = "Novo conteúdo";
attachEvent(”evt”, func), back()M, blur(), meuElementoJ.innerHTML += "Conteúdo acrescentado";
clearInterval(ID), clearTimeout(ID), close(), meuBotao.value = "Novo texto do botão";
confirm(”msg”), createPopup(), detachEvent(”evt”,
func), dispatchEvent(), dump(”msg”), Modificando estilo: css com JavaScript puro
execScript(”exprList”[, lang]), find([”str”[, case[, meuElemento.style.color = "vermelho";
up]]), fireEvent(”evt”[, evtObj]), focus(), meuElemento.style.backgroundColor = "#ffff80";
forward(), geckoActiveXObject(ID), meuElemento.style.display = "none"; (esconde um elemento
getComputedStyle(node, “”), getSelection(), home(), completamente)
moveBy(Δx, Δy), moveTo(x, y), navigate(”url”), meuElemento.style.display = "block"; (mostra um elemento
open(”url”, “name”[, specs]), openDialog(”url”, block)
“name”[, specs]), print(), prompt(”msg”, ”reply”), meuElemento.style.display = "inline"; (mostra um elemento
removeEventListener(”evt”, func,capt), resizeBy(Δx, inline)
Δy), resizeTo(width, height), scroll(), scrollBy(Δx,
Δy), scrollByLines(n), scrollByPages(n), scrollTo(x, Métodos principais (meuElemento.style.):
y), setInterval(func, msecs[, args]), a. Text & Fonts: color, font, fontFamily, fontSize,
setTimeout(func, msecs[, args]), showHelp(”url”), fontSizeAdjust, fontStretch, fontStyle, fontVariant,
showModalDialog(”url”[, args][, features]), fontWeight, letterSpacing, lineBreak, lineHeight,
showModelessDialog(”url”[, args][, features]), quotesM, rubyAlign, rubyOverhang, rubyPosition,
sizeToContent(), stop(), onabort, onafterprint, textAlign, textAlignLast, textAutospace,
onbeforeprint, onbeforeunload, onblur, onclick, textDecoration, textDecorationBlink,
onclose, onerror, onfocus, onhelp, onkeydown, textDecorationLineThrough, textDecorationNone,
onkeypress, onkeyup, onload, onmousedown, textDecorationOverline, textDecorationUnderline,
onmousemove, onmouseout, onmouseover, onmouseup, textIndent, textJustify, textJustifyTrim,
onmove, onreset, onresize, onscroll, onunload. textKashidaSpace, textOverflow, textShadow,
b. BOM: appCodeName, appMinorVersion, appName, textTransform, textUnderlinePosition, unicodeBidi,
appVersion, browserLanguage, cookieEnabled, whiteSpace, wordBreak, wordSpacing, wordWrap,
cpuClass, language, mimeTypes, onLine, oscpu, writingMode.
platform, plugins, product, productSub, b. Positioning: bottom, height, left, pixelBottom,
securityPolicy, systemLanguage, userAgent, pixelHeight, pixelLeft, pixelRight, pixelTop,
userLanguage, userProfile, vendor, vendorSub, pixelWidth, posBottom, posHeight, posLeftE,
navigator 39, javaEnabled(), preference(name[, val]) posRight, posTop, posWidth, position, right, top,
width, zIndex.
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
c. Borders & Edges: border, borderBottom, borderLeft, Execução com atraso
borderRight, borderTop, borderBottomColor, window.setTimeout(minhaFuncao, 10); // chama minhaFuncao em 10
borderLeftColor, borderRightColor, borderTopColor, ms
borderBottomStyle, borderLeftStyle,
borderRightStyle, borderTopStyle, borderBottomWidth, Depuração
borderLeftWidth, borderRightWidth, borderTopWidth, console.log("minhaVariavel = " + minhaVariavel);
borderColor, borderStyle, borderWidth, margin,
marginBottom, marginLeft, marginRight, marginTop, Exercício
outline, outlineColor, outlineStyle, outlineOffset, 1º. O que mais gostou e entendeu?
outlineWidth, padding, paddingBottom, paddingLeft, 2º. Crie uma função que receba dois números como
paddingRight, paddingTop. parâmetros e retorne a soma desses números.
3º. Crie uma função que verifique se um número é par
d. Tables: borderCollapse, borderSpacing, captionSide, ou ímpar e retorne true se for par e false se for
emptyCells, tableLayout. ímpar.
4º. Crie uma função que receba uma string como
e. Lists: listStyle, listStyleImage, listStylePosition, parâmetro e retorne o tamanho da string.
listStyleType. 5º. Crie uma função que receba um array de números
como parâmetro e retorne o maior número desse array.
f. Background: background, backgroundAttachment, 6º. Crie uma função que receba um array de números
backgroundColor, backgroundImage, como parâmetro e retorne a média desses números.
gackgroundPosition, backgroundPosition, 7º. Crie uma função que receba um objeto com as
backgroundPosition, backgroundRepeat. propriedades “nome” e “idade” como parâmetro e retorne
uma mensagem de boas-vindas com o nome e a idade da
g. Inline Display & Layout: clear, clip, clipBottom, pessoa.
clipLeft, clipRight, clipTop, content, 8º. Crie uma função que receba um array de objetos
counterIncrement, counterReset, cssFloat, cursor, com as propriedades “nome” e “idade” como parâmetro e
direction, display, filter, layoutGrid, retorne uma mensagem de boas-vindas para cada pessoa do
layoutGridChar, layoutGridLine, layoutGridMode, array.
layoutGridType, markerOffset, marks, maxHeight, 9º. Crie uma função que receba um número como
maxWidth, minHeight, minWidth, MozOpacity, opacity, parâmetro e imprima na tela todos os números de 0 até o
overflow, overflow, overflow, styleFloat, número informado.
verticalAlign, visibility, width, zoom. 10º. Crie uma função que receba um número como
parâmetro e retorne todos os números pares de 0 até o
h. Printing: orphans, widows, page, pageBreakAfter, número informado.
pageBreakBefore, pageBreakInside, size 11º. Crie uma função que receba um array de números
como parâmetro e retorne um novo array com todos os
i. Miscellaneous: accelerator, behavior, cssText, números pares.
imeMode 12º. Crie uma função que receba um número como
parâmetro e retorne o fatorial desse número.
j. Scrollbars: scrollbar3dLightColor, 13º. Crie uma função que receba um número como
scrollbarArrowColor, scrollbarBaseColor, parâmetro e retorne true se esse número for primo e
scrollbarDarkShadowColor, scrollbarFaceColor, false se não for.
scrollbarHighlightColor, scrollbarShadowColor, 14º. Crie uma função que receba um array de números
scrollbarTrackColor. como parâmetro e retorne o segundo maior número desse
array.
15º. Crie uma função que receba um array de objetos
Medindo tempo: para obter o tempo em JavaScript, você com as propriedades “nome” e “idade” como parâmetro e
pode usar o objeto Date() e suas propriedades e retorne o objeto mais velho.
métodos. Aqui estão algumas maneiras de conseguir isso: 16º. Crie uma função que receba um array de números
Tempo = (new Date()).getTime(); // tempo desde 1970 em ms como parâmetro e retorne um novo array com todos os
1. Para obter a data e hora atuais: números múltiplos de 3.
var now = new Date(); 17º. Crie uma função que receba um array de números
var hour = now.getHours(); como parâmetro e retorne a soma desses números elevados
var minute = now.getMinutes(); ao quadrado.
var second = now.getSeconds();
``` 5. Formulário em HTML + JavaScript
Métodos principais (document):
Botão de pressão
a. constructor, prototype, getFullYear(), getYear(),
<input type="button" value="Iniciar" onclick="minhaFuncao();">
getMonth(), getDate(), getDay(), getHours(),
<script>
getMinutes(), getSeconds(), getTime(),
function minhaFuncao() { /* código a ser executado quando o
getMilliseconds(), getUTCFullYear(), getUTCMonth(),
botão é pressionado */ }
getUTCDate(), getUTCDay(), getUTCHours(),
</script>
getUTCMinutes(), getUTCSeconds(),
getUTCMilliseconds(), parse("dateString"),
setYear(val), setFullYear(val), setMonth(val),
setDate(val), setDay(val), setHours(val), Caixa de seleção
setMinutes(val), setSeconds(val), <input type="checkbox" id="minhaCaixa"
setMilliseconds(val), setTime(val), onchange="minhaFuncao();">Label
setUTCFullYear(val), setUTCMonth(val), <script>
setUTCDate(val), setUTCDay(val), setUTCHours(val), var minhaCaixa = document.getElementById("minhaCaixa");
setUTCMinutes(val), setUTCSeconds(val), if (minhaCaixa.checked) { /* código a ser executado se a
setUTCMilliseconds(val), getTimezoneOffset(), caixa estiver marcada */ }
toDateString(), toGMTString(), toLocaleDateString(), </script>
toLocaleString(), toLocaleTimeString(), toString(),
toTimeString(), toUTCString(), UTC(dateValues).
Botões de rádio
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
<input type="radio" id="radio1" name="nomeGrupo">Label1 Desenhe um retângulo
<input type="radio" id="radio2" name="nomeGrupo">Label2 myContext.fillStyle = "verde";
<script> myContext.fillRect(x, y, largura, altura);
var radio1 = document.getElementById("radio1"); Desenhe um círculo myContext .beginPath();
if (radio1.checked) { /* código a ser executado se o primeiro myContext.arc(x, y, r, 0, 2*Math.PI); // use outros ângulos
botão estiver selecionado */ } para arcos
else { /* código a ser executado se o segundo botão estiver myContext.fill(); // ou myContext.stroke() para um círculo
selecionado */ } aberto
</script>
Escreva texto
Menu suspenso myContext.font = "30px sans-serif";
<select id="meuMenu" onchange="minhaFuncao()"> myContext.fillStyle = "#8000ff";
<option>Opção 0</option> myContext.fillText("Olá, Canvas!", x, y); // baseline esquerdo
<option>Opção 1</option> x & y
<option>Opção 2</option>
</select> Especifique cores
<script> Nome de cor BlueViolet (lista completa em
var meuMenu = document.getElementById("meuMenu"); en.wikipedia.org/wiki/Web_colors)
var meuIndice = meuMenu.selectedIndex; // 0, 1, 2, etc. #8000ff hexadecimal rrggbb
</script> rgb(128,0,255) valores 0 a 255
rgba(128,0,255,0.4) com transparência (1,0 é opaco)
Slider com digitação hsl(270,100%,50%) matiz em graus, saturação%, luminosidade%
<input type="range" id="meuSlider" min="0" max="10" step="0.1" hsla(270,100%,50%,0.4) com transparência (1,0 é opaco)
value="5"
onchange="minhaFuncao()" oninput="minhaFuncao()">
Desenhe uma imagem
Valor = <span id="meuCálculo">5.0</span>
myImage = new Image();
<script>
myImage.src = "imageFile.png"; // .jpg e .gif funcionam também
var meuSlider = document.getElementById("meuSlider");
myImage.onload = myFunction; // função a ser chamada quando
var meuCálculo = document.getElementById("meuCálculo");
pronto
var minhaVariável = Number(meuSlider.value);
myContext.drawImage(theImage, x, y); // canto superior
function minhaFuncao() {
esquerdo x & y
meuCálculo.innerHTML = Number(meuSlider.value).toFixed(1);
}
</script> Limpe o canvas
myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
Área de texto
<textarea id="áreaDados" rows="10" style="width:500px;"> Transformações de coordenadas
Conteúdo myContext.translate(dx, dy);
</textarea> myContext.scale(xEscala, yEscala);
<script> myContext.rotate(ânguloEmRadianos);
var áreaDados = document.getElementById("áreaDados"); myContext.setTransform(1, 0, 0, 1, 0, 0); // resetar
áreaDados.innerHTML = "Novo conteúdo";
</script> Criação de imagens pixel por pixel
imagem = myContext.createImageData(myCanvas.width,
Eventos de mouse/toque em um canvas myCanvas.height);
meuCanvas.addEventListener("mousedown", função1, false); for (y=0; y<myCanvas.height; y++) {
document.body.addEventListener("mousemove", função2, false); for (x=0; x<myCanvas.width; x++) {
document.body.addEventListener("mouseup", função3, false); index = (x + y*myCanvas.width) * 4; // índice no array de
// e similarmente para touchstart, touchmove, touchend dados
function função1(e) { // e é um objeto de evento image.data[index] = nívelVermelho; // 0 a 255
e.preventDefault(); // cancelar a resposta do navegador image.data[index+1] = nívelVerde;
xCanvas = e.pageX - meuCanvas.offsetLeft; // localização image.data[index+2] = nívelAzul;
relativa ao image.data[index+3] = transparência; // 255 é opaco
yCanvas = e.pageY - meuCanvas.offsetTop; // canto superior }
esquerdo do canvas }
} // (muitas vezes, o cálculo precisa ser mais complicado) myContext.putImageData(imagem, 0, 0); // exibe a imagem na
tela.
6. Referência de Gráficos do Canvas (2D)
Métodos principais (variável):
Canvas
<canvas id="myCanvas" width="300" height="200"> a. fillStyle, globalAlpha, globalCompositeOperation,
Seu navegador não suporta o elemento canvas; por favor, lineCap, lineJoin, lineWidth, miterLimit,
atualize! shadowBlur, shadowColor, shadowOffsetX,
</canvas> shadowOffsetY, strokeStyle, target, arc(x, y,
<script> radius, start, end, clockwise), arcTo(x1, y1, x2,
var myCanvas = document.getElementById("myCanvas"); y2, radius), bezierCurveTo(cp1x, cp1y, cp2x, cp2y,
var myContext = myCanvas.getContext("2d"); x, y), beginPath(), clearRect(x, y, width, height),
// agora desenhe usando myContext como mostrado abaixo clip(), closePath(), createLinearGradient(x1, y1,
</script> x2, y2), createPattern(img, repetition),
createRadialGradient(x1, y1, radius1, x2, y2,
Desenhe uma linha ou polígono
radius2), drawImage(img, x, y), drawImage(img, x, y,
myContext.beginPath();
width, height), fill(), fillRect(x, y, width,
myContext.moveTo(x1, y1); // y é medida a partir do topo
height), getContext(contextID), lineTo(x, y),
myContext.lineTo(x2, y2); // coordenadas pode ser decimal
moveTo(x, y), quadraticCurveTo(cpx, cpy, x, y),
myContext.lineTo(x3, y3); // adicione mais segmentos
rect(x, y, width, height), restore(), rotate(angle),
myContext.strokeStyle = "azul";
save(), scale(x, y), stroke(), strokeRect(x, y,
myContext.lineWidth = 2;
width, height), translate(x, y)
myContext.stroke();
myContext.fillStyle = "amarelo";
myContext.fill(); // preencha o polígono
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
7. PHP e MySQL Atualização de registros:
Para atualizar registros já existentes em uma tabela do MySQL,
Noções básicas de MySQL: bancos de dados, tabelas e
utilizamos a cláusula UPDATE seguida do nome da tabela e dos
consultas SQL;
novos valores. Também é necessário especificar uma condição
MySQL é um sistema gerenciador de banco de dados relacional
utilizando a cláusula WHERE. Por exemplo:
que permite armazenar e manipular dados de forma eficiente.
Nesta seção, você aprenderá as noções básicas de MySQL.
```
UPDATE clientes SET idade = 26 WHERE nome = 'João';
1. Bancos de dados:
```
Um banco de dados é um conjunto de informações organizadas que
podem ser acessadas, gerenciadas e atualizadas de forma fácil
Exclusão de registros:
e eficiente. No MySQL, você pode criar, modificar e excluir
bancos de dados usando a sintaxe:
Para excluir registros de uma tabela no MySQL, utilizamos a
cláusula DELETE FROM seguida do nome da tabela e da condição
CREATE DATABASE nome_do_banco;
que deve ser satisfeita. Por exemplo:
ALTER DATABASE nome_do_banco;
DROP DATABASE nome_do_banco;
```
DELETE FROM clientes WHERE nome = 'João';
2. Tabelas:
As tabelas são a estrutura fundamental em um banco de dados e ```
armazenam conjuntos de dados relacionados. Elas contêm as
colunas que especificam os campos de dados e as linhas que
representam as entradas de dados. No MySQL, você pode criar, Chaves primárias, estrangeiras e índices em MySQL
modificar e excluir tabelas usando a sintaxe: Uso de chaves para garantir a integridade dos dados e melhorar
o desempenho;
CREATE TABLE nome_da_tabela (nome_da_coluna tipo_de_dado 1. Chaves Primárias:
[restricões], ...); - A chave primária é usada para identificar unicamente uma
ALTER TABLE nome_da_tabela ADD COLUMN nome_da_coluna linha em uma tabela.
tipo_de_dado [restricões]; - Ela não pode ser duplicada ou nula.
ALTER TABLE nome_da_tabela DROP COLUMN nome_da_coluna; - É definida ao criar uma tabela, usando a cláusula "PRIMARY
DROP TABLE nome_da_tabela; KEY".
3. Consultas SQL: Exemplo:
As consultas SQL permitem recuperar e manipular dados em um CREATE TABLE usuarios (
banco de dados relacional. Com as consultas SQL do MySQL, é id INT(11) NOT NULL PRIMARY KEY,
possível selecionar, inserir, atualizar e excluir dados de nome VARCHAR(50) NOT NULL,
tabelas e bancos de dados. A seguir, são apresentadas algumas email VARCHAR(50) NOT NULL
das principais consultas SQL do MySQL: );
SELECT campo1, campo 2, ... FROM nome_da_tabela WHERE 2. Chaves estrangeiras:
condição; - Uma chave estrangeira é usada para garantir a integridade
INSERT INTO nome_da_tabela (campo1, campo 2, ...) VALUES referencial entre duas tabelas.
(valor1, valor2, ...); - Ela vincula uma tabela a outra, usando uma coluna comum.
UPDATE nome_da_tabela SET campo = valor WHERE condição; - É definida ao criar uma tabela, usando a cláusula "FOREIGN
DELETE FROM nome_da_tabela WHERE condição; KEY".
Esses são apenas alguns dos comandos básicos do MySQL. Existem Exemplo:
muitos outros comandos avançados e técnicas para otimizar o CREATE TABLE pedidos (
desempenho do MySQL. Estudar a documentação oficial do MySQL id INT(11) NOT NULL PRIMARY KEY,
pode ser uma boa ideia para obter mais conhecimento. id_usuario INT(11) NOT NULL,
valor_total DECIMAL(10,2) NOT NULL,
FOREIGN KEY (id_usuario) REFERENCES usuarios(id)
);
Consultas SQL em MySQL: seleção, inserção, atualização
e exclusão de registros;
3. Índices:
Seleção de registros:
- Um índice é usado para melhorar o desempenho em consultas em
uma tabela.
Para selecionar registros de uma tabela no MySQL, utilizamos a
- Ele permite que o banco de dados encontre dados mais
cláusula SELECT seguida dos campos que desejamos buscar, e no
rapidamente.
final a tabela em si. Pode-se utilizar o caractere * para
- Pode ser definido em uma ou mais colunas de uma tabela,
selecionar todos os campos da tabela. Por exemplo:
usando a cláusula "INDEX".
```
SELECT campo_1, campo_2, campo_3 FROM tabela;
Exemplo:
```
CREATE TABLE produtos (
Também é possível filtrar os resultados utilizando a cláusula
id INT(11) NOT NULL PRIMARY KEY,
WHERE, que especifica uma condição que deve ser satisfeita
categoria_id INT(11) NOT NULL,
pelos registros retornados. Por exemplo:
nome VARCHAR(50) NOT NULL,
preco DECIMAL(10,2) NOT NULL,
```
INDEX(categoria_id)
SELECT nome, idade FROM clientes WHERE idade >= 18;
``` );
Inserção de registros: Para inserir registros em uma tabela do Observação: É importante lembrar que o uso adequado de chaves
MySQL, utilizamos a cláusula INSERT INTO seguida do nome da primárias, estrangeiras e índices pode melhorar
tabela e dos valores a serem inseridos. Por exemplo: significativamente o desempenho e a integridade dos dados em
``` um banco de dados MySQL. Portanto, é recomendável sempre
INSERT INTO clientes (nome, idade) VALUES ('João', 25); utilizá-los de forma adequada e consistente.
```
Para atribuir permissões ao usuário, pode-se utilizar o
Triggers e Stored Procedures em MySQL comando abaixo:
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Triggers e Stored Procedures são recursos avançados oferecidos
pelo banco de dados MySQL, são rotinas que executam ```
automaticamente em resposta a eventos no banco de dados. Eles GRANT [permissão] ON [nome_do_banco].[nome_da_tabela] TO
são úteis para automatizar algumas tarefas e otimizar o 'nome_de_usuario'@'host';
desempenho do sistema quando a complexidade dos dados aumenta ```
e as necessidades aumentam.
Por exemplo, se deseja-se permitir que o usuário "joao" tenha
Triggers: acesso somente à tabela "clientes", pode-se utilizar o
seguinte comando:
Os Triggers permitem que os desenvolvedores criem uma rotina
que executará automaticamente em resposta a eventos no banco ```
de dados. Os eventos podem incluir operações como INSERT, GRANT SELECT, INSERT, UPDATE, DELETE ON
UPDATE ou DELETE de tabela. Os Triggers podem ser usados para banco_de_dados.clientes TO 'joao'@'127.0.0.1';
uma série de tarefas, incluindo validação de dados, geração de ```
logs de atividades ou atualizações de outras tabelas.
2. Criptografia de senhas no MySQL:
Exemplo:
Uma forma de proteger as senhas armazenadas no MySQL é
Suponha que você tenha uma tabela de compras e deseja utilizar o recurso de criptografia. Uma forma comum é utilizar
automaticamente atualizar a tabela de estoque sempre que uma a função "PASSWORD" do MySQL, que transforma a senha em um
nova compra for adicionada. Você pode criar um Trigger que hash criptografado. O exemplo abaixo mostra como criar um
atualize a tabela de estoque sempre que uma nova linha for usuário com a senha criptografada:
adicionada à tabela de compras.
```
CREATE TRIGGER update_stock CREATE USER 'meu_usuario'@'localhost' IDENTIFIED BY PASSWORD
AFTER INSERT ON purchases 'senha_criptografada';
FOR EACH ROW ```
BEGIN
UPDATE stock SET quantity = quantity - NEW.quantity WHERE Para gerar a senha criptografada, pode-se utilizar a seguinte
product_id=NEW.product_id; consulta:
END;
```
Com isso, sempre que uma nova compra for inserida, o Trigger SELECT PASSWORD('minha_senha');
será acionado e o estoque será atualizado de acordo. ```
Stored Procedures: 3. Proteção contra ataques comuns no MySQL:
As Stored Procedures são rotinas que são armazenadas no banco Algumas práticas que podem ajudar a proteger o MySQL contra
de dados e podem ser chamadas por outro programa ou pelo ataques comuns incluem:
próprio banco de dados. As Stored Procedures permitem criar
sequências de código complexas que podem ser chamadas várias - Utilizar senhas fortes e criptografadas;
vezes sem ter que escrever código repetitivo. - Limitar o acesso ao MySQL apenas a usuários com as
permissões necessárias;
Exemplo: - Utilizar uma conexão segura (SSL) para acessar o MySQL;
- Manter o MySQL atualizado para corrigir possíveis
Suponha que você tenha uma tabela de funcionários e deseja vulnerabilidades;
criar uma rotina que gere relatórios de funcionários ordenados - Utilizar um firewall para bloquear o acesso não autorizado
por departamento. Você pode criar uma Stored Procedure que ao MySQL;
retorne uma lista de funcionários ordenada por departamento. - Configurar corretamente as permissões de arquivos e pastas
relacionados ao MySQL;
DELIMITER // - Fazer backups regulares do banco de dados para recuperar
CREATE PROCEDURE employee_report() informações em caso de perda de dados.
BEGIN
SELECT * FROM employees ORDER BY department; Introdução ao PHP
END // PHP é uma linguagem de programação que é executada no lado do
servidor para gerar conteúdo dinâmico em páginas da web, ou
Com isso, sempre que você precisar chamar a lista de seja, pôr o teu programa no ar. É gratuito e de código aberto,
funcionários, basta chamar a Stored Procedure criada. e oferece suporte para muitas plataformas.
Esses são apenas alguns exemplos dos poderosos recursos que o Para começar a trabalhar com PHP, é necessário ter um ambiente
MySQL oferece. Triggers e Stored Procedures podem ser usados de desenvolvimento instalado em seu computador. Para isso,
juntos ou separadamente para criar soluções personalizadas recomenda-se utilizar o XAMPP (para Windows, Mac ou Linux),
para um banco de dados complexo. Eles podem economizar tempo e que já inclui o PHP, o servidor web Apache e o banco de dados
ajudar a garantir a integridade dos dados. MySQL.
Para fazer um "olá mundo" com PHP, basta criar um arquivo
chamado index.php dentro da pasta do servidor web (geralmente
Segurança do MySQL htdocs no XAMPP). Dentro deste arquivo, insira o seguinte
1. Gerenciamento de usuários e permissões no MySQL: código:
```php
O MySQL permite o gerenciamento de usuários e permissões de <!DOCTYPE html>
forma detalhada. Para criar um novo usuário, pode-se utilizar <html>
o comando abaixo: <head><title>Olá mundo</title></head>
<body>
``` <?php
CREATE USER 'nome_de_usuario'@'host' IDENTIFIED BY 'senha'; echo "Olá mundo!";
``` ?>
</body>
</html>
```
```php
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Este código irá exibir a mensagem "Olá mundo!" na página web, <?php
utilizando o comando `echo` do PHP para escolher o texto que if ($_SERVER['REQUEST_METHOD'] == 'POST') {
deve ser exibido. $nome = $_POST['nome'];
$email = $_POST['email'];
Para visualizar a página, basta acessar o endereço $mensagem = $_POST['mensagem'];
http://localhost/index.php no navegador web. }
?>
Noções básicas: sintaxe, variáveis, operadores e
estruturas de controle. <form method="post" action="">
a. Sintaxe: para usar o PHP, é necessário ter um <label for="nome">Nome:</label>
servidor web instalado e configurado para executar <input id="nome" type="text" name="nome" />
arquivos PHP. Os arquivos PHP têm a extensão ".php"
e devem ter código PHP delimitado por tags <?php e <label for="email">E-mail:</label>
?>. <input id="email" type="email" name="email" />
b. Variáveis: Uma variável é um espaço de armazenamento
na memória que pode conter um valor. No PHP, ele é <label for="mensagem">Mensagem:</label>
criado usando o sinal de dólar ($) seguido pelo nome <textarea id="mensagem" name="mensagem"></textarea>
da variável e o valor atribuído a ele. Exemplo:
$nome = "João". <input type="submit" name="enviar" value="Enviar" />
c. Operadores: O PHP suporta muitos operadores, </form>
incluindo aritmética, atribuição, comparação, lógica ```
e outros. Exemplos:
- Aritmética: +, -, *, /, % Validação de entradas do usuário em PHP:
- Atribuição: =, +=, -=, *=, /=, %=
- Comparação: ==, !=, <, >, <=, >= Para garantir que as entradas do usuário sejam válidas, você
- Lógica: &&, ||, ! pode usar uma variedade de funções e técnicas de validação em
PHP. Algumas das funções de validação mais comuns incluem
d. Estruturas de controle: O PHP suporta estruturas de filter_var, ctype, preg_match, entre outros.
controle como if / else, while, for, foreach e
switch. Exemplo: Exemplo de validação de um e-mail com a função filter_var em
PHP:
<?php
// declaração de variáveis ```php
$idade = 25; <?php
$nome = "João"; if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$email = $_POST['email'];
// condição if / else if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if ($idade > 18) { echo "E-mail válido";
echo "$nome é maior de idade"; } else {
} else { echo "E-mail inválido";
echo "$nome é menor de idade"; }
} }
?>
// loop for
for ($i = 0; $i < 10; $i++) { <form method="post" action="">
echo $i; <label for="email">E-mail:</label>
} <input id="email" type="email" name="email" />
// loop foreach (em arrays) <input type="submit" name="enviar" value="Enviar" />
$frutas = array("maçã", "banana", "laranja"); </form>
foreach ($frutas as $fruta) { ```
echo $fruta;
} Neste exemplo, a função filter_var é usada para validar o
formato do e-mail inserido pelo usuário. Se o e-mail for
// switch case válido, a mensagem "E-mail válido" será exibida, caso
$dia = "sexta"; contrário, a mensagem "E-mail inválido" será exibida.
switch ($dia) {
case "segunda":
echo "Hoje é segunda-feira"; Processamento de arquivos em PHP
break; 1. Upload de arquivos em PHP:
case "terça":
echo "Hoje é terça-feira"; A função responsável por receber os arquivos enviados através
break; do formulário HTML é $_FILES.
// mais casos Esta variável é um array que contém informações sobre os
default: arquivos enviados, incluindo o nome temporário, o nome
echo "Hoje é outro dia"; original, tipo, tamanho e localização temporária do arquivo.
} Para salvar o arquivo no servidor, podemos usar a função
move_uploaded_file(), que recebe o nome temporário do arquivo
?> e o caminho para onde o arquivo deve ser movido.
//Exemplo de upload de arquivo em PHP
Manipulação de formulários em PHP <form action="upload.php" method="post"
Captura de dados de formulários HTML em PHP: enctype="multipart/form-data">
<input type="file" name="arquivo">
Para capturar os dados de um formulário HTML em PHP, você <input type="submit" value="Enviar">
pode usar a variável superglobal $_POST ou $_GET. A escolha </form>
depende do método de envio do formulário - se o método de
envio for POST, use $_POST e se for GET, use $_GET.
Exemplo de captura de dados de um formulário HTML com o
método POST em PHP:
<?php
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
if(isset($_FILES['arquivo'])){ 2. Inserindo dados em uma tabela:
$nome = $_FILES['arquivo']['name'];
$temp = $_FILES['arquivo']['tmp_name']; ```
move_uploaded_file($temp, "uploads/".$nome); $sql = "INSERT INTO users (name, email) VALUES ('John Doe',
echo "Upload realizado com sucesso!"; '[email protected]')";
} $result = mysqli_query($conn, $sql);
?> ```
2. Leitura e gravação de arquivos em PHP: 3. Exibindo dados de uma tabela:
Em PHP, a função fopen() é usada para abrir um arquivo e ```
retornar um ponteiro para a posição de início do arquivo. $sql = "SELECT id, name, email FROM users";
As opções de leitura incluem “r” (leitura), “w” (escrita), “a” $result = mysqli_query($conn, $sql);
(adição de conteúdo no final do arquivo) e “x” (apenas cria um
novo arquivo). if (mysqli_num_rows($result) > 0) {
Para ler o conteúdo de um arquivo, podemos usar a função // output data of each row
fread(), que lê uma quantidade específica de bytes do arquivo. while($row = mysqli_fetch_assoc($result)) {
Já a função fwrite() permite escrever no arquivo. echo "id: " . $row["id"]. " - Name: " . $row["name"].
Para fechar o arquivo após o uso, podemos usar fclose(). " - Email: " . $row["email"]. "<br>";
}
//Exemplo de leitura de arquivo em PHP } else {
$file = fopen("texto.txt", "r"); echo "0 results";
echo fread($file, filesize("texto.txt")); }
fclose($file); ```
//Exemplo de gravação de arquivo em PHP 4. Atualizando dados em uma tabela:
$file = fopen("texto.txt", "w");
$txt = "Olá, mundo!"; ```
fwrite($file, $txt); $sql = "UPDATE users SET name='Jane Doe' WHERE id=1";
fclose($file); $result = mysqli_query($conn, $sql);
```
Conexão de bancos de dados em PHP
Conexão de Bancos de Dados em PHP 5. Excluindo dados em uma tabela:
```
Configuração de conexão de banco de dados: $sql = "DELETE FROM users WHERE id=1";
Para se conectar a um banco de dados em PHP, é necessário $result = mysqli_query($conn, $sql);
primeiro especificar as informações do banco de dados como ```
host, nome do banco de dados, nome de usuário e senha.
Geralmente, as informações de conexão são armazenadas em um Autenticação e autorização em PHP
arquivo de configuração separado para facilitar a manutenção. Início da sessão do usuário:
O seguinte código PHP pode ser usado para se conectar a um session_start();
banco de dados MySQL e selecionar um banco de dados
específico: Criação da sessão do usuário após a validação de login:
``` $_SESSION['user_id'] = $user_id;
<?php
$servername = "localhost"; Validação de login:
$username = "root";
$password = ""; if ($entered_username == $stored_username && $entered_password
$dbname = "myDB"; == $stored_password) {
$is_valid_login = true;
// Create connection }
$conn = mysqli_connect($servername, $username, $password,
$dbname); Verificação da sessão do usuário:
// Check connection if (isset($_SESSION['user_id'])) {
if (!$conn) { // usuário está logado
die("Connection failed: " . mysqli_connect_error()); } else {
} // usuário não está logado
echo "Connected successfully"; }
?>
``` Gerenciamento de sessão:
Operações CRUD básicas usando SQL: // Configurando o tempo de expiração da sessão para 30 minutos
As operações CRUD (Create, Read, Update, Delete) são as ini_set('session.gc_maxlifetime', 1800);
operações básicas em um banco de dados. Aqui estão alguns session_set_cookie_params(1800);
exemplos de como executar essas operações usando SQL em PHP: session_start();
1. Criando uma tabela: // Destruir a sessão quando o usuário fizer logout
session_destroy();
```
$sql = "CREATE TABLE users ( // Destruir a sessão após um período de inatividade
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, if (isset($_SESSION['LAST_ACTIVITY']) && (time() -
name VARCHAR(30) NOT NULL, $_SESSION['LAST_ACTIVITY'] > 1800)) {
email VARCHAR(50), session_unset();
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE session_destroy();
CURRENT_TIMESTAMP }
)"; $_SESSION['LAST_ACTIVITY'] = time(); // atualiza o horário da
``` última atividade
Segurança do aplicativo da Web:
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
8. Git e GitHUb
1. Filtre e valide todas as entradas de usuário. Introdução ao Git
Conceitos básicos
$filtered_input = filter_input(INPUT_POST, 'user_input', - Git é um sistema distribuído de controle de versão, que
FILTER_SANITIZE_STRING); permite gerenciar o histórico de alterações em arquivos e
projetos.
2. Use uma conexão segura para o banco de dados. - Ele utiliza um modelo de rastreamento de alterações chamado
"commits", que são snapshots do estado atual dos arquivos.
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, - Os commits possuem mensagens que descrevem as alterações
PDO::MYSQL_ATTR_SSL_VERIFY_SERVER_CERT => false); realizadas.
- O Git permite criar diferentes branches (ramificações) para
3. Armazene senhas de forma segura usando funções de hash e trabalhar em diferentes features ou versões do projeto.
sal. - Há um repositório central e diversos repositórios locais,
que podem ser sincronizados entre si.
$hashed_password = password_hash($plain_text_password,
PASSWORD_DEFAULT); Instalação e configuração do ambiente de trabalho
- O Git pode ser instalado em diferentes sistemas
4. Proteja-se contra ataques de injeção de SQL. operacionais, como Windows, MacOS ou Linux.
- Para instalar o Git, basta acessar o site oficial e seguir
$stmt = $pdo->prepare("SELECT * FROM users WHERE username = as instruções para o seu sistema operacional.
:username"); - É necessário configurar o Git informando o nome do usuário e
$stmt->bindParam(':username', $username); o email utilizado nas alterações.
$stmt->execute(); - É recomendável também definir algumas opções, como a forma
$user = $stmt->fetch(PDO::FETCH_ASSOC); de exibição das mensagens de log.
- Para configurar o Git, basta utilizar o comando "git config"
5. Proteja-se contra ataques XSS. seguido das opções desejadas.
echo htmlentities($user_input, ENT_QUOTES, 'UTF-8'); Exemplos completos
- Para criar um novo repositório Git, basta criar uma nova
6. Use uma biblioteca de autenticação bem testada para lidar pasta e executar o comando "git init", que criará uma
com a autenticação e autorização. estrutura básica no local.
- Para adicionar arquivos ao controle de versão, basta
use Delight\Auth\Auth; utilizar o comando "git add nome-do-arquivo", que adicionará o
$auth = new Auth($pdo); arquivo à próxima commit.
- Para realizar um commit, basta utilizar o comando "git
commit -m "mensagem do commit"", que criará um snapshot com as
Exercício alterações realizadas e a descrição da mensagem.
1º. O que mais gostou e entendeu? - Para criar uma nova branch, basta utilizar o comando "git
2º. Crie um formulário em PHP com campos para nome, e-mail, branch nome-da-branch", que criará uma nova ramificação do
senha e botão para enviar os dados; projeto.
3º. Crie uma página em PHP que exiba a tabela de - Para alternar entre diferentes branches, basta utilizar o
multiplicação de um número informado pelo usuário; comando "git checkout nome-da-branch", que mudará o workspace
4º. Faça um programa PHP para calcular a área e o perímetro para a branch desejada.
de um retângulo, com base nas medidas informadas pelo - Para sincronizar os repositórios locais e o repositório
usuário; remoto, é possível utilizar comandos como "git push", "git
5º. Crie uma função em PHP para verificar se uma string é pull" ou "git fetch".
palíndromo (ou seja, pode ser lida da mesma forma de trás
para frente); Comandos Git básicos
6º. Crie uma página PHP que exiba um calendário com os dias ## Comandos Git básicos
do mês atual destacando o dia atual;
7º. Implemente uma função em PHP para calcular a média ### Iniciação de repositórios
aritmética de um array de números; - Para iniciar um novo repositório Git na pasta atual, use o
8º. Crie uma página em PHP que liste os arquivos de um comando `git init`.
diretório e permita o download dos mesmos;
9º. Faça um programa em PHP para validar CPF, com base no ### Clonagem
cálculo do dígito verificador; - Para clonar um repositório existente, use o comando `git
10º. Implemente uma função em PHP para converter um valor em clone <url_do_repositório>`.
real para dólar, utilizando a cotação informada;
11º. Crie um formulário em PHP que permita o cadastro de ### Adição de arquivos
usuários em um banco de dados MySQL; - Para adicionar arquivos novos ou modificados ao próximo
12º. Faça uma página PHP que exiba um gráfico de pizza com commit, use o comando `git add <nome_do_arquivo>` ou `git add
as vendas de diferentes produtos em um período de tempo; .` para adicionar todos os arquivos modificados na pasta
13º. Crie um programa PHP para gerar um código de barra a atual.
partir de um número digitado pelo usuário;
14º. Implemente uma função em PHP para calcular a distância ### Remoção de arquivos
entre dois pontos em um mapa, com base nas coordenadas - Para remover um arquivo do versionamento do Git, use o
informadas; comando `git rm <nome_do_arquivo>`.
15º. Crie uma página em PHP que exiba o clima atual de uma
cidade, utilizando uma API de previsão do tempo; ### Commits
16º. Faça um programa PHP para verificar se um e-mail é - Para criar um novo commit com as alterações adicionadas, use
válido, utilizando expressões regulares; o comando `git commit -m "<mensagem_do_commit>"`.
17º. Implemente uma função em PHP para ordenar um array de - Para visualizar os commits existentes no repositório, use o
strings em ordem alfabética crescente. comando `git log`.
Branches em Git
O uso de branches em Git é comum em equipes que desejam
trabalhar em paralelo em diferentes recursos ou até mesmo em
diferentes versões de um projeto. Isso permite que o
desenvolvimento ocorra de forma mais organizada e eficiente.
Nesta aula, você aprenderá como criar e gerenciar branches em
Git.
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Criando um branch Agora, execute o comando `git merge` seguido do nome do branch
que você deseja mesclar no branch atual (no exemplo a seguir,
Para criar um novo branch em Git, use o comando `git branch` o branch `bugfix`):
seguido do nome do novo branch.
```
``` $ git merge bugfix
$ git branch feature-novo-recurso ```
```
O comando `git merge` irá combinar as alterações do branch
Esse comando criará um novo branch com o nome `feature-novo- `bugfix` no branch atual.
recurso`. No entanto, como você ainda não alternou para este
novo branch, seu repositório ainda está na branch padrão - Conclusão
geralmente é a 'master'.
Nesta aula, você aprendeu como criar, alternar e excluir
Alternando para um branch branchs em Git, bem como mesclar duas alterações em branchs
diferentes. O uso desses recursos pode ajudar a tornar o
Para alternar para um branch existente, use o comando `git gerenciamento de projeto mais eficiente, especialmente em
checkout` seguido do nome do branch. equipes com várias pessoas trabalhando em conjunto.
```
$ git checkout feature-novo-recurso Fusão de branches em Git
``` A mesclagem de branches em Git é um processo muito importante
para trabalhar com desenvolvimento em equipe. Nesse processo,
Agora, você está no branch `feature-novo-recurso`. Qualquer diferentes branches que contêm alterações de código são unidos
alteração que você fizer no código agora será separada do em um branch principal para criar uma nova versão do código.
código na branch padrão.
Existem três tipos de mesclagem que podem ser usados em Git: a
Criando e alternando para um branch de uma vez só mesclagem padrão ou "merge", a mesclagem rápida ou "fast-
forward" e a mesclagem recursiva. Cada um tem seu próprio uso,
Em vez de criar um branch separado e, em seguida, alternar dependendo do cenário.
para ele, você pode usar o comando `git checkout` com a opção
`-b` para criar e alternar para um novo branch ao mesmo tempo. Vamos ver cada um deles em ação:
``` 1. Mesclagem padrão:
$ git checkout -b feature-novo-recurso
``` A mesclagem padrão é o tipo mais comum de mesclagem de
branches. É usada para unir duas branches que contêm
Este comando cria o novo branch `feature-novo-recurso` e o alterações de código diferentes. Para mesclar duas branches
seleciona em um único comando. usando a mesclagem padrão, siga os seguintes passos:
Listando todos os branches disponíveis ```
// navegue até a branch que você deseja mesclar no branch
Para listar todos os branches disponíveis em um repositório principal (normalmente é a branch de desenvolvimento)
Git, use o comando `git branch` sem argumentos. git checkout develop
``` // mesclar a branch feature para a branch principal
$ git branch git merge feature
``` ```
Este comando lista todos os branches disponíveis no seu 2. Mesclagem rápida (fast-forward):
repositório local. O branch atual tem um asterisco ao lado do
nome. A mesclagem rápida é usada quando a branch secundária não teve
alterações enquanto estava separada do branch principal. Isso
Deletando um branch ocorre quando o branch secundário foi criado a partir do
branch principal, e nenhuma alteração foi feita no branch
Para excluir um branch existente, use o comando `git branch - principal desde então. Para mesclar uma branch usando a
D` seguido do nome do branch. mesclagem rápida, execute o seguinte comando:
``` ```
$ git branch -D feature-novo-recurso // navegue até a branch que você deseja mesclar no branch
``` principal (normalmente é a branch de desenvolvimento)
git checkout develop
Este comando irá excluir o branch `feature-novo-recurso`.
Certifique-se de alternar para outro branch primeiro se você // mesclar a branch feature usando a mesclagem rápida
não quiser perder o código que está no branch que está sendo git merge --ff-only feature
excluído. ```
Mesclando dois branches 3. Mesclagem recursiva: a mesclagem recursiva é usada quando a
branch secundária teve alterações enquanto estava separada do
Às vezes, você deseja mesclar as mudanças de um branch em branch principal, mas as alterações não podem ser mescladas
outro. Por exemplo, se você tem um branch de correção de bugs automaticamente. Nesse caso, o Git tentará mesclar as
que deve ser mesclado com o branch principal. Para mesclar as alterações manualmente. Para mesclar uma branch usando a
alterações do branch de correção de bugs em seu branch mesclagem recursiva, execute o seguinte comando:
principal, use o comando `git merge`. ```
Primeiro, você deve alternar para o branch que será o // navegue até a branch que você deseja mesclar no branch
destinatário da mesclagem. O exemplo a seguir assume que você principal (normalmente é a branch de desenvolvimento)
deseja mesclar o branch de correção de bugs no branch git checkout develop
principal:
``` // mesclar a branch feature usando a mesclagem recursiva
$ git checkout master git merge --no-ff feature
``` ```
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Por fim, é importante lembrar que a mesclagem de branches pode Introdução ao GitHub
ser uma tarefa complicada, especialmente quando há múltiplos Introdução ao GitHub: plataformas de hospedagem de
desenvolvedores trabalhando em diferentes áreas do código. É repositórios Git, criação de conta e repositório;
importante fazer uma boa gestão de projetos e estabelecer
processos claros de desenvolvimento para minimizar a 1. O que é o GitHub?
ocorrência de conflitos e erros no código. O GitHub é uma plataforma de hospedagem de repositórios Git,
onde você pode compartilhar seus projetos, colaborar com
outras pessoas, controlar versões e muito mais.
Gerenciamento de conflitos em Git
1. Verifique o status do seu branch atual: 2. Como criar uma conta no GitHub?
Para criar uma conta no GitHub, siga os seguintes passos:
``` - Acesse o site do GitHub e clique em “Sign up” (ou
git status “Registrar-se”);
``` - Preencha o formulário com seus dados;
- Verifique seu endereço de e-mail;
2. Mude para o branch que você deseja mesclar: - Sua conta será criada.
``` 3. Como criar um repositório no GitHub?
git checkout branch-que-sera-mesclado Para criar um repositório no GitHub, siga os seguintes passos:
``` - Faça login na sua conta do GitHub;
- Clique em “New repository” (ou “Novo repositório”);
3. Mescle os dois branches: - Dê um nome ao seu repositório;
- Escolha se o repositório será público ou privado;
``` - Clique em “Create repository” (ou “Criar repositório”).
git merge seu-branch-atual
``` 4. Como clonar um repositório do GitHub?
Para clonar um repositório do GitHub, siga os seguintes
4. Se houver conflitos, uma mensagem de erro será exibida, passos:
informando quais arquivos conflitantes precisam ser - Acesse o repositório que você quer clonar;
resolvidos. - Clique em “Clone or download” (ou “Clonar ou baixar”);
- Copie o link do repositório;
5. Abra os arquivos conflitantes no editor de texto e localize - Abra o terminal e digite “git clone” seguido do link do
as seções com conflitos. Eles serão marcados com <<<<<<<, repositório;
======= e >>>>>>>. - O repositório será clonado para a sua máquina.
6. Resolva os conflitos editando as seções conflitantes para 5. Como adicionar arquivos a um repositório no GitHub?
que o arquivo fique como você deseja. Para adicionar arquivos a um repositório no GitHub, siga os
seguintes passos:
7. Depois de editar o arquivo, adicione-o aos arquivos - Adicione os arquivos à pasta do repositório na sua máquina;
confirmados: - Abra o terminal e navegue até o diretório do repositório;
- Digite “git add .” para adicionar todos os arquivos ao
``` stage;
git add arquivo - Digite “git commit -m ‘Mensagem de commit’” para realizar o
``` commit com uma mensagem;
- Digite “git push” para enviar as alterações para o
8. Comite as alterações: repositório no GitHub.
``` 6. Como colaborar em um projeto no GitHub?
git commit -m "Resolvido o conflito em arquivo" Para colaborar em um projeto no GitHub, siga os seguintes
``` passos:
- Faça um fork do repositório;
9. Retorne para seu branch original: - Clone o repositório para a sua máquina;
- Faça as alterações que deseja;
``` - Realize o commit e o push das alterações para o seu fork;
git checkout seu-branch-atual - Crie um pull request para enviar as alterações para o
``` repositório original;
- Aguarde a aprovação do proprietário do repositório.
10. Mescle o branch que você modificou:
Com essas informações básicas, você está pronto para começar a
``` explorar o mundo do GitHub e suas infinitas possibilidades de
git merge branch-que-sera-mesclado colaboração e compartilhamento de conhecimento.
```
11. Certifique-se de que o branch mesclado foi removido: Trabalho colaborativo em GitHub
Trabalho colaborativo em GitHub
``` --------------------------------
git branch -d branch-que-sera-mesclado
``` O GitHub é um serviço de hospedagem de projetos que utiliza o
sistema de controle de versão Git. Ele é amplamente utilizado
12. Agora o branch mesclado está completo! para o desenvolvimento colaborativo de software, permitindo o
compartilhamento de código, o gerenciamento de bugs e a
colaboração em equipes.
Este cheat sheet apresenta algumas dicas e exemplos
relacionados ao trabalho colaborativo em GitHub, incluindo a
adição de colaboradores, o controle de acesso e o
gerenciamento de pull requests.
Adicionando colaboradores
-------------------------
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
Para adicionar um colaborador a um projeto no GitHub, siga os Gerenciamento de problemas em GitHub
seguintes passos: Criação de problemas:
1. Acesse o repositório do GitHub onde deseja criar o
1. Clique no botão "Settings" na página principal do problema.
repositório. 2. Clique no botão "Issues" na barra de navegação.
2. Clique na aba "Collaborators". 3. Clique em "New Issue".
3. Digite o nome de usuário do colaborador que deseja 4. Preencha o título do problema e escreva uma descrição
adicionar e clique em "Add collaborator". detalhada.
4. O colaborador receberá um convite por e-mail para acessar o 5. Atribua as tags apropriadas para categorizar o problema.
projeto. 6. Clique em "Submit new issue" para criar o problema.
Controle de acesso Gerenciamento de problemas:
------------------ 1. Acesse a lista de problemas do repositório.
2. Pesquise o problema que deseja gerenciar e clique nele para
O GitHub oferece alguns níveis de permissão para abri-lo.
colaboradores, que podem ser personalizados de acordo com as 3. Revise a descrição e os comentários para entender o
necessidades do projeto. Estes níveis de permissão são: problema.
4. Comente na seção de comentários para fornecer atualizações
- Owner: O dono do projeto, que tem acesso total a todas as ou esclarecimentos.
operações. 5. Adicione outros usuários relevantes ao problema usando o
- Admin: Usuários que podem gerenciar a equipe e as "@username".
configurações do projeto, mas não têm acesso total a todas as 6. Atribua o problema a um membro da equipe responsável pelo
operações. trabalho.
- Write: Usuários que podem realizar operações de gravação no 7. Defina uma data ou versão de entrega para o problema.
repositório, como empurrar e puxar alterações. 8. Monitore o status do problema conforme o trabalho
- Triage: Usuários que podem gerenciar problemas e pull progredir.
requests, mas não têm acesso total ao repositório.
- Read: Usuários que têm acesso somente para leitura ao Fechamento de problemas:
repositório. 1. Acesse o problema que deseja fechar.
2. Realize um controle de qualidade do trabalho efetuado.
Para alterar as permissões de um colaborador, siga os 3. Confirme que o problema foi resolvido e pode ser fechado.
seguintes passos: 4. Clique no botão "Close issue" na parte superior do
problema.
1. Clique no botão "Settings" na página principal do 5. Na janela de confirmação, adicione um comentário opcional
repositório. para explicar o motivo do fechamento.
2. Clique na aba "Collaborators". 6. Clique em "Close issue" para fechar o problema.
3. Encontre o colaborador cujas permissões você deseja alterar
e clique no botão "Settings". Automatização de tarefas em GitHub
4. Selecione o nível de permissão desejado e clique em "Save". GitHub Actions é uma ferramenta poderosa que permite
automatizar ações dentro do repositório GitHub. Esta
Gerenciamento de pull requests ferramenta pode ser usada para automatizar tarefas de teste,
------------------------------ construção e implantação de projetos.
Quando um colaborador deseja contribuir com um projeto no Aqui está um exemplo completo de como usar o GitHub Actions:
GitHub, ele geralmente faz isso através do envio de um pull
request. Este processo envolve a criação de um fork do 1. Crie um arquivo .yml em .github/workflows/ no seu
projeto, o desenvolvimento de alterações em sua própria cópia repositório. Este arquivo contém instruções para o GitHub
do projeto e, em seguida, o envio de uma solicitação para Actions sobre como automatizar suas tarefas. Por exemplo, você
incorporar essas alterações ao projeto principal. pode criar um arquivo chamado test.yaml para automatizar seus
testes.
O GitHub oferece uma interface fácil de usar para gerenciar
pull requests. Para revisar e mesclar um pull request, siga os 2. No arquivo YAML, especifique uma ação a ser executada em
seguintes passos: response a um evento. Por exemplo, você pode querer executar
seus testes sempre que você empurra novas mudanças para o seu
1. Clique no link "Pull requests" na página principal do repositório ou sempre que um novo pull request é criado.
repositório.
2. Selecione o pull request que deseja revisar. ```
3. Revise as alterações sugeridas no pull request e deixe name: Test
comentários, se necessário.
4. Se estiver satisfeito com as alterações, clique no botão on:
"Merge pull request". push:
5. Se necessário, resolva quaisquer conflitos de mesclagem que pull_request:
possam surgir.
6. Clique no botão "Confirm merge" para mesclar as alterações jobs:
no repositório principal. test:
runs-on: ubuntu-latest
Conclusão
--------- steps:
- uses: actions/checkout@v2
O GitHub é uma poderosa ferramenta de colaboração que pode - name: Install dependencies
ajudar os desenvolvedores a trabalhar em conjunto de forma run: |
eficiente e produtiva. Ao seguir as melhores práticas de npm install
adição de colaboradores, controle de acesso e gerenciamento de - name: Run tests
pull requests, você pode ajudar a manter seu projeto run: npm run test
organizado e fácil de trabalhar para todos os envolvidos. ```
3. Quando você comita e empurra as mudanças para o seu
repositório, o GitHub Actions executará automaticamente seu
arquivo YAML. Você pode ver o status de uma execução na aba
"Actions" do seu repositório.
with:
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
O exemplo acima se aplica apenas a testes, você pode node-version: ${{ matrix.node-version }}
facilmente adaptá-lo para construir e implantar seu projeto. O - run: npm install
GitHub Actions oferece suporte a uma ampla variedade de - run: npm test
linguagens e frameworks de programação.
- uses: actions/upload-artifact@v2
Em resumo, o GitHub Actions é uma poderosa ferramenta para with:
automatizar tarefas e aumentar a eficiência do seu fluxo de name: test-results
trabalho. É fácil de usar e pode ser configurado rapidamente, path: test-results.xml
permitindo que você se concentre no desenvolvimento do seu ```
projeto sem se preocupar com tarefas tediosas de rotina.
Este exemplo adiciona uma ação de upload de artefatos de
Integração contínua em GitHub terceiros que inclui o resultado dos testes em um arquivo xml.
1. Crie um arquivo de configuração de fluxo de trabalho YAML
em sua pasta .github/workflows 3. Crie variáveis de ambiente para seus fluxos de trabalho
Exemplo: Exemplo:
``` ```
name: Main Build name: Main Build
on: on:
push: push:
branches: branches:
- master - master
pull_request: pull_request:
jobs: jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
strategy: strategy:
matrix: matrix:
node-version: [14.x] node-version: [14.x]
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }} - name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1 uses: actions/setup-node@v1
with: with:
node-version: ${{ matrix.node-version }} node-version: ${{ matrix.node-version }}
- run: npm install - run: npm install
- run: npm test - run: npm test
```
- uses: actions/upload-artifact@v2
Neste exemplo, o fluxo de trabalho é nomeado como "Main Build" with:
e é definido para rodar quando há um push na branch master ou name: test-results
um pull request. Há apenas um job definido, chamado "build" path: test-results.xml
que roda no sistema operacional ubuntu-latest. O job tem uma
matrix definida para o "node-version" com a versão do Node.js - name: Deploy
especificada como 14.x. Os steps desse job incluem o uso de env:
uma ação para fazer checkout do repositório, a instalação do NODE_ENV: production
Node.js, a instalação de dependências npm e a execução de run: |
testes. echo $NODE_ENV
```
2. Adicione ações de terceiros ao seu fluxo de trabalho
Este exemplo adiciona uma variável de ambiente chamada
Exemplo: NODE_ENV que é definida como produção para ser usada no step
de deploy. Ao executar echo $NODE_ENV, o valor "produção" será
``` exibido.
name: Main Build
4. Configure fluxos de trabalho em paralelo
on:
push: Exemplo:
branches:
- master ```
pull_request: name: Parallel Builds
jobs: on:
build: push:
runs-on: ubuntu-latest branches:
- main
strategy:
matrix: jobs:
node-version: [14.x] build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2 strategy:
- name: Use Node.js ${{ matrix.node-version }} matrix:
uses: actions/setup-node@v1 node-version: [12.x, 14.x]
os: [ubuntu-latest, windows-latest]
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
WhatsApp: +244 946269760 Facebook: Ja Ta Ki
15º. Como usar o comando "git diff" para comparar diferenças
steps: entre arquivos?
- uses: actions/checkout@v2 16º. Como desfazer mudanças em um arquivo usando o comando
"git revert"?
- name: Use Node.js ${{ matrix.node-version }} 17º. Como usar o Git para colaborar com outros
uses: actions/setup-node@v1 desenvolvedores em um projeto compartilhado?
with:
node-version: ${{ matrix.node-version }}
9. SEO
- run: npm install Próxima versão
Próxima versão
- run: npm run build
- name: Upload Artifact
uses: actions/upload-artifact@v2 10. WordPress
with: Próxima versão
name: build Próxima versão
path: build
PROJETOS
test: 1. Desenvolvimento de um sistema de gerenciamento de
needs: build biblioteca
runs-on: ubuntu-latest 2. Criação de um jogo de cartas
strategy: 3. Implementação de um sistema de controle de estoque.
matrix: 4. Desenvolvimento de um aplicativo de agenda.
node-version: [12.x, 14.x] 5. Construção de um sistema de gerenciamento de vendas.
os: [ubuntu-latest, windows-latest] 6. Criação de um aplicativo de chat.
steps: 7. Implementação de um sistema de controle de despesas.
- uses: actions/checkout@v2 8. Desenvolvimento de um sistema de gerenciamento de
tarefas.
- run: npm install 9. Construção de um aplicativo de previsão do tempo.
10. Criação de um sistema de gerenciamento de clientes.
- name: Use Node.js ${{ matrix.node-version }} 11. Implementação de um sistema de controle de acesso.
uses: actions/setup-node@v1 12. Desenvolvimento de um aplicativo de lista de compras.
with: 13. Construção de um sistema de gerenciamento de projetos.
node-version: ${{ matrix.node-version }} 14. Criação de um jogo de palavras cruzadas.
15. Implementação de um sistema de controle de alunos.
- run: npm test 16. Desenvolvimento de um aplicativo de gerenciamento de
``` finanças pessoais.
17. Construção de um sistema de gerenciamento de
Neste exemplo, dois jobs são definidos, "build" e "test". O funcionários.
job de "build" é configurado para rodar em paralelo em duas 18. Criação de um aplicativo de tradução.
matrizes - uma com diferentes versões do Node.js e outra com 19. Implementação de um sistema de controle de estoque de
diferentes sistemas operacionais (ubuntu-latest e windows- uma loja.
latest). O step de upload de artefatos é executado depois que 20. Desenvolvimento de um sistema de gerenciamento de
o build é concluído e um nome e path para o artefato são eventos.
especificados. O job "test" usa o comando "needs: build" para 21. Construção de um aplicativo de lista de tarefas.
indicar que ele deve esperar até que o job "build" seja 22. Criação de um jogo de adivinhação.
concluído antes de começar a rodar. Neste job, é criada uma 23. Implementação de um sistema de controle de empréstimos.
matriz de diferentes versões do Node.js e sistemas 24. Desenvolvimento de um aplicativo de gerenciamento de
operacionais também. O step de testes roda após a instalação contatos.
das dependências e da seleção da versão do Node.js apropriada. 25. Construção de um sistema de gerenciamento de reservas.
26. Criação de um sistema de gerenciamento de academias.
Exercício 27. Implementação de um aplicativo de receitas culinárias.
1º. O que mais gostou e entendeu? 28. Desenvolvimento de um sistema de controle de biblioteca
2º. Como criar um novo repositório no GitHub? virtual.
3º. Como clonar um repositório existente no GitHub para sua 29. Construção de um jogo de quebra-cabeça.
máquina local? 30. Criação de um sistema de gerenciamento de imóveis.
4º. Como adicionar arquivos a um repositório no GitHub?
5º. Como criar e gerenciar branches no Git?
6º. Como fazer merge de branches no Git?
7º. Como criar um arquivo .gitignore para evitar arquivos
desnecessários no repositório?
8º. Como usar tags para identificar versões importantes no Git
e GitHub?
9º. Como usar o comando "git pull" para atualizar um
repositório local com as mudanças do repositório do
GitHub?
10º. Como usar o comando "git push" para enviar mudanças de
um repositório local para o GitHub?
11º. Como usar o comando "git commit" para confirmar uma
mudança no arquivo e adicionar uma mensagem descritiva?
12º. Como usar o comando "git log" para visualizar o
histórico de mudanças em um repositório local?
13º. Como usar o comando "git remote" para gerenciar
repositórios remotos?
14º. Como usar o comando "git clone --recursive" para clonar
um repositório recursivamente e obter o histórico
completo?
1. Esquece o que ouve
Regra: Aprendizado acelerado, Você { 2. Entende o que vê
3. Aprende o que faz
Você também pode gostar
- 3º Ano - Componentes a+c+Er+g+h+EfAinda não há avaliações3º Ano - Componentes a+c+Er+g+h+Ef24 páginas
- Programação, Estruturas de Dados e Mineração de Dados - Maurício - Braga - 4 WebconferênciaAinda não há avaliaçõesProgramação, Estruturas de Dados e Mineração de Dados - Maurício - Braga - 4 Webconferência53 páginas
- Códigos HTML Básicos para Páginas WebAinda não há avaliaçõesCódigos HTML Básicos para Páginas Web25 páginas
- 1-Configuração e Introdução Ao HTML - Geração TechAinda não há avaliações1-Configuração e Introdução Ao HTML - Geração Tech12 páginas
- Conteúdo Do Dia! - Geração Tech - 2Ainda não há avaliaçõesConteúdo Do Dia! - Geração Tech - 221 páginas
- Apostila de Programação para Web - HTML e CSSAinda não há avaliaçõesApostila de Programação para Web - HTML e CSS98 páginas
- A Ludicidade e A Intencionalidade Pedagogica No Desenvolvimento - 21.08 - PDFAinda não há avaliaçõesA Ludicidade e A Intencionalidade Pedagogica No Desenvolvimento - 21.08 - PDF103 páginas
- AulaI de Programação Web I (I Parte) OK - CópiaAinda não há avaliaçõesAulaI de Programação Web I (I Parte) OK - Cópia71 páginas
- Introdução A HTML e CSS - Desenvolvimento Web Com HTML, CSS e JavaScriptAinda não há avaliaçõesIntrodução A HTML e CSS - Desenvolvimento Web Com HTML, CSS e JavaScript51 páginas
- Guia Prático HTML CSS Aprenda Os Conceitos Básicos de Como Construir Páginas Web (Portuguese Edition) (Wallace Fragoso)Ainda não há avaliaçõesGuia Prático HTML CSS Aprenda Os Conceitos Básicos de Como Construir Páginas Web (Portuguese Edition) (Wallace Fragoso)73 páginas
- Anotações - Introdução À Linguagem HTMLAinda não há avaliaçõesAnotações - Introdução À Linguagem HTML13 páginas
- Aula de Programação Web (Progweb-02) - HTML Parte 1100% (1)Aula de Programação Web (Progweb-02) - HTML Parte 154 páginas
- Projeto Orientado I: Introdução HTML E CssAinda não há avaliaçõesProjeto Orientado I: Introdução HTML E Css22 páginas
- Robson Dos Santos 3 Comentários: HTML e CSS: Guia Básico para IniciantesAinda não há avaliaçõesRobson Dos Santos 3 Comentários: HTML e CSS: Guia Básico para Iniciantes7 páginas
- Web Design - Módulo 1 - Apostila 03 - Edição e Publicação de SitesAinda não há avaliaçõesWeb Design - Módulo 1 - Apostila 03 - Edição e Publicação de Sites8 páginas
- Musicalizando Com Os Numeros VOL.2Ainda não há avaliaçõesMusicalizando Com Os Numeros VOL.212 páginas
- Dissertação de Mestrado - Jedson Abrantes PDFAinda não há avaliaçõesDissertação de Mestrado - Jedson Abrantes PDF104 páginas
- Globalização e Reversão NeocolonialAinda não há avaliaçõesGlobalização e Reversão Neocolonial14 páginas
- 9º CIE Atividade 4 Ideias Evolucionistas - ProfessorAinda não há avaliações9º CIE Atividade 4 Ideias Evolucionistas - Professor4 páginas
- Programação Básica - Fundamentos Do HTMLAinda não há avaliaçõesProgramação Básica - Fundamentos Do HTML38 páginas
- Apostila, Programação e Desenvolvimento WebAinda não há avaliaçõesApostila, Programação e Desenvolvimento Web11 páginas
- Captura de Tela 2023-04-03 À(s) 14.31.03Ainda não há avaliaçõesCaptura de Tela 2023-04-03 À(s) 14.31.0335 páginas
- Apresenta o POP SNVS 014 Vers o 04 1712226737Ainda não há avaliaçõesApresenta o POP SNVS 014 Vers o 04 171222673737 páginas
- Inspeção Predial Vistoria Técnica Impermeabilização Irene JoffilyAinda não há avaliaçõesInspeção Predial Vistoria Técnica Impermeabilização Irene Joffily35 páginas
- Aula PMP Express - 1 Fluxo de Processos PMBOK 6 PDFAinda não há avaliaçõesAula PMP Express - 1 Fluxo de Processos PMBOK 6 PDF2 páginas
- Construção de Saberes Mediante A Observação em Espaço Escolar E Não EscolarAinda não há avaliaçõesConstrução de Saberes Mediante A Observação em Espaço Escolar E Não Escolar9 páginas
- Roteiro Do Vídeo Historia de Pinheiro PretoAinda não há avaliaçõesRoteiro Do Vídeo Historia de Pinheiro Preto11 páginas
