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.
<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>
#imgContainer{
width: 100%;
height: 400px;
overflow: hidden;
}
#imgContainer img{
width: 100%;
height: 100%;
display: inline-block;
}
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
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);
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.
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.
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;
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>
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.
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
preloadweb 