DESENVOLVIMENTO WEB
DESENVOLVIMENTO WEB
Embedded Files
SLIDES
SLIDES
APOSTILAS
APOSTILAS
Apostila Desenvolvimento de Sistemas WEb.pdfCaelum_html_css_javascript_php.pdfEXEMPLO DE CÓDIGOS
EXEMPLO DE CÓDIGOS
CÓDIGO BASE HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body> <!-- Conteúdo --> </body>
</html>
https://www.devmedia.com.br/html-basico-codigos-html/16596
TRABALHANDO COM SELECT
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- Conteúdo -->
<h1>UTILIZANDO A TAG SELECT<h1>
<label for="produto">Escolha o mês de se Aniversário:</label>
<select name = "mesnasc">
<option value = "1">Janeiro</option>
<option value = "2" >Fevereiro</option>
<option value = "3">Março</option>
<option value = "4">Abril</option>
<option value = "5">Maio</option>
<option value = "6">Junho</option>
<option value = "7">Julho</option>
<option value = "8">Agosto</option>
<option value = "9">Setembro</option>
<option value = "10">Outubro</option>
<option value = "11">Novembro</option>
<option value = "12">Dezembro</option>
</select>
</body>
</html>
COLOCANDO PHP NO HTML
COLOCANDO PHP NO HTML
<!DOCTYPE html>
<html>
<head>
<title>catalogo</title>
<meta charset="utf-8">
</head>
<body>
<h1>Cátalogo de produtos</h1>
<form action="index.php" method="post">
<label for="Nome">Nome do produto:</label>
<select name="catalogo" id="id_produto">
<option value="Monitor" id="1">Monitor</option>
<option value="Mouse" id="2">Mouse</option>
<option value="CPU" id="3">CPU</option>
<option value="Estabilizador" id="4">Estabilizador</option>
</select><br>
<input type="submit" name="ver" value="ver detalhes">
</form>
</body>
</html>
TRABALHANDO COM FUNCOES EM PHP
TRABALHANDO COM FUNCOES EM PHP
Abaixo temos 3 arquivos, Um será o arquivo login.php contendo o formulário. Ele recebe o login e a senha. O outro arquivo será o ValidaLogin.php que recebera via POST o que foi digitado no login e na senha e chamara a funcao ValidaLogin que se encontra no terceiro arquivo, o funcaoValidaLogin.php. Este arquivo, funcaoValidaLogin.php contera a função que compara o que foi digitado no formulário e as variáveis de login e senha que supostamente estaria no banco de dados.
ARQUIVO - LOGIN.PHP
<DOCTYPE html>
<html>
<head>
<title>FORMULARIO</title>
<meta charset="utf-8">
</head>
<body>
<form name="f_acad" action="validaLogin.php" method="POST">
<div>
<label for="login">Login:</label>
<input type="text" name="f_login">
</div>
<div>
<label for="senha">Senha:</label>
<input type="password" name="f_senha">
</div>
<input type="submit" value="ENVIAR">
</form>
</body>
</html>
ARQUIVO VALIDALOGIN.PHP
<?php
require_once("funcaoValidaLogin.php");
$login=$_POST["f_login"];
$senha=$_POST["f_senha"];
$validar=validaLogin($login,$senha);
if($validar==true){
echo "Acesso Liberado!";
}else{
echo "Acesso Negado!";
}
?>
ARQUIVO FUNCAOVALIDALOGIN.PHP
<?php
function validaLogin($login,$senha){
$loginBD="gerhard";
$senhaBD="1234";
if ($login==$loginBD && $senha==$senhaBD ){
return true;
}else{
return false;
}
}
?>
PROGRAMA QUE ACESSA O BANCO DE DADOS
PROGRAMA QUE ACESSA O BANCO DE DADOS
Faremos esse programa separado em três arquivos.
conexao.php
index.php
processa.php
index.php
index.php
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Cadastrar Usuario</h1>
<form method="POST" action="processa.php">
<div>
<label for="name">Nome:</label>
<input type="text" name="nome" placeholder="nome" />
</div>
<div>
<label for="email">E-mail:</label>
<input type="email" name="email" placeholder="email" />
</div>
<div>
<input type="submit" value="Cadastrar" />
</div>
</form>
</body>
</html>
processa.php
processa.php
<?php
include_once("conexao.php");
$nome=$_POST['nome'];
$email = $_POST['email'];
echo "nome: $nome<br>";
echo "cadastro feito com sucesso!";
$query="INSERT INTO usuarios(nome,email,dt_criacao)
values ('$nome','$email',now())";
$executa_query=mysqli_query($conexao,$query);
conexao.php
conexao.php
<?php
$servidor="localhost";
$usuario="root";
$senha="";
$banco="empresa";
$conexao=mysqli_connect($servidor,$usuario,$senha,$banco);
VAMOS APRENDER AGORA A FAZER UMA CALCULADORA
VAMOS APRENDER AGORA A FAZER UMA CALCULADORA
INDEX.PHP
INDEX.PHP
<DOCTYPE html>
<html>
<head>
<title>CALCULADORA EM PHP</title>
<meta charset="utf-8">
</head>
<body>
<form method="POST" action="calcular.php">
<label>Primeiro Numero:<input type="text" name="numero1">
</label>
<label>Segundo Numero:<input type="text" name="numero2">
</label><br>
Operacao:<br>
<label>
<input type="radio" name="Operacao" value="somar">
Somar
</label>
<label>
<input type="radio" name="Operacao" value="subtrair">
Subtrair
</label>
<label>
<input type="radio" name="Operacao" value="multiplicar">
Multiplicar
</label>
<label>
<input type="radio" name="Operacao" value="dividir">
Dividir
</label>
<br>
<input type="submit" name="calcular">
</form>
</body>
</html>
</label>
</label>
CALCULAR.PHP
CALCULAR.PHP
<?php
require_once "calculadora.php";
$numero1=$_POST['numero1'];
$numero2=$_POST['numero2'];
$operacao=$_POST['Operacao'];
$calculadora=new calculadora();
//setar valores
$calculadora->setNumero1($numero1);
$calculadora->setNumero2($numero2);
switch($operacao){
case 'somar':
$calculadora->somar();
break;
case 'subtrair':
$calculadora->subtrair();
break;
case 'multiplicar':
$calculadora->multiplicar();
break;
case 'dividir':
$calculadora->dividir();
break;
}
echo "resultado=".$calculadora->getTotal();
?>
CALCULADORA.PHP
CALCULADORA.PHP
<?php
class calculadora{
private $total;
private $numero1;
private $numero2;
function __construct(){
$this->total=0;
$this->numero1=0;
$this->numero2=0;
}
//getter e setter
public function setNumero1($parametro_numero1){
$this->numero1=$parametro_numero1;
}
public function setNumero2($parametro_numero2){
$this->numero2=$parametro_numero2;
}
//operacoes
public function somar(){
$this->total=$this->numero1+$this->numero2;
}
public function subtrair(){
$this->total=$this->numero1-$this->numero2;
}
public function multiplicar(){
$this->total=$this->numero1*$this->numero2;
}
public function dividir(){
$this->total=$this->numero1/$this->numero2;
}
public function getTotal(){
return $this->total;
}
}
FAZENDO UM CRUD
FAZENDO UM CRUD
<!--index.html - isso será nossa tela de Login-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TELA DE LOGIN</h1>
<form method="POST" action="login.php">
<div>
<label for="usuario" >USUARIO:</label>
<input type="text" name="txt_usuario">
</div>
<div>
<label for="senha">SENHA:</label>
<input type="password" name="txt_senha" >
</div>
<div>
<input type="submit" value="Entrar">
</div>
<a href="cadastroUsuario.html">Cadastre-se</a>
</form>
</body>
</html>
2- cadastroUsuarios.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TELA DE CADASTRO</h1>
<form method="POST" action="cadastro.php">
<div>
<label for="usuario" >USUARIO:</label>
<input type="text" name="txt_usuario">
</div>
<div>
<label for="senha">SENHA:</label>
<input type="text" name="txt_senha" >
</div>
<div>
<label for="email">EMAIL:</label>
<input type="email" name="txt_email" >
</div>
<div>
<label for="nivel">NIVEL:</label>
<select name="txt_nivel">
<option value="Admin">Administrador</option>
<option value="Professor">Professor</option>
<option value="Aluno">Aluno</option>
<option value="Outro">Outro</option>
</select>
</div>
<div>
<input type="submit" value="CADASTRAR">
</div>
<a href="index.html">LOGAR</a>
</form>
</body>
</html>
3- conexao.php
<?php
$ligar=mysqli_connect('localhost','root','','centro');
?>
4- criação do banco de dados
create database centro;
use centro;
create table tb_usuarios(
id int auto_increment,
usuario varchar(100),
senha varchar(8),
email varchar (100) unique,
perfil varchar(100),
primary key (id)
);
5- cadastro.php
<?php
require_once('conexao.php');
$usuario = $_POST['txt_usuario'];
$senha = $_POST['txt_senha'];
$email = $_POST['txt_email'];
$nivel = $_POST['txt_nivel'];
$sql_cadastro=mysqli_query($ligar,
"INSERT INTO tb_usuarios(usuario,senha,email,nivel) VALUES ('$usuario','$senha','$email','$nivel')"
);
if($ligar && $sql_cadastro){
echo "<script>
alert('Cadastrado com sucesso');
window.location.href='index.html';
</script>";
} else{
echo "<script>
alert('Falha no cadastro');
window.location.href='cadastroUsuario.html';
</script>";
}
?>
FAZENDO UMA CALCULADORA EM JAVASCRIPT
FAZENDO UMA CALCULADORA EM JAVASCRIPT
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
</head>
<body>
<h1>Calculadora</h1>
<label>Primeiro número:</label>
<input type="number" id="num1">
<br>
<br>
<label>Segundo número:</label>
<input type="number" id="num2">
<br>
<br>
<button onclick="somar()">Somar</button>
<button onclick="subtrair()">Subtrair</button>
<button onclick="multiplicar()">Multiplicar</button>
<button onclick="dividir()">Dividir</button>
<br>
<br>
<label>Resultado:</label>
<span id="resultado"></span>
<script>
function somar() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var resultado = num1 + num2;
document.getElementById("resultado").innerHTML = resultado;
}
function subtrair() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var resultado = num1 - num2;
document.getElementById("resultado").innerHTML = resultado;
}
function multiplicar() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var resultado = num1 * num2;
document.getElementById("resultado").innerHTML = resultado;
}
function dividir() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var resultado = num1 / num2;
document.getElementById("resultado").innerHTML = resultado;
}
</script>
</body>
</html>
Google Sites
Report abuse