terça-feira, agosto 22, 2017

TPI 2 - Criando um arquivo/formulário PHP com regras de negociação para a Listagem de Clientes - MySQL com HTML/PHP - Aula 9

Fazendo uma listagem de registro em PHP.

Nome do arquivo: lista.php

<html>
<head>
<meta charset="UTF-8">
</head>

<body>
<?PHP
include "conecta.php";

$sql="SELECT * FROM tb_clientes";

$result = mysqli_query($conexao,$sql);

echo
"<table border='1'>
<tr>
<th>NOME</th>
<th>ENDEREÇO</th>
<th>TELEFONE</th>
</tr>";

while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['nom_cli'] . "</td>";
echo "<td>" . $row['end_cli'] . "</td>";
echo "<td>" . $row['tel_cli'] . "</td>";
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>

terça-feira, agosto 08, 2017

TPI 2 - Criando um arquivo PHP com regras de negociação para a Consulta de Clientes - MySQL com HTML/PHP - Aula 8

No aquivo de consulta feito em PHP iremos utilizar um novo recurso do "MySQL", o mysqli_fetch_array. Este comando tem por função fazer um vetor de dados.


nome arquivo : grava_conscli

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<?php
include "conecta.php";

$nome=$_POST['txt_nome'];

echo "<br><br>Ola $nome, seu endereço e seu telefone serão Consultados.<br><br><br>";

//preparando variavel $sqlconsulta para consultar os dados
$sqlconsulta = "select * from tb_clientes where nom_cli='$nome'";

//executando a sqlconsulta
$resultado=@mysqli_query($conexao,$sqlconsulta);

if (!$resultado){
die ('Query invalida: '.@mysqli_error($conexao));
}
else{
"<br>";

$dados=mysqli_fetch_array($resultado);
echo "O Código da Cliente é ".$dados['cod_cli']."<br>";
echo "O Seu Nome é ".$dados['nom_cli']."<br>";
echo "O Seu endereço é ".$dados['end_cli']."<br>";
echo "O Seu Telefone é ".$dados['tel_cli']."<br><br><br>";

echo "Registro consultado com sucesso.";
}

mysqli_close($conexao);
?>
</body>
</html>

TPI 2 - Criando formulário de Consulta de clientes em HTML - MySQL com HTML/PHP - Aula 7

Este é o formulário de Consulta por nome feito no HTML.

nome do arquivo: conscli.html

<html>
<head>
<title> Consulta de Clientes </title>
<meta charset="UTF-8">
</head>

<body>
<form name="frm_conscli" method="post" action="grava_conscli.php">
<fieldset style = "width: 50%; margin: 100px auto;">
<legend>Consulta de Clientes</legend>
<fieldset><br>
Nome&nbsp&nbsp&nbsp<input type="text" name="txt_nome"><br><br>
</fieldset><br>
<input type="submit" name="btn_confirmar" value="Confirmar"><br>
</fieldset>
</form>
</body>
</html>

terça-feira, agosto 01, 2017

TPI 2 - Criando um arquivo PHP com regras de negociação para o Exclusão de Clientes - MySQL com HTML/PHP - Aula 6

Aqui faremos a regra de negócios em PHP para a exclusão do Cliente.

Nome do arquivo: grava_delcli.php

Conteúdo do arquivo:

<html>
<head>
<meta charset="UTF-8">
</head>

<body>
<?php
include "conecta.php";

$nome=$_POST['txt_nome'];

echo "<br><br>Ola $nome, seu endereço e seu telefone serão deletados.<br>";

//preparando variavel $sqldelete para apagar os dados
$sqldelete = "delete from tb_clientes where nom_cli='$nome'";

//executando a sqldelete
$resultado=@mysqli_query($conexao,$sqldelete);

        if (!$resultado){
die ('Query invalida: '.@mysqli_error($conexao));
}
else{
echo "Registro Excluido com sucesso.";
}


mysqli_close($conexao);
?>
</body>
</html>


Pronto, ja esta excluindo Clientes.
OBS: Quando for excluir algum Cliente devera ser digitado exatamente o nome do mesmo quando foi cadastrado.

TPI 2 - Criando formulário de Exclusão de clientes em HTML - MySQL com HTML/PHP - Aula 5

Agora vamos aprender a gerar o formulário de exclusão de Clientes.

Nome do arquivo: delcli.html

Conteúdo do arquivo:

<html>
<head>
<title>Exclusão de Clientes </title>
<meta charset="UTF-8">
</head>

<body>
<form name="frm_delcli" method="post" action="grava_delcli.php">
<fieldset style = "width: 50%; margin: 100px auto;">
<legend>Exclusão de Clientes</legend>
<fieldset><br>
Nome&nbsp&nbsp&nbsp<input type="text" name="txt_nome"><br><br>
</fieldset><br>
<input type="submit" name="btn_Confirmar" value="Confirmar"><br>
</fieldset>
</form>
</body>
</html>

Lembrando que esta é só a interface da tela para excluir o Cliente.

quarta-feira, julho 26, 2017

TPI 2 - Criando um arquivo PHP com regras de negociação para o Cadastro de Clientes - Aula 4

Ok, até agora ja esta pronto o banco de dados (loja), a tela visual de cadastro (HTML), o arquivo de configuração para transação entre o HTML e o MySQL (PHP). Precisamos agora fazer o arquivo que irá trabalhar com a transição entre o HTML e o MySQL.

arquivo:grava_cadcli.php

<html>
<head>
<meta charset="UTF-8">
</head>

<body>
<?php
include "conecta.php";

$nome=$_POST['txt_nome'];
$endereco=$_POST['txt_endereco'];
$telefone=$_POST['txt_telefone'];

echo "<br>Ola $nome, seu endereço é $endereco e seu telefone é $telefone<br>";

//preparando variavel $sqlinser para incersão de dados
$sqlinsert = "insert into tb_clientes(nom_cli, end_cli, tel_cli) Values ('$nome', '$endereco', '$telefone')";

//executando a sqlinsert
$resultado=@mysqli_query($conexao,$sqlinsert);

if (!$resultado){
die ('Query invalida: '.@mysqli_error($conexao));
}
else{
echo "Registro Cadastrado com sucesso.";
}

mysqli_close($conexao);
?>
</body>
</html>

Proto !!! Ja temos uma aplicação em PHP que cadastra no Banco de Dados MySQL.

TPI 2 - Criando arquivo de conexão em PHP - MySQL com HTML/PHP - Aula 3

Ja temos o banco de dados e a parte visual para o cadastro (HTML), agora falta programar a transação entre os dados que foram adicionados no Formulário HTML para que migrem ao banco de dados. Para que isso seja feito usaremos a linguagem PHP.
Primeiro temos que fazer um arquivo que defina: em qual maquina o servidor esta sendo usado? qual o nome de usuário do serviço MySQL? qual a senha do serviço MySQL? qual o nome do banco de dados utilizado? Este arquivo com todas essas informações é de extrema importância e deve se ter muita atenção ao redigi-lo:

nome do arquivo: conecta.php

<?php
$host='localhost';
$user='root';
$pass='';
$banco='loja';


$conexao = mysqli_connect($host,$user,$pass,$banco);
if ($conexao) {
echo "<br>Você se conectou ao serviço do MySQL";
}


else{
echo "<br>Você não esta conectado ao serviço MySQL";
}


$db = mysqli_select_db($conexao,$banco);
if ($db) {
echo "<br>Você se conectou ao Banco de dados";
}
else{
echo "<br>Você não se conectou ao Banco de dados";
}
?>

TPI 2 - Criando formulário de Cadastro de clientes em HTML - MySQL cpm HTML/PHP - Aula 2

Com o banco de dados ja criado iremos criar o documento HTML que servira de uma forma visual para que possa ocorrer o cadastro.

nome do arquivo: cadcli.html
<html>
<head>
<title>Cadastro de Clientes</title>
<meta charset="UTF-8">
</head>

<body>
<form name="frm_cadcli" method="post" action="grava_cadcli.php">
<fieldset style = "width: 50%; margin: 100px auto;">
<legend>Cadastro de Clientes</legend>
<fieldset>
Nome&nbsp&nbsp&nbsp&nbsp<input type="text" name="txt_nome" size="30" maxlength="30"><br><br>
Endereço<input type="text" name="txt_endereco" size="30" maxlength="30"><br><br>
Telefone<input type="text" name="txt_telefone" size="10" maxlength="10"><br>
</fieldset><br>
<input type="submit" name="btn_enviar" value="Enviar"><br>
</fieldset>
</form>
</body>
</html>

TPI 2 - Criando Banco de dados - MySQL com HTML/PHP - Aula 1

Neste pequeno resumo teremos instruções suficientes para fazer uma conexão com o banco de dados MySQL e o HTML/PHP. É bem fácil, vamos lá:

Aqui sera lançado um banco de dados bem simples

Crie no MySQL um banco de dados com o nome: "loja".

Neste banco de dados iremos inicialmente trabalhar com uma tabela: "tb_clientes".

script

Database: `loja`

Estrutura da tabela `tb_clientes`

CREATE TABLE `tb_clientes` (
  `cod_cli` int(11) NOT NULL,
  `nom_cli` varchar(30) NOT NULL,
  `end_cli` varchar(50) NOT NULL,
  `tel_cli` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

quinta-feira, fevereiro 09, 2017

TPI 1 - HTML - Aula 11 - Formulários

TPI 1 - HTML - Aula 11 - Formulários



Os formulários permite que possamos interagir com o visitante, solicitando nome, e-mail e outras informações que você acredite ser necessário para o seu site.
Os formulários são dividos em 2 partes. Uma parte onde descrevemos o código fonte em HTML (os campos, identificadores, botões, textos, etc) e um script ou aplicativo que possa processar as informações enviadas, como por exemplo um script em CGI.
Sem um script você apenas consegue enviar as informações digitada para seu e-mail e não guardá-las em um banco de dados, ou outra ação mais complexa. A tag principal para iniciar um Formulário é a TAG FORM.
Esta tag tem vários parâmetros, vamos ver uma sintaxe completa desta TAG.
<form action="mailto:seumail@provedor?subject=assunto" method="post" enctype="text/plain" name="nome_do_formulario">
</form> Vamos entender esta TAG :
FORM
Indica que estamos iniciando um Formulário
ACTION
Indica a ação que formulário terá, neste caso, o formulário terá os dados enviados para seu e-mail. Pode ser indicado também um servidor e o programa CGI que irá processar o formulário.
SUBJECT
É o assunto do e-mail.
METHOD
É o metodo da troca de dados; qual método o servidor usará para recerber o formulário. Os métodos podem ser POST ou GET, neste caso é POST, porque estamos enviando informação para o provedor. Já o método GET, faz com que o conteúdo do formulário seja anexado ao endereço da URL.
ENCTYPE
É como o formulário será enviado, aqui os dados serão formatados como texto puro.
CAMPOS DO FORMULÁRIO
TIPO TEXTO
<INPUT>

Define um campo de entrada em que o usuário entra com as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável, que possui nome e tipo específicos. Veja como seria :
&lt;FORM&gt; DIGITE SEU NOME &lt;input type="text" name="var_nome" size="35" maxlength="30" value="qq coisa"&gt; &lt;/FORM&gt;
TYPE="TEXT"
type = tipo - text = texto, ou seja o tipo de informação que aquele local receberá é do tipo texto.
NAME="VAR_NOME"
name = nome - var_nome é a variável que irá guardar o que for digitado naquele campo.
SIZE="35"
tamanho do objeto será de 35 pixels
MAXLENGTH="30"
comprimento máximo de caracteres será de 30.
VALUE = "QUALQUER COISA"
value = valor, ou seja, o campo já vem preenchido com o que vier neste parâmetro, neste caso virá escrito : qq coisa. Para alterar, basta selecionar o texto e escrever outro. Só utilize o value caso queira que um campo já venha preenchido com um valor, por exemplo : estado = SP, ai sim vale a pena.
Veja como ficaria :
DIGITE SEU NOME 
TIPO SENHA
E se você quiser que a pessoa entre com uma senha ? Pode usar o type="password" Este comando é idêntico ao comando INPUT TEXT. Sua única diferença é que, no lugar dos caracteres digitados, aparece um asterisco.
Vamos ver como seria :
&lt;FORM&gt; DIGITE A SENHA &lt;input type="password" name="var_senha" size="10" maxlength="6"&gt; &lt;/FORM&gt;
TYPE="PASSWORD"
type = tipo - password = senha, ou seja o tipo de informação que aquele local receberá é do tipo senha, exibirá asterisco ao invés do caracter digitado.
NAME="VAR_SENHA"
name = nome - var_senha é a variável que irá guardar o que for digitado naquele campo.
SIZE="35"
tamanho do objeto será de 10 pixels.
MAXLENGTH="6"
comprimento máximo de caracteres será de 6.
Veja como ficaria :
DIGITE A SENHA 
BOTÃO DE RADIO
E para fazer uma seleção exclusiva de uma lista de opções ? Precisamos inserir um "botão de rádio", que são associados a uma única variável. O conteúdo de um dos campos é atribuído à variável. Apenas um campo pode ser marcado, vamos ver um exemplo :
&lt;FORM&gt; Digite seu nome: &lt;input type = "text" name = "var_nome"&gt; Estado civil: &lt;input type= "radio" name="civil" value = "solteiro" checked&gt; Solteiro &lt;input type= "radio" name="civil" value = "casado"&gt; Casado &lt;input type= "radio" name="civil" value = "divorciado"&gt; Divorciado &lt;input type= "radio" name="civil" value = "viúvo"&gt; Viúvo&lt;br&gt; &lt;/FORM&gt;
Observe que todas as variáveis receberam o mesmo nome: CIVIL. Veja também que o único comando que tem o parâmetro CHECKED é o que contém a opção de solteiro,ou seja, esta opção já vem marcada como padrão.
Estas linhas reproduzirão :
Digite seu nome: 
Estado civil:  Solteiro  Casado  Divorciado  Viúvo
OS NOMES DAS OPÇÕES OBRIGATÓRIAMENTE DEVEM SER IGUAIS, SE FOREM DIFERENTES, ESTE POSSIBILITARÁ MARCAR VÁRIAS OPÇÕES !!!
CHECKBOX
Para poder selecionar várias opções, usamos o CHECKBOX. Ele se parece como Radio Button, mas tem uma diferença significativa. Nele mais de um campo associado a uma variável pode ser selecionado. Veja o exemplo:
&lt;FORM&gt; Digite seu nome: &lt;input type = "text" name="var_nome"&gt; Estado civil: &lt;input type="radio" name="civil" value = "solteiro" cheked&gt; Solteiro &lt;input type="radio" name="civil" value = "casado"&gt; Casado&lt; &lt;input type="radio" name="civil" value = "divorciado"&gt; Divorciado &lt;input type="radio" name="civil" value = "viúvo"&gt; Viúvo Documentos : &lt;INPUT TYPE="checkbox" name="teste" value="1"&gt; Carteira de Trabalho &lt;INPUT TYPE="checkbox" name="teste" value="2"&gt; CIC &lt;INPUT TYPE="checkbox" name="teste" value= 3"&gt; Carteira de Identidade &lt;/FORM&gt;
Veja o que isso reproduz :
Digite seu nome: Estado civil:
 Solteiro  Casado  Divorciado  Viúvo
Documentos :
 Carteira de Trabalho
 CIC
 Carteira de Identidade
LISTA DE OPÇÕES
o comando <SELECT> ... </SELECT> define e exibe uma lista de itens que podem ser selecionados pelo usuário.

Cargo pretendido: 
&lt;SELECT NAME="CARGO"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;
Veja como ficaria :

Fazer uma opção já vir selecionada :
Cargo pretendido:
&lt;SELECT NAME="CARGO"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION SELECTED&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;
Reproduz:

Mostrar mais de uma linha.
Quando o parâmetro SIZE é omitido, a lista somente é aberta se a seta for pressionada. Se este parâmetro for especificado, ela é exibida aberta, mostrando a quantidade de linhas especificadas pelo parâmetro, independente da quantidade de itens da lista. 
&lt;SELECT NAME= "CARGO" size="3"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION SELECTED&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;
Veja o resultado :

Selecionar mais de uma opção
&lt;SELECT NAME = "TESTE" SIZE="7" MULTIPLE&gt;&lt;br&gt; &lt;OPTION&gt;item 1&lt;br&gt; &lt;OPTION&gt;item 2&lt;br&gt; &lt;OPTION&gt;item 3&lt;br&gt; &lt;OPTION&gt;item 4&lt;br&gt; &lt;OPTION&gt;item 5&lt;br&gt; &lt;OPTION&gt;item 6&lt;br&gt; &lt;OPTION&gt;item 7&lt;br&gt; &lt;OPTION&gt;item 8&lt;br&gt; &lt;OPTION&gt;item 9&lt;br&gt; &lt;OPTION&gt;item 10&lt;br&gt; &lt;OPTION&gt;item 11&lt;br&gt; &lt;OPTION&gt;item 12&lt;br&gt; &lt;OPTION&gt;item 13&lt;br&gt; &lt;OPTION&gt;item 14&lt;br&gt; &lt;OPTION&gt;item 15&lt;br&gt; &lt;/SELECT&gt;
O Resultado será :

ÁREA DE TEXTO
Define uma caixa de digitaçao, onde o usuário pode digitar livremente um texto.
&lt;form&gt; digite seus comentários:&lt;br&gt; &lt;TEXTAREA NAME="comentarios" ROWS="7" COLS="50"&gt; &lt;/TEXTAREA&gt;
Abaixo, o resultado :
digite seus comentários:

ROWS
Número de linhas que terá a área d e texto.
COLS
Número de colunas que terá a área de texto.
ENVIANDO DADOS
O Botão SUBMIT é responsável por enviar os dados do formulário para o e-mail que está no parâmetro ACTION da TAG FORM.


 ou
LIMPANDO FORMULÁRIO
O Botão RESET limpa todo o formulário, voltando os valores aos padrões definidos inicialmente. 

TPI 1 - HTML - Aula 10 - Tabelas

TPI 1 - HTML - Aula 10 - Tabelas


Para fazer uma tabela as principais TAGS são TABLE, TR, TH e TD.
TABLE
Tabela é a principal para inserir a tabela, seus parâmetros são :
  • bgcolor="cor" = define uma cor de fundo para a tabela
  • background="arquivo.ext" - define uma figura de fundo para tabela
  • bordercolor="cor" - define uma cor para a borda
  • align="alinhament0" - define alinhamento para tabela (center, right ou left que é padrão).
  • bordercolordark="cor" - define uma cor para os lados mais escuros da tabela
  • bordercolorlight="cor" - define uma cor para os lados para claros da tabela
  • cellpadding="n" - define o espaçamento do texto e a borda da tabela
  • cellspacing="n" - define o espaçamento entre as células.
  • width="n%" define o tamanho da tabela em pixels ou porcentagem
TR
Table Row - Linha da Tabela, para cada linha nova é necessário abrir uma linha e colocar dentro dela todas as células.
  • BGCOLOR="cor" - define uma cor de fundo para a linha
TH
Table Head - Cabeçalho da Tabela - é usado para colocar título nas colunas, o texto já vem em negrito e centralizado.
  • BGCOLOR="cor" - define uma cor de fundo para a célula de cabeçalho
TD
Table Data - Dados da Tabela - é a tag que usamos para inserir os dados da tabela.
  • BGCOLOR="cor" - define uma cor de fundo para a célula.
  • BACKGROUND="arquivo.ext" define uma figura de fundo para célula.
  • COLSPAN="n" define a quantidade de colunas que devem ser mescladas.
  • ROWSPAN="n" define a quantidade de linhas que devem ser mescladas.
Veja como ficaria uma tabela simples, com borda espessura 2, alinhamento centralizado :
&lt;table border="2" align="center" width="60%"&gt; &lt;tr&gt; &lt;th bgcolor="red" rowspan="6"&gt;A&lt;br&gt;T&lt;br&gt;E&lt;br&gt;N&lt;br&gt;Ç&lt;br&gt;Ã&lt;br&gt;O&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th colspan="2"&gt; TABELA DE MATÉRIAS &lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt; PROFESSOR(A) &lt;/th&gt; &lt;th&gt; MATÉRIA &lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Valéria &lt;/td&gt; &lt;td&gt; O.S.A. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Nelson &lt;/td&gt; &lt;td&gt; P.R.C. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Luiz &lt;/td&gt; &lt;td&gt; T.B.D.&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;
A
T
E
N
Ç
Ã
O
TABELA DE MATÉRIAS
PROFESSOR(A)MATÉRIA
ValériaO.S.A.
NelsonP.R.C.
LuizT.B.D.
TABELA DE ALUNOS
E
T
EM
A
U
Á
NOMEIDADE
Valéria20
Adallirio18
Renato22
PARÂMETRO FRAME NAS TABELAS
PARÂMETRORESULTADO
voidretira todas as bordas da tabela
aboveexibe apenas a borda do lado superior
hsidesremove as bordas laterais
vsidesexibe apenas as bordas laterais
lhsexibe apenas a borda esquerda
rhsexibe apenas a borda direita
boxexibe borda em todos os cantos
borderexibe as quatro bordas