CS - Web (Js + PHP)
CS - Web (Js + PHP)
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()
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.
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.
```
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" />
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();
```
$ 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:
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. ```
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.
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.
Adicionando colaboradores
-------------------------
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. ```
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]