sábado, 21 de setembro de 2013

Novo Blog

O WebCodeFree mudou para Wordpress.

Novo endereço:

http://www.webcodefree.com.br/

quarta-feira, 3 de abril de 2013

CADASTRO PHP - PARTE 02

CADASTRANDO UM REGISTRO NO BANCO DE DADOS

CADASTRANDO UM REGISTRO NO BANCO DE DADOS COM PHP - PARTE 02

Dando prosseguimento a ultima postagem de PHP, estaremos realizando a inserção de dados na base de dados Mysql atraves de um formulário web.

O primeiro passo é criar um formulário HTML.

<html>

<head>

<title>Exemplo de Cadastro com PHP e Mysql</title>

</head>

<body>

<h3> Cadastro de Veículos </h3>

Modelo: <br>

Cor: <br>

<option value"amarelo"> Amarelo </option>

<option value"branco"> Branco </option>

<option value"prata"> Prata </option>

<option value"preto"> Preto </option>

<option value"verde"> Verde </option>

<option value"vermelho"> Vermelho </option>

</select> <br>

Fabricante: <br>

<option value"Citroen"> Citroen</option>

<option value"Chevrolet"> Chevrolet</option>

<option value"Pegeout"> Pegeout</option>

<option value"Renault"> Renault</option>

<option value"Volkswagen"> Volkswagen</option>

</select> <br>

Ano: <br>

Valor: <br>

</form>

</body>

</html>

Com o código acima criamos um simples formulario html, que transmitirá os seus dados através de um método de envio POST, quando os dados são enviados através do corpo de uma mensagem http, para um script do php chamado salvarveiculo.php os dados serão enviados atraves dos campos: txtmodelo, cbocor, txtano, cbofabricante e txtvalor, após a criação do formulário criaremos um script semelhante a primeira postagem realizando somente algumas alterações para capturar as informações passadas pelos campos do formulário html.

<?php

// INCLUINDO O ARQUIVO DE CONEXÃO CRIADA NA POSTAGEM PARTE 1
include 'conexao.config';

// DADOS A SEREM SALVOS NA TABELA tb_veiculo
$modelo = $_POST["txtmodelo"];
$cor = $_POST["cbocor"];
$ano = $_POST["txtano"];
$valor = $_POST["txtvalor"];
$fabricante = $_POST["cbofabricante "];

/* O $_POST[''] é uma entidade global do php que tem como função recuperar dados passados por um formulário atraves de um métodos POST, sendo necessário passar para ele o nome do campo INPUT que você deseja recuprar o valor. Observação, a entidade global $_POST só funciona se for descrita em maiúsculo, caso contrário o php interpreta o mesmo como uma simples variável.*/

// VARIAVEL COM A STRING DO COMANDO SQL
$query = "insert into tb_veiculo(modelo, cor, ano, fabricante, valor) values ('$modelo', '$cor', $ano, '$fabricante', $valor)";

// EXECUTANDO A STRING COM O COMANDO INSERT
mysql_query($query) or die(mysql_error());

// VERIFICANDO SE O REGISTRO FOI SALVO
if(mysql_affected_rows()==1){
echo "Veículo $modelo Salvo com Sucesso !!!";
}else{
echo "Erro ao Salvar o Veículo";
}

// ENCERRANDO A CONEXÃO COM A BASE DE DADOS.
mysql_close();

?>

Após criar o script php o mesmo deve ter o mesmo nome definido no atributo action do formulário html action="salvarveiculo.php" , por fim ao executar a inserção dos dados através do formulário os mesmos serão inserdidos na base de dados Mysql.

segunda-feira, 14 de janeiro de 2013

BACKUP DE BASE DE DADOS NO PhpMyAdmin

Realizar BackUp de Base de Dados no phpMyAdmin

1º Primeiramente iremos acessar o painel de controle do nosso host e ir a área de administração de banco de dados o chamado “phpMyAdmin”, veja figura:

2º No lado direito dessa tela nós temos todos os bancos criados, no meu, por exemplo, existe 4 banco s criados, veja figura:

3º Agora nós vamos clicar no banco em que queremos fazer o backup, logo após clicado aparecerá uma tela como esta, veja figura, nela esta mostrando todas as tabelas criadas para este banco, eu selecionei o banco chamado blog, nele existe 10 tabelas criadas, veja figura:

4º Agora vamos selecionar todas as tabelas deste banco, no link chamado “marcar todos”, veja figura:

5º Após marcarmos todas as tabelas, acima vamos clicar em “exportar”, veja figura:

6º Após clicarmos em exportar nos vamos ter uma tela de configuração para exportação, nela irá conter todos os formatos que podemos exportar, locais para aonde podemos exportar, ou seja, podemos exportar direto para o Server, e também podemos exportar compactado como .zip, e .gzip, veja figura:

7º Nesse exemplo vamos exportar como SQL, pois para importar novamente para outro host ou outro banco de dados fica bem mais fácil, logo após selecionado a opção de formato, e compactação vamos clicar no botão executar, fazendo isso ele irá aparecer a tela do zip aonde vai pedir para salvar este arquivo em algum diretório em seu computador, clique em salvar.

Pronto você acaba de fazer o backup do seu banco de dados.

Fonte: oficinadanet.com.br

INSERÇÃO DE IMAGENS

Imagens

A utilização de imagens em páginas HTML dá uma nova dimensão a página na distribuição de informação através de documentos HTML, tornando assim a informação mais atraente aos olhos do leitor, chamando muitas vezes mais a atenção do que os próprios textos descritos na página.

Uma página web deve trabalhar com as seguintes extensões de imagens: .png, .gif, .jpg, devido a aceitação destes nos navegadores utilizados nos dias hoje.

O arquivos de imagens podem estar presentes no mesmo diretório dos seus arquivos .html, porém recomenda se que os mesmo estejam em um diretório separado, devido a organização de seu site.

Para inserirmos uma imagem em uma página HTML utilizamos a tag <IMG> junto ao atributo SRC, que tem como função especificar o caminho do diretório da imagem a ser inserida.

Sintaxe:

Atributos do Comando <IMG>

· scr: Define o caminho do diretório onde se encontra a imagem a ser inserida.

· align: Alinhamento da imagem em relação ao texto.

· width: Largura da imagem.

· height: Altura da imagem.

· alt: Insere uma legenda na imagem.

Exemplo Prático:

LISTAS EM HTML

Listas

As listas são formas de estruturar documentos em forma de sumário, menu ou resumo de conteúdo. São muito boas na hora da criação menus ou tópicos de uma página HTML. Existem dois tipos de listas: as ordenadas e as não ordenadas. As listas ordenadas obedecem a uma ordem numérica, e as não ordenadas não obedecem a nenhuma ordem.

LISTAS ORDENADAS

Para definirmos uma lista ordenada, utilizamos a tag <OL> </OL>que determina o marcador ordenado para a nossa lista. Para definir os itens da lista por sua vez utilizamos o marcador <LI></LI>.

Sintaxe:

<ol>

</ol>

Podemos escolher o tipo de marcador de nossa lista, podendo ser numérico (1,2,3), romano, (I, II, III) ou caracter (a, b, c). Para isso utilizamos o atributo type na tag <OL></OL>.

Sintaxe:

</ol>

</ol>

</ol>

Exemplo Prático:

LISTAS NÃO ORDENADAS

Para definirmos uma lista não ordenada, precisamos utilizar a tag <UL></UL>. Para definir os itens da lista por sua vez utilizamos o marcador <LI></LI>.

Sintaxe:

<ul>

</ul>

Podemos escolher o tipo de marcador de nossa lista, podendo ser um quadrado ou um círculo.

Sintaxe:

</ul>

</ul>

</ul>

Exemplo Prático:

Lista de Definição

Uma lista de definição é utilizada quando existem diversos tópicos curtos acompanhados de alguma descrição para o mesmo. Uma lista de definição é composta de três tags básica: <dl>, <dt>, <dd>, onde a tag <dl> delimita a área da lista, <dt> define um tópico e <dd> define a descrição do tópico.

Sintaxe:

<dl>

<dt> Tópico 1

<dd> Definição do Tópico 1</dd>

</dt>

<dt> Tópico 2

<dd> Definição do Tópico 2</dd>

</dt>

</dl>

Exemplo Prático:

BLOCOS DE TEXTO EM HTML

Blocos de Textos

Na linguagem HTML, utilizamos os blocos de textos para destacar algum texto da página dos demais, podendo assim atribuir uma formatação ou estilo personalizado a cada bloco.

O Comando <PRE>

O comando <PRE> </PRE> preserva os espaços, quebra de linhas e tabulações adicionadas ao documento HTML, sendo muito utilizado na hora de representar listagens e planilhas.

Sintaxe:

<pre> Texto Pré-formatado</pre>

Exemplo Prático:

O Comando <BLOCKQUOTE>

O comando <BLOCKQUOTE> </BLOCKQUOTE> é utilizado para destacar um bloco de texto. Em alguns navegadores o bloco destacado fica em itálico, porem em outros é adicionado uma tabulação ao bloco de texto, destacando-o dos demais.

Sintaxe:

<blockquote> Texto Destacado </blockquote>

Exemplo Prático:

O Comando <ADDRESS>

O comando <ADDRESS> </ADDRESS> marca o inicio e o fim de um bloco de endereço utilizado para especificar a autoria do documento HTML.

Sintaxe:

<address> Texto do Endereço </address>

Exemplo Prático:

quinta-feira, 3 de janeiro de 2013

PROPRIEDADES CSS - BORDER

Propriedades Border

A propriedade Border define os tipos de bordas que podem ser associados a uma página, bloco de texto ou a um elemento.

As propriedades para as bordas são as listadas abaixo:

Propriedade	Efeito
border-width:	espessura da borda.
border-style:	cor da borda
border-top-width:	espessura da borda superior
border-top-style:	estilo da borda superior
border-top-color:	cor da borda superior;
border-right-width	espessura da borda direita
border-right-style	estilo da borda direita
border-right-color	cor da borda direita
border-bottom-width	espessura da borda inferior
border-bottom-style	estilo da borda inferior
border-bottom-color	cor da borda inferior
border-left-width	espessura da borda esquerda
border-left-style	estilo da borda esquerda
border-left-color	cor da borda esquerda
border-top	maneira abreviada para todas as propriedades da borda superior
border-right	maneira abreviada para todas as propriedades da borda direita
border-bottom	abreviada para todas as propriedades da borda inferior
border-left	maneira abreviada para todas as propriedades da borda esquerda
border	maneira abreviada para todas as quatro bordas

Valores válidos para as propriedades das bordas

color:

código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc

style:

none: nenhuma borda
hidden: equivalente a none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contínua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevo

width:

thin: borda fina
medium: borda média
thick: borda grossa
length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Existem vários estilos de bordas, definidos pela marcação border-style.

Visualize no exemplo abaixo:

<title>Efeitos de Borda com CSS</title>

<style type="text/css">

#borda1{

         border-color:#06F;

         border-width:thin;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         margin-bottom:10px;

#borda2{

         border-color:#06F;

         border-width:thin;

         border-style:dashed;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda3{

         border-color:#06F;

         border-width:thin;

         border-style:dotted;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

#borda4{

         border-color:#06F;

         border-style:double;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda5{

         border-color:#06F;

         border-width:thin;

         border-style:groove;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

#borda6{

         border-color:#06F;

         border-width:thin;

         border-style:inset;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda7{

         border-color:#06F;

         border-width:thin;

         border-style:ridge;

         width:250px;

         height:50px;

         float:left;

         clear:left

         margin-bottom:10px;

#borda8{

         border-color:#06F;

         border-style:outset;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

</style>

</head>

<body>

<div id="borda1">Borda Solid</div>

<div id="borda2">Borda Dashed</div>

<div id="borda3">Borda Dotted</div>

<div id="borda4">Borda Double</div>

<div id="borda5">Borda Groove</div>

<div id="borda6">Borda Inset</div>

<div id="borda7">Borda Ridge</div>

<div id="borda8">Borda OutSet</div>

</body>

</html>

Resultado:

Podemos também redimensionar a espessura de nossas bordas, usando a marcação border-width.

Podemos mudar de um modo geral o individual segue o exemplo baixo.

<title>Efeitos de Borda com CSS</title>

<style type="text/css">

#borda1{

         border-color:#F00;

         border-width:3px;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         margin-bottom:10px;

#borda2{

         border-color:#06F;

         border-left-width::5px;

         border-left-color:#F00;

         border-style:solid;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda3{

         border-color:#06F;

         border-right-width:5px;

         border-right-color:#F00;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

#borda4{

         border-color:#06F;

         border-style:solid;

         border-bottom-width:5px;

         border-bottom-color:#F00;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda5{

         border-color:#06F;

         border-width:thin;

         border-top-width:5px;

         border-top-color:#F00;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

</style>

</head>

<body>

<div id="borda1">Todas as Bordas</div>

<div id="borda2">Borda Esquerda</div>

<div id="borda3">Borda Direita</div>

<div id="borda4">Borda Inferior</div>

<div id="borda5">Borda Superior</div>

</body>

</html>

Resultado: