segunda-feira, 25 de novembro de 2013

HTML5: Animações com Canvas

HTML5: Animações com CANVAS
           Olá! Segue agora uma postagem sobre um tema interessante: CANVAS. Mas, o que é isso? Como se sabe, a versão do HTML reinante nos dias de hoje é a versão 4. Porém, muitas grandes desenvolvedoras, no intuito de melhorar funcionalidades existentes e incluir novas, estavam elaborando uma nova versão pro HTML, o HTML5. 
Entre as novas possibilidades, destaca-se:
1) Conformidade com as especificações do CSS3
2) Reprodução de determinados conteúdos multimídia (Vídeo, audio) sem necessidade de plugins.
3) Possibilidade de armazenamento de cache
4) Tags novas (Canvas, video, audio, nav, sidebar, etc)

Pois bem! Dentre estas tags novas, falaremos agora do canvas. Mas, o que é isto? Em poucas palavras, ela permite que, sejam criadas animações wm 2D apenas com uso de javascript. É como se voçê criasse animações FLASH diretamente em javascript. Enfim, nota-se que esta tecnologia abre um grande leque de possibilidades para designers e programadores de jogos. 
Apenas como aprendizado, sugiro que leia o seguinte tutorial, que me serviu de portas para esta novidade, que agora compartilho:
Tutorial básico de CANVAS

Agora, segue abaixo algumas coisas (Bem toscas!),  sobre o que consegui fazer esta tecnologia:
Jogo de duas bolas
Ponteiro de relógio

Caso queira o link para ambos os testes, baixe-os, clicando no link abaixo:

Segue abaixo o código do primeiro exemplo, no qual, como voçê pode ver, é criado, pixel á pixel, todo o cenário e os personagens.
 <!DOCTYPE html> 
<html> 
<head> 
 Testes com CANVAS 
 
 
 
  
  
 
  
Controlando um boneco com CANVAS

  
   
Seu navegador não suporta HTML5

  
  
 </body>
</html>
No arquivo draw.js, estão todas as funções e módulos para controle da animação.

 
/*Toda vez que é  executado algo na tag CANVAS, deve-se instanciar o objeto especificado na variável context abaixo
 * pertencente á própria tag CANVAS. 
 * */
function carregaContexto(id){
   var elemento = document.getElementById(id);
   var context = elemento.getContext("2d");
   if(context){
   return context;
   }else{
   return false;
   }
  }
 /* Função abaixo para desenhar um triângulo simples */
function drawTriangulo(x,y,tamX,tamY){
   var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
   x = parseInt(x);
   y = parseInt(y);
   tamX = parseInt(tamX);
   tamY = parseInt(tamY);
   if(contexto){
    contexto.fillStyle = "#00FF00";
    contexto.moveTo(x-tamX,tamY);
    contexto.lineTo(tamX+x,tamY);
    contexto.lineTo(x,y);
    contexto.fill();
   }
  }
/* Função abaixo necessário para desenhar rostos */
function drawRosto(x,y,r){
 x = parseInt(x);
 y = parseInt(y);
 r = parseInt(r);
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.fillStyle = "#FFE4B5";
  contexto.moveTo(x,y);
  contexto.arc(x,y,r,0,Math.PI*2,false);
  contexto.fill();
  //Desenhando os olhos
  contexto.fillStyle = "#000000";
  contexto.moveTo(x-7,y-4);
  contexto.fillRect(x-7,y-4,4,4);
  contexto.moveTo(x+7,y-4);
  contexto.fillRect(x+7,y-4,4,4);
  //Desenhando a boca
  contexto.beginPath();
  contexto.strokeStyle = "#FF0000";
  contexto.moveTo(x-4,y+10);
  contexto.lineTo(x+5,y+10);
  contexto.stroke();
 }
}
/* Função para se desenhar qualquer forma quadrada */
function drawQuadrada(x,y,tamX,tamY,cor){
 x = parseInt(x);
 y = parseInt(y);
 tamX = parseInt(tamX);
 tamY = parseInt(tamY);
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.fillStyle = cor;
  contexto.beginPath();
  contexto.moveTo(x,y);
  contexto.fillRect(x,y,tamX,tamY);
  contexto.fill();
 }
}

/* Função abaixo desenha um sapato */
function drawSapato(x,y,tamX,tamY,cor){
 x = parseInt(x);
 y = parseInt(y);
 tamX = parseInt(tamX);
 tamY = parseInt(tamY);
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.fillStyle = cor;
  contexto.beginPath();
  contexto.moveTo(x,y);
  contexto.fillRect(x,y,tamX/2,tamY/2);
  contexto.fill();
  contexto.beginPath();
  contexto.moveTo(x+tamX/2,y-tamY/2);
  contexto.arc(x+tamX/2,y+7,9,Math.PI*1.5,Math.PI*0.5,false);
  contexto.fill();
 }
}

/* Função para desenhar mãos */
function drawMao(x,y,r,cor){
var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.fillStyle = cor;
  contexto.beginPath();
  contexto.moveTo(x,y);
  contexto.arc(x,y,r,0,Math.PI*2,false);
  contexto.fill();
  contexto.beginPath();
  contexto.moveTo(x,y-r);
  contexto.quadraticCurveTo(x+50,y-50,x+2,y+5);
  contexto.moveTo(x,y-r);
  contexto.quadraticCurveTo(x+5,y-100,x-20,y+5);
  contexto.fill();
 }
}

/* Função para desenhar relógio*/
function drawRelogio(x,y,r,cor){
 x = parseInt(x);
 y = parseInt(y);
 r = parseInt(r);
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.fillStyle = cor;
  contexto.beginPath();
  contexto.moveTo(x,y);
  contexto.arc(x,y,r,0,Math.PI*2,false);
  contexto.fill();
  //Marcando os números do relógio
  contexto.fillStyle = "#FFFF00";
  contexto.fillText("12",x,y-(r-10));
  contexto.fillText("3",x+(r-10),y);
  contexto.fillText("6",x,y+(r-10));
  contexto.fillText("9",x-(r-10),y);
  //Desenhando o ponteiro
 
 }

}

/*Função abaixo move o braço do boneco com base no clique na mão do mesmo */

function moveBraco(x,y,tamB,bX,bY){
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  x = parseInt(x);
  y = parseInt(y);
  tamB = parseInt(tamB);
  
  
  if(y >= bY){
   if(x >= bX){
    c = 2;
   }else{
    c = 4;
   }
  }else{
   if(x >= bX){
    c = 8;
   }else{
    c = 6;
   }
  }
  
  var minX = bX - tamB-15;
  var minY = bY-tamB;
  var maxX = bX + tamB-15;
  var maxY = bY+tamB;
  cX = (xmaxX?maxX:x));
  cY = (ymaxY?maxY:y));
  //Rotação do braço com base nas coordenadas
  drawQuadradaComRotacao(bX,bY,cX,cY,tamB,"#2F4F4F");
  //alert(cX + "-" + minX);
  drawMao(cX,cY,20,"#F0E68C");
 }
}
/*Desenhando o braço, para que sei posicionamento esteja relativo ao posicionamento da mão*/
function drawQuadradaComRotacao(x,y,cX,cY,tamB,cor){
 x = parseInt(x); //Coordenadas do braço
 y = parseInt(y);
 cX = parseInt(cX); // Coordenadas c são coordenadas da mão. São passadas como parâmetro para que o braço possa acompanhar a mão
 cY = parseInt(cY);
 tamB = parseInt(tamB); // Tamanho do braço
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.fillStyle = cor;
  contexto.beginPath();
  contexto.moveTo(x,y);
  //Setar a coordenada do braço para que acompanhe a mão
  contexto.lineTo(cX,(cY-2));
  contexto.lineTo(cX,(cY-2) + tamB);
  contexto.lineTo(x,y + tamB);
  contexto.fill();
 }
}

/*Desenhando um corpo inteiro*/
function desenhoCorpo(){
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
 
 //Desenho de um corpo humano
   drawRosto(165,50,25);
   //Pesco词
   drawQuadrada(150,70,30,20,"#FFE4B5");
   //Barriga
   
   drawQuadrada(80,100,45,30,"#2F4F4F");
   
   //Perna direita
   drawQuadrada(130,210,30,100,"#000000");
   
   
   //P顥squerdo
   drawSapato(130,310,60,30,"#A52A2A");
   //M䯠direita
   drawMao(75,115,20,"#F0E68C");
   //Barriga
   drawQuadrada(125,90,80,120,"#2F4F4F");
   
   
   //Perna esquerda
   /*drawQuadrada(170,210,30,100,"#000000");
   //Pé ireito
   drawSapato(170,310,60,30,"#A52A2A");*/
   //Ch䯍
   drawQuadrada(0,325,document.getElementsByTagName('canvas')[0].width,document.getElementsByTagName('canvas')[0].height-310,'#8B4513');
   
  
 }
 
}

/* Função para mover o pé */
function movePe(x,y,tamX,tamY,cX,cY){
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  //Desenhando a perna com base nas coordenadas c
  contexto.fillStyle =  "#000000";
  contexto.moveTo(x,y);
  contexto.lineTo(cX,cY);
  contexto.lineTo(cX+tamX,cY);
  contexto.lineTo(x+tamX,y);
  contexto.fill();
  drawSapato(cX,cY,60,30,"#A52A2A");
  
 }
}
/*Limpar a tela inteira. Executada quando se encerra o jogo, ou para que tudo se inicie do zero*/
function limpaTela(){

 drawQuadrada(0,0,document.getElementsByTagName('canvas')[0].width,document.getElementsByTagName('canvas')[0].height,'#FFFFFF');
}
No arquivo boneco.js, tem os atributos e métodos próprios dos personagens.
 
/*
 Criando o objeto Boneco, que será o responsável pelas movimentações no cenário(boneco.html)
*/


function Boneco(cor){
 this.cor = cor;
 this.dX = 0; //Coordenada X atual do objeto
 this.dY = 0; // Coordenada Y atual do objeto
 this.s = "d"; //Sentido do objeto: Pode ser d(Direito) ou e(Esquerdo)
 this.minY = 240; // Coordenada Y m[inima(Ponto Y do chão)
 this.sY = "C"; //Sentido horizontal do objeto
 this.maxY = 0;
}
/*Gambiarra abaixo para associar o método constroe á classe Boneco
 * Forma alternativa de definir métodos á uma classe
 * */
Boneco.prototype.constroe = function(x,y){
 this.dX = x;
 this.dY = y;
 this.maxY = 320;
 var contexto = carregaContexto(document.getElementsByTagName('canvas')[0].id);
 if(contexto){
  contexto.beginPath();
  contexto.fillStyle = this.cor;
  contexto.arc(x,y,20,0,2*Math.PI,false);
  contexto.fill();
  //Desenhando os olhos
  contexto.beginPath();
  contexto.fillStyle = "#FFFFFF";
  contexto.moveTo(x+2,y-2);
  contexto.arc(x+2,y-2,3,0,2*Math.PI,false);
  contexto.fill();
  
  contexto.beginPath();
  contexto.fillStyle = "#FFFFFF";
  contexto.moveTo(x+8,y-4);
  contexto.arc(x+8,y-4,3,0,2*Math.PI,false);
  contexto.fill();
 }
}

/*
 Método abaixo executa move o objeto Boneco para os lados. Quando o objeto está no limite(Final do caminho), seu sentido é alterado(Esquerdo ou Direito).
 Como terceiro parâmetro,  recebe o array de obstáculos a serem ultrapassados.
 Se x estiver entre propriedades minX e maxX
  Se for menor ou igual á minY do obstáculo
   Seta atributo dY como sendo equivalente á minY.
  Senão
   Se sentido é igual á direito
    Seta dx como equivalente á minX
   Senão
    Seta dx como equivalente á maxX
 Senão
  Se dx for maior do que maxX e sentido for D OR se dx for menor do que minX e sentido for E
   Seta dY como maxY(Toca o solo)
  
*/

Boneco.prototype.andar = function(dx,s,obstaculos){
 var  maxX = document.getElementsByTagName('canvas')[0].width;
 this.s = s;
 if(this.dX >= maxX){
   this.s = "e";
  }else if(this.dX <= 10){
   this.s = "d";
  }
   for(obs in obstaculos){
    if( (obstaculos[obs].minX <= this.dX)  &&   ( this.dX <= obstaculos[obs].maxX)){
     if(this.dY <= obstaculos[obs].minY){
      this.dY = obstaculos[obs].minY;
     }else{
      if(this.s == "d"  && (this.dX <= obstaculos[obs].minX + obstaculos[obs].width/2)){
       this.dX -= 2*dx;
       return;
      }else if(this.s == "e" && (this.dX >= obstaculos[obs].maxX - obstaculos[obs].width/2)){
       this.dX += 2*dx;
       return;
      }
     }
    }else if((this.dX > obstaculos[obs].maxX && this.s == "d") || (this.dX < obstaculos[obs].minX && this.s == "e")){
     this.dY = this.maxY;
    }
   }
 if(this.s == "d"){
  this.dX += dx;
 }else{
  this.dX -= dx;
 }
}

/*
 Método abaixo faz o objeto pular. Quando o usuário clica na barra de espaço, o usuário pula á uma altura maior do que a caixa 
*/

Boneco.prototype.pular = function(){
 var maxY = this.maxY;
  if(this.dY >= maxY){
   this.sY = "C";
  }else if(this.dY <= this.minY){
   //this.dY = this.minY;
   this.sY = "B";
  }
  if(this.sY == "C"){
   this.dY -= 20;
  }else if(this.sY == "B"){
   this.dY += 20;
  }
}


/*
 Método abaixo serve para criar obstáculos na tela.
*/

function Obstaculo(x,y,lar,tam,cor){
 lar = parseInt(lar);
 x = parseInt(x);
 y = parseInt(y);
 //Desenhando o objeto
 drawQuadrada(x,y,lar,tam,cor);
 this.minY = y;
 this.minX = x;
 this.maxX = x+lar;
 this.width = lar;
 this.altura = tam;
}

Quando se usa CANVAS, pode-se notar que os desenhos são feitos pixel-á-pixel. Ou seja, são feitos especificando as coordenadas de cada fígura. Por isso, apesar de o carregamento ser bem mais rápido, se comparado com o SVG (Mesmo propósito que o CANVAS, porém, mais fácil e menos flexível), demanda muito esforço de desenvolvimento. Além disso, é necessário que se tenha a disposição, um conjunto de funções básicas como: Andar, pular, tratamento de colisões; caso desenvolva animações mais complexas. Do contrário, estará perdendo tempo com detalhes que podem muito bem ser encapsulados.


Espero que tenham gostado, e, se gostou, poste seu comentário. Se não, manda sua crítica, para que possamos sempre melhorar.

Abraços
       

Postado por às Nenhum comentário:

quinta-feira, 31 de outubro de 2013

Introdução ao CSS

Posso todas as coisas em Cristo que me fortalece (Filipense, 4:13)

Introdução á costrução de layouts via CSS

Olá! Sejam bem-vindos á meu portal, onde, na medida do possível, busco dividir um pouco do que sei deste magnífico mundo WEB. Agora vou mostrar algumas linhas gerais de como começar a aprender CSS. Mas, o que é CSS? Para que isso?

CSS (Cascading Style Sheet), que, traduzindo do inglês; é "Modelo de Folhas em Cascata", é uma síntaxe que permite estilizar (Aplicar estilos), á elementos WEB. Em outras palavras, é uma maneira de definir características (Fonte, cor, plano de fundo, espaçamento), de cada elemento HTML. O CSS define como o navegador renderiza os elementos dispostos na página.

Para designers e desenvolvedores WEB, é bastante útil o seu domínio, nem que seja apenas o básico. É usado quando, na criação do site, o layout deve se transformar em página de um site. Aí, a imagem inteira deve ser cortada em blocos, que serão reutilizados na construção de uma pagina em HTML. Depois, deve-se empregar o CSS para posicionar os elementos HTML de acordo com o layout.

Um site bom de CSS que pode ser usado como consulta rápida ou para aprendizado em um nível um pouco mais avançado é o Site do Maujor

Eu mesmo estava treinando um pouco de CSS, e consegui elaborar um template simples e um outro, com 2 colunas. Mas, antes de começar a analisar os layouts, vamos observar alguns pontos:

Em um documento HTML, para carregar os estilos CSS de um arquivo externo, deve-se incluir o seguinte trecho de código dentro das tags .

Como este artigo não pretende ser uma manual ou um tutorial explicando passo-á-passo, segue abaixo o código da minha página de testes (teste.html), e de dois arquivos CSS: teste.css(Layout simples) e teste2.css

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  
  
  
  TESTE
 </head>
 <body>
  

   
   
   
   

    Conteúdo
    
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

    

     
     
    

   
   

   
   
  

 </body>
</html>

Agora a estilização simples da página

/*
 Layout simples
*/

#tudo{
 width: 1000px; /*Largura máxima desta div*/
 margin: 0 auto; /*Margin no topo é 0, e lateral direita é de acordo com o navegador*/
 background-color: #666600; /*Cor de fundo em hexadecimal*/
}

#header{
 padding: 5px; /*Espaçamento entre o elemento e as bordas*/
 text-align: center; /*Texto em alinhamento centralizado*/
 background-image: url(images/img04.jpg);
 text-shadow: -4px 2px 2px #2F4F4F ; /*Sombreamento de textos*/
}

#navegacao{
 color: #FFFFFF;
 position: relative; /*Posicionamento de acordo com o elemento anterior ou com o container */
 display: block; /*Será disposto em forma de bloco, ocupando, se possível a largura inteira*/
}

#content{
 display: block;
 position: relative; /*Relativo á DIV tudo, não ás dimensões da página*/
 margin-top: 4em;
 clear: both; /*Com esta linha, o container não ficará lado a lado dos elementos anteriores, mas, será feita uma quebra de linha, ficando embaixo dos elementos anteriores*/
 padding: 1em;
 line-height: 2em; /*Determina a altura da linha*/
}

#content p{
 -webkit-hyphens: auto;
}
#content b{
 margin: 10px;
 text-align: center;
}

#footer{
 position: relative; 
}

#footer p{
 text-align: center;
 margin-left: 10px;
 margin-bottom: 2em;
 padding: 2em;
}

#nav li{
 text-align: center;
 float: left; /*Com este atributo, elemento tende a flutuar pro lado, o que indica que vai tentar ficar o máximo na esquerda dentro do container-pai*/
 display: inline; /*O elemento será renderizado dentro do bloco que o contém*/
 text-transform: uppercase; /*Transforma a letra em maiúscula*/ 
 list-style: none;
}


#nav {
 margin-left: 0px;
 -webkit-margin-before: 0em;
 -webkit-padding-start: 0px;
 -moz-margin-before: 0em;
 -moz-padding-start: 0px;
}

.container_images{
 position: relative;
 display: block;
 
}

.container_images img{
 display: inline-block;
 margin: 2em;
 border: 1px solid #000;
 /*-webkit-transform: rotate(50deg); */ /*Rotação*/
 /*-webkit-transform: translate(500px, 100px); */ /*Setando posicionamento de forma direta*/
 -webkit-transform: scale(2,2); /*Redimensiona as imagens de acordo com os parâmetros x e y*/
 /*-webkit-transform: skew(66deg, -11deg);*/ /*Deita a imagem em forma inclinada*/
}

.container_images img:hover{
 border: 1px solid #FFF;
}


#nav li a{
 border-radius: 1em; /**/
 border: 1px solid #999900;
 text-decoration: none; /*Com esta opção, o link deixa de ser sublinhado*/
 padding: 1em;
}

/*Quando o mouse pousa sobre alguns dos links do menu */
#nav  li a:hover{
 background-color: #000; /*Cor de fundo*/
 color: #FFF; /*Cor do texto*/
 border: 1px solid #333366; /*Especificações de borda: tamanho estilo cor*/
 
 /*
  Configurações de transição de propriedades aplicadas no elemento.
  Pode-se ver que é aplicada á cada navegador (Chrome, mozilla, ópera)
  MODELO: transition: propriedade tempo tipo, propriedade2 tempo tipo...
 */
 -webkit-transition: background 2s linear,color 2s linear, border 3s linear;
 -moz-transition: background 2s linear,color 2s linear, border 3s linear;
 -o-transition: background 2s linear,color 2s linear, border 3s linear;
 transition: background 2s linear,color 2s linear, border 3s linear;
}

Agora a estilização CSS para um template de duas colunas

/*
 Layout com 2 colunas
*/

#tudo{
 width: 1000px;
 margin: 0 auto;
 background-color: #666600;
}

#header{
 padding: 5px;
 text-align: center;
}

#navegacao{
 position: relative;
 color: #FFFFFF;
 position: relative;
 display: block;
 float: left;
 width: 150px;
}

#content{
 float: left;
 display: block;
 position: relative;
 padding: 1em;
 line-height: 2em;
 width: 800px;
}

#content b{
 margin: 10px;
 text-align: center;
}

#footer{
 position: relative; 
 clear: both;
}

#footer p{
 text-align: center;
 margin-left: 10px;
 margin-bottom: 2em;
 padding: 2em;
}

ul#nav {
 display: inline;
 list-style: none;
}

ul#nav li{
 padding: 1em;
 text-transform: uppercase;
 position: relative; 
}

ul#nav li a{
 text-align: center;
 border-radius: 1em;
 border: 1px solid #999900;
 text-decoration: none;
 padding: 1em;
}

ul#nav  li a:hover{
 background-color: #000;
 color: #FFF;
 border: 1px solid #333366;
 
 -webkit-transition: background 2s linear,color 2s linear, border 3s linear;
 -moz-transition: background 2s linear,color 2s linear, border 3s linear;
 -o-transition: background 2s linear,color 2s linear, border 3s linear;
 transition: background 2s linear,color 2s linear, border 3s linear;
}

Segue abaixo os links para as páginas de teste

Layout simples Layout com 2 colunas

Espero que tenha gostado do post, e, caso tenha alguma dúvida ou queira postar um comentário, sinta-se á vontade!

Postado por às Nenhum comentário:

sábado, 30 de março de 2013

Conexão com base de dados via Mysql com PHP

Um desenvolvedor WEB sempre se depara com uma situação, ou com um projeto no qual se exige que se crie ou se manipule dados. Portanto, para quem atua no ramo, é importante que saiba pelo menos o básico de SQL e, saiba estabelecer uma conexão com base de dados. Nesta postagem, será apresentado como, via PHP, pode-se criar uma conexão com o SGBD (Sistema Gerenciador de Banco de dados) MySQL, e como executar alguns comandos SQL, utilizando-se desta conexão.


Primeiramente, iremos criar um formulário simples de cadastro (No post anterior, Como passar dados de um formulário ao servidor), há uma descrição de como fazer isso, e de como enviar informações para serem processados por um servidor ). Segue o trecho de código abaixo, copie e cole no seu editor: 


<html>
 <head>
  Cadastro básico
  
 </head>
 <body>
  

   
   
   
   
   
             
  

 </body>
</html>

Quando voçê clicar no botão Enviar, os dados serão enviados para uma página chamada salva.php, especificado no 'action' da tag FORM. É este arquivo que será responsável por receber as informações do formulário e persistí-los em base de dados. Porém antes disso, devemos saber onde de fato ficará estas informações. Saber de forma mais precisa.


Uma base de dados é formada por tabelas que se inter-relacionam. Cada tabela representa, digamos, uma entidade do mundo real. Por exemplo: Tabela motorista é onde ficam armazenados todos os motoristas cadastrados. Já os carros, ficam armazenados na Tabela Carro, por exemplo. No nosso caso, criaremos o banco de dados chamado PessoasDb. Nela criaremos uma tabela chamada Pessoas. Para tanto, devem ser dadas algumas instruções ao MySQL. Isto pode ser feito via interface amigável (PHPMYADMIN, por exemplo), ou pela linha de comando. Segue abaixo estas instruções (É mais fácil fazer isso via interface do PHPMYADMIN, pois, irá te poupar ter que executar os comandos abaixo manualmente): 


  CREATE DATABASE PessoasDb; // Comando para criação da base de dados
  CREATE TABLE Pessoas(
    id int not null auto_increment,
    nome varchar(30),
    sobrenome varchar(10),
    idade int,
    sexo char(1) enum('M','F'),
    profissao varchar(30)
  ); 
    // Acima comando sql para criação da tabela Pessoas

Tendo a base de dados e a tabela criada, vamos criar a página que irá gravar as informações em base de dados. 

  <?php

  // Primeiramente, iremos criar uma conexão ativa com a base de dados PessoasDb
   $server = "localhost";
   $user = "root";
   $pass = "";
   $con = mysql_connect($server,$user,$pass); /* O Servidor de banco de dados se chama localhost, quando o mesmo fica na própria máquina
   Para se estabelecer uma conexão com algum banco de dados, é necessário que algum usuário do sistema o acesse. No nosso caso, é o root, administrador do banco de dados. Por padrão, ele não tem senha
 */  
   mysql_select_db("PessoasDb",$con); // Agora nós fazemos a conexão ativa ficar apontada para a base de dados PessoasDb. Sendo assim, toda instrução SQL será utilizada nesta base de dados

  // Jogando nas variáveis os  valores recebidos pelo formulário
  $nome = $_REQUEST['nome'];
  $sobrenome = $_REQUEST['sobrenome'];
  $sexo = $_REQUEST['sexo'];
  $idade = $_REQUEST['idade'];
  $profissao = $_REQUEST['profissao'];

  // Inserindo as informações em base de dados
  mysql_query("INSERT INTO Pessoas (nome,sobrenome,sexo,idade,profissao) values ('$nome','$sobrenome','$sexo','$idade','$profissao')");

Agora faça o teste. Quando fizer um cadastro, acesse a base de dados para ver se o que voçê digitou foi inserido na base de dados ou não. Ao se conectar, executa a seguinte instrução SQL: "Select * from Pessoas". O '*' significa todas as colunas. Nos próximos posts, ensinarei como fazer consultas e listagens com PHP.

Postado por às Nenhum comentário:
Assinar: Postagens (Atom)