Toda linguagem de programação é composta por funções que já vem predefinidas, e é claro que as pessoas que desenvolveram o PHP  deram ao programador a liberdade de criar suas próprias funções,  e como mostra o titulo essa video aula do canal eXcript vai ser uma intro. Aproveite a aula se você quer assistir a mais aulas desse canal é só entrar no link aqui embaixo.

https://www.youtube.com/channel/UCRu4BNG9k_BRUu-aCYJsgHg

Aula de função e escopo de variáveis. Todos os direitos são reservados ao canal do eXcript, nós aqui do Preloadweb só compartilhamos um link interessante que vai ajudar a jovens iniciantes no mundo da programação.

O canal Excript mostra o que é e como usar funções de importação, tema super importante para quem deseja aprender PHP, bem sem mais delongas vamos assistir a aula.

Nessa video aula do canal Ferreira Studio veremos como fazer um efeito do Material Design(Framework da google), um ripple button que vai fazer que os clicks do usuário fiquem bem mais legais do que antes!.

Hoje iremos aprender a criar um slide com JavaScript puro para deixar seu site mais dinâmico e agradável. Aqui nós no focaremos apenas no JS, o HTML e CSS não precisam de explicações ja que são bem claros.

HTML

<div id='imgContainer'>
<img src="https://s-media-cache-ak0.pinimg.com/736x/82/c0/33/82c033ca0454dd6d8c1d2b6a308bc48d.jpg">
<img src="http://www.frm.com.au/assets/Fashion-Men/Rowan-Moorey/_resampled/FrmImage556834-RM-27bw-of-378.jpg">
<img src="https://bossip.files.wordpress.com/2012/03/model_curly_hairstyle_muscular_men.jpg?w=700">
</div>

 

 

CSS

#imgContainer{
width: 100%;
height: 400px;
overflow: hidden;
}

#imgContainer img{
width: 100%;
height: 100%;
display: inline-block;
}

 

 

Javascript

Agora vamos partir para a melhor parte desse tutorial, o Javascript, não é segredo que se você se dedicar e aprender a manipular os elementos do HTML  pode fazer coisas incríveis e um slide vai ser só uma fichinha perto do que se pode fazer por ai com criatividade e o DOM(rs :D).

Toda a logica do nosso programa esta em uma única variável, que vai controlar o fluxo das imagens, aqui nós estaremos lidando com um Nodelist, ele vai nos gerar  um array e para acessar cada elemento desse array nós precisamos de uma variável que vá simular os índices do elemento e para isso temos a variável index, ela vai ser iniciada em 0 e enquanto nosso script for avançando ela vai ser incrementada.

 

var index = 0; //nossa variavel de controle

 

O método getElementsByTagName

Nós iremos utilizar esse método para pegar os elementos do html, mas existe outros   que você poderia usar como getElementsByClassName e querySelectorAll isso vai da preferencia de cada um. Aqui nós estaremos recuperando o elemento pelo nome,  então dentro dos parenteses nós referenciamos o elemento que iremos manipular que no nosso caso sera as imagens.

function slide(){
var imgArr = document.getElementById('imgContainer').getElementsByTagName('img');
]

Aqui nós atribuímos a nossa variável imgArr um nodelist(um array de elementos do HTML), se você não tiver cuidado você pode acabar pegando todas as imagens da sua pagina e não é isso o que queremos, por isso nós pegamos o id do nosso contêiner onde estão nossas imagens e desse modo nós não vamos interferir nos outros elemento, você também pode usar uma estrutura condicional mas é quase a mesma coisa.

 

var tamanhoTotal = imgArr.length-1; // essa variável guarda o número total de imagens
var indexAnterior = index-1; // essa variável guarda o index da imagens que será escondida

 

A variável tamanhoTotal vai pegar a o tamanho do imgArr e cada vez que o loop executar ele vai diminuir o tamanho do array de imagens e a variável indexAnterior vai fazer a mesma coisa só que com os índices.

Vamos fazer uma condição que vai verificar se o índice é maior que o numero de imagens.

if(index > tamanhoTotal){

index = 0;

indexAnterior = tamanhoTotal;

/*essa parte do código se repete nas duas condições,
isso porque queremos que tenha o efeito de um loop*/
imgArr[indexAnterior].style.display = "none"; //esconda a última imagem mostrada
imgArr[index].style.display = "block"; //mostre a imagem atual

//fim da 1ª condição

Quando essa condição for verdadeira significa que chegamos no fim do nosso array de imagens, então precisamos fazer ele voltar para o inicio novamente, e por isso a variável index tem o seu valor igualado a 0. Como essa condição diz que o nosso array chegou no final e que o nosso index tem que voltar para o inicio, o indexAnterior não pode ser o valor do index-1, daria um erro. Então logicamente nosso  indexAnterior tem que ser a última imagem do array.

Agora vamos ao nosso else que vai ser executado caso a primeira condição seja falsa, se o index for 0, ele vai ser a primeira imagem, então o indexAnterior tem que ser a última imagem do array.

else{
if(index == 0){
indexAnterior = tamanhoTotal;

imgArr[indexAnterior].style.display = "none"; //esconda a última imagem mostrada imgArr[index].style.display = "block";

//fim da 2ª condição

}

}

quando essa condição for verdadeira, significa que ainda não chegamos no final do nosso array, então podemos continuar mostrando as imagens, aqui nos somamos 1 à nossa variável toda vez  que a função slide() for chamada, isso fará que ela mude de valor sempre, então quando você passa ela como o valor do  index do nosso array de imagens, isso permite  que você aplique efeitos para partes diferentes do array como mostrar e esconder partes do array, como ocorre no nosso slide

index++

setInterval(slide,1000);

SetInterval

Esse método vai chamar a função slide a cada 1 segundo é com ele que nós vamos fazer com que o slide funcione automaticamente, como um laço for, ele só pode ser interrompido se o programado usar um outro método chamado clearInterval. O método leva 3 parâmetros os dois primeiros são obrigatórios e o ultimo opcional, primeiro vem o nome da função que você quer setar um interval e depois vem o tempo. Bem feito isso o nosso slide esta pronto. Veja na integra o nosso tutorial no codepen o link esta aqui em baixo.

 

Neste tutorial abordaremos como  inserir e selecionar dados no mysql, tudo o que precisaremos é de um Servidor(Wamp, Lamp, Xamp) ou qualquer outro que tenha o php, apache, mysql e um gerenciador de banco de dados tipo o phpmyAdmin, um editor de código,  um conhecimento breve em SQL para manipular a inserção e seleção de dados.

Extensoes MYSQLI e PDO(PHP DATA OBJECT)

Se você vai seguir o exemplo desse tutorial então precisa saber que você deve usar uma extensão do php para fazer a comunicação entre o php e a  base de dados. Existe duas opções o MYSQLI e o PDO, antes do MYSQLI tínhamos a MYSQL mas ela ficou obsoleta, então temos a MYSQLI orientada a objetos e a MYSQL procedural e como ja fica explicito no nome o único SGBD que o Mysqli pode se comunicar é o Mysql. Já o PDO pode se comunicar com diversos SGBDs diferentes e você  não vai se limitar e nem precisar mudar todo seu código caso algum dia troque o SGBD, se você é um iniciante então recomendo que use o Mysqli já que o PDO é orientado a objetos e pode ficar um pouco dificil de entender . Aqui usaremos o Mysqli procedural.

 

Criando o banco de dados e a tabela

Vamos criar o banco e a tabela e assim vamos aprender a popular as tabelas

CREATE DATABASE IF NOT EXISTS `pessoa` ;
USE `pessoa`;

CREATE TABLE IF NOT EXISTS `pessoas` (
 `cod` int(10) NOT NULL,
 `nome` varchar(50) NOT NULL,
 `idade` int(3) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Formulario HTML

Vamos criar o formulario em html para que os dados sejam inseridos.

<form action="inserir.php" method="POST">
Nome:<input type="text" name="nome">

Idade:<input type="number" name="idade">

<input type="submit" value="Enviar">
</form>

 

 

Inserindo Dados

Primeiramente nós precisamos fazer a conexão com o banco e para isso iremos usar o comando mysqli_connect(); nesse comando nós passamos os parâmetros da nossa conexão como o nome do nosso servidor, nosso nome de usuário, senha e o nome do banco de dados

$server = "localhost";//nome do seu servidor, geralmente é localhost mesmo
$user ="seu nome de usuario";//aqui você vai colocar seu nome de usuário, se vc não mudou na hora da instalação então ele pode ser root.
$pass ="senha do bd";//esse campo é referente a senha se vc não definiu uma senha entao esse campo é vazio
$db = "nome do bdp";//aqui fica o nome do banco de dados que vc vai usar, no nosso caso vai ser pessoa

$conn = mysqli_connect($server, $user,$pass,$db);

if(!$conn){
die("A conexão falhou:". mysqli_connect_error());
/**aqui nós verificamos se a conexão foi bem sucedida,
 se ela nao for pra isso que serve a exclamação(!), então a função die vai
parar o script  e mostrar a mensagem de erro com o comando
mysqli_connect_error()**/}

//recuperando a variavel do html
$nome = $_POST['nome'];
$idade = $_POST['idade'];
 

Agora nós vamos utilizar um pouco  da linguagem SQL para inserir os dados na tabela. Depois do Insert into vem o nome da tabela que você quer popular e entre parenteses os campos onde vc quer inserir os dados,  os campos tem que ser na mesma ordem onde os campos estão no mysql. A variável que vai ser enviada para o mysql tem que ser dentro de aspas simples

$sql ="INSERT INTO pessoas(nome, idade) VALUES('$nome','$idade')";

 

Precisamos saber se os dados foram mesmo enviados para a tabela certo? entao vamos fazer um if e verificar se tudo ocorreu bem. Nessa parte nós estaremos utilizando a função mysqli_query, ela vai receber dois parâmetros a nossa conexão e a query que queremos enviar que é a variável $sql.

 

if(mysqli_query($conn, $sql)){
echo "Registro inserido com sucesso";
}else{
echo "Erro: ".$sql."
";
mysqli_error($conn);
}

Feito isso se tudo ocorreu bem sem nenhum tipo de erro então significa que ate aqui esta tudo ok e os dados foram inseridos na tabela.

 

Selecionando dados do Mysql

Para selecionar os dados é bem simples tudo que vamos precisar é duas funções e um loop. As funções mysqli_fetch_array e mysqli_num_rows, e o loop vai ser o while.

A função mysql_fetch_array () obtém uma linha do resultado como uma matriz associativa, uma matriz numérica, ou ambas. A mysqli_num_rows retorna o numero de linhas do resultado.

$select = "SELECT * FROM pessoas";//seleciona todos os campo da tabela

$result = mysqli_query($conn, $select);//faz uma query com o resultado do select

se o numero de linhas do resultado for maior que 0 então vamos exibir os dados contidos nos campos da tabela pessoa, no loop while nós vamos atribuir a variável $row os dados como um array e depois exibi-los. Pronto assim se faz uma seleção de dados com o php.

if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){

echo "Nome: ".$row['nome']."
";
echo "Idade: ".$row['idade']."
";
echo "Codigo: ".$row['cod']."
"; } } 

As funções utilizadas:

mysqli_num_rows: http://www.w3schools.com/php/func_mysqli_num_rows.asp

mysqli_fetch_array: http://www.w3schools.com/php/func_mysqli_fetch_array.asp

die: http://www.w3schools.com/php/func_misc_die.asp

mysqli_query: http://www.w3schools.com/php/func_mysqli_query.asp

mysqli_connect: http://www.w3schools.com/php/func_mysqli_connect.asp

mysqli_error e mysqli_connect_error : http://www.w3schools.com/php/func_mysqli_error.asp

Um evento é uma reação gerada por uma ação executada pelo o usuário, com os eventos nós podemos fazer com que nossa pagina seja muito interativa, um evento pode ser o click do mouse ou o scrolling de uma pagina, tudo depende do tipo de ação que você vai atribuir ao elemento. Abordaremos aqui algumas formas de adicionar um evento ao nosso código HTML.

A maneira mais genérica de se usar um evento é adicionando ele ao próprio  HTML

EX:

Outra maneira para adicionar um evento ao HTML é colocando ele através do JS

Método EventListener

Com esse método você pode adicionar eventos a todos os elementos do DOM(Document Object Model)  e com ele  você deixa sua marcação  HTML mais limpa pois você vai poder manipular os elementos direto do seu script como no exemplo acima sem a necessidade de encher o HTML de marcações desnecessárias, tudo o que você vai precisar é de um id ou uma class, se você for atribuir o evento a um único elemento é altamente recomendado que se use o id caso ao contrario você pode usar um class(classe) mas será necessário o conhecimento em nodelist(um array com uma coleção de elementos).

Sintaxe:

O primeiro parâmetro é o evento que poderia ser qualquer um como o click, load, select entre tantos outros, isso você vai decidir.

O segundo parâmetro é a função que deve ser executada depois que o evento for gerado, pode ser criada uma função anônima ou pode ser passado o nome de uma função normalmente.

O terceiro parâmetro é um valor booleano e é opcional, o não uso dele não interfira o seu script.

/**função anonima**/

Ou

Para uma referencia mais completa recomendo que você leia a documentação da W3Schools:

1. http://www.w3schools.com/js/js_htmldom_events.asp
2. http://www.w3schools.com/js/js_htmldom_eventlistener.asp

 

Antigamente se um desenvolvedor quisesse fazer uma animação em algum elemento do HTML ele precisaria usar Flash ou Javascript, mas com a propriedade Animation do CSS3 isso mudou.

@Keyframes

Para fazer uma animação você precisa da regra @Keyframes, dentro dela você vai colocar todas as propriedades que você deseja que sua animação tenha, a regra tem que ter um nome.

Ex:

@Keyframes exemplo{

}

A configuração de um @Keyframe

Agora vamos começar a entender como funciona um  @Keyframes  e quais regras vai dentro dele. O from indica o estado inicial é quando a animação esta em 0%, o To é quando ela chega a 100%. Dentro do From e do To você pode colocar as regras que quiser, tudo vai depender da sua imaginação.

@Keyframes exemplo{
from{top:0; left: 0; right:0;}/**aqui é onde a animação inicia**/
to{top:100px; left: 100px; right: 150px;}/**aqui é onde ela termina**/
}

Outro método para fazer sua animação funcionar sem usar o From e To é usar a porcentagem.
Ex:

@Keyframes exemplo{
 0% { left:0px; top:0px; right:0;}
25%{ left:200px; top:100px; right:50px;}
50% { left:210px; top:200px;right:55px;}
75%{ left:0px; top:200px;right:60px;}
100% { left:0px; top:0px;right:80px;}

Animation-name e Animation-duration

Toda animação precisa de um nome e uma duração , essas propriedades ficam dentro da regra que vai receber a animação elas são obrigatórias e para sua animação funcionar você vai ter que usar elas.

Ex:

.animation{
width: 150px;
height: 150px;
background: red;
animation-name: exemplo;
animation-duration:5s;
position: relative;
}

Animation Delay

Com essa propriedade é possível adicionar um atraso a animação antes dela começar essa propriedade é totalmente opcional cabe a você decidir se vai usar ou não.

.animation{
width: 150px;
height: 150px;
background: red;
animation-name: exemplo;
animation-duration:5s;
animation-delay:2s;/**a animação vai ter um delay(atraso) de 2 segundos antes de começar**/
position: relative;
}

Animation-iteration-count

Se você quiser que sua animação se repita um numero de vezes ou infinitamente é essa propriedade que você deve usar ela pode levar um valor numérico ou o infinite que vai fazer com que sua animação aconteça para sempre, sem interrupção.

.animation{

width: 150px;
height: 150px;
background: red;
animation-name: exemplo;
animation-duration:5s;
animation-delay:2s;
animation-iteration-count: infinite;
position: relative;
}

Essas são as propriedades básicas para uma animação funcionar, se você quiser saber sobre mais algumas propriedades é só acessar esse site: http://www.w3schools.com/css/css3_animations.asp

Caso você não queira colocar a mão na massa, existe também diversas bibliotecas de animações na internet, basta dar uma procurada.

Exemplo de Animação no Codepen: