<form action="javascript:login()">

Frank K Hosaka · Abril 27

Na base da tentativa e erro, estudei o motor XMLhttpRequest do Javascript para conectar o HTML com o PHP bem como carregar um outro HTML dentro de um arquivo HTML. Para testar o código tive que limpar o histórico do navegador e até fechar o navegador.


arquivo /Astudy/config.php
<?php
session_start();

define('DBNAME','teste');
define('HOST','localhost');
define('USER','root');
define('PASSWORD','');

$dbname=DBNAME;
$verEsquema="select * from sys.schema_table_statistics where table_schema='$dbname'";
$pdoTemp=new PDO('mysql:host='.HOST,USER,PASSWORD);
$resultado=$pdoTemp->query($verEsquema);
$dbExiste=$resultado->fetchColumn()===$dbname;
if(!$dbExiste){
    $pdo->exec("create database ".DBNAME);
    $pdo->exec("use ".DBNAME);
    $pdo->exec("CREATE TABLE `usuarios` (`id` bigint unsigned NOT NULL AUTO_INCREMENT,
        `nome` varchar(45) ,`email` varchar(45) ,`senha` varchar(255), PRIMARY KEY (`id`)
        ) ENGINE=InnoDB AUTO_INCREMENT=1");
    $nome="Frank K Hosaka";
    $email='frankhosaka@gmail.com';
    $senha='1234';
    $hashSenha=password_hash($senha,PASSWORD_BCRYPT);
    $pdo->query("insert into usuarios (nome,email,senha) values ('$nome','$email','$hashSenha')");
}
$pdo=new PDO('mysql:host='.HOST.';dbname='.DBNAME,USER,PASSWORD);

if(isset($_POST['email'])){
    $email=$_POST['email'];
    $senha=$_POST['senha'];
    $smt=$pdo->query("select * from usuarios where email='$email'");
    $usuario=$smt->fetchAll(PDO::FETCH_OBJ);
    if(count($usuario)==0){
        echo "não existe usuario com email $email";exit;
    }
    if(password_verify($senha,$usuario[0]->senha)){
        $_SESSION['id']=$usuario[0]->id;
        $_SESSION['nome']=$usuario[0]->nome;
        echo "liberado";
    } else {
        echo "senha incorreta";
        }
}

if(isset($_POST['usuario'])){
    $id=$_SESSION['id'];
    $nome=$_SESSION['nome'];
    echo json_encode(['nome'=>$nome,'id'=>$id]);
}

arquivo /Astudy/diario.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="java.js"></script>
<script>usuario()</script>
<body style="max-width:500px;margin:0 auto">
<script src="java.js"></script>
<script>carregaHTML('menu.html')</script>
<div id="conteudo"></div>

<table class="table table-striped table-sm">
    <tr class=fw-semibold><td>data<td>contaD<td>contaC<td>Valor<td>Histórico
    <tr><td>01/05/24<td>101<td>301<td>15,00<td>Salário
</table>


arquivo /Astudy/index.html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet">
<script src="java.js"></script>
<body class="bg-light w-25 m-auto">
<main class="w-100" style="margin-top:120px">
<form action="javascript:login()" id="formLogin">
    <div class="form-floating">
    <input name="email" value="frankhosaka@gmail.com" class="form-control">
    <label>Email</label>
    </div>
    <div class="form-floating">
    <input type="password" name="senha" value="1234" class="form-control">
    <label>Senha</label>
    <div>
    <input type="submit" class="w-100 btn btn-lg btn-primary">
</form>
</main>
</body>

arquivo /Astudy/java.js
function carregaHTML(url) {
  xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.onload = function() {
    if (xhr.status === 200) {
      htmlContent = xhr.responseText;
      conteudo.innerHTML = htmlContent;
    } 
  }
  xhr.send();
}

function login(){
  xhr = new XMLHttpRequest()
  formData=new FormData(formLogin)
  xhr.open('POST','config.php')
  xhr.onload = function() {
    if(xhr.status===200){
      if(xhr.responseText=='liberado'){
        window.location.href="menu.html";
      } else {
        alert(xhr.responseText)
      }  
    }
  }
  xhr.send(formData)
}
  
function usuario(){
  xmlhttp=new XMLHttpRequest();
  url = "config.php";
  formData = new FormData();
  formData.append('usuario','');
  xmlhttp.open("POST",url,true);
  xmlhttp.send(formData);
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      usuario=JSON.parse(xmlhttp.responseText)
      nomeUsuario.innerHTML=usuario.nome
      if(usuario.id==1){
        usuario1.classList.remove('d-none')
        usuario1.classList.add('d-block')
      }
    }
  }
}


arquivo /Astudy/menu.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="java.js"></script>
<script>usuario()</script>
<body style="max-width:500px;margin:0 auto">
<header id=cabecalho class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0"> 
Projeto HTML                                      
  <div class=dropdown>
    <button type=button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle=dropdown id=btmenu>
      Menu
    </button>
    <ul class="dropdown-menu" >
    <div id="usuario1" class="d-none">
        <li><a class=dropdown-item href='diario.html' >Diário</a></li>
        <li><a class=dropdown-item href='balancete.html'>Balancete</a></li>
      	<li><a class=dropdown-item href='pagar.html'>Pagar</a></li>
        <li><a class=dropdown-item href='outros.html'>Outros</a></li>
    </div>
      	<li><a class=dropdown-item href='orcamento.html'>Orcamento</a></li>
      	<li><a class=dropdown-item href='pessoas.html'>Pessoa</a></li>
      	<li><a class=dropdown-item href='produtos.html'>Produto</a></li>
      	<li><a class=dropdown-item href='venda.html'>Relatório de Venda</a></li>
        <li><a class=dropdown-item href='mercado.html'>Mercado Pago</a></li>
    </ul>
  </div>
  <div class="dropdown">
  <button class="btn btn-outline-primary dropdown-toggle" type="button" 
    data-bs-toggle="dropdown" aria-expanded="false">
    <spam id="nomeUsuario"></spam>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="index.html">Sair</a></li>
    <li><a class="dropdown-item" href="alterarSenha.html">Mudar a senha</a></li>
  </ul>
  </div>
</header>

Editado Maio 1 por Frank K Hosaka

Entrar

<form action="javascript:login()">

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades