Ir para conteúdo
Fórum Script Brasil
  • 0

menu.html

Frank K Hosaka

Perguntado por Frank K Hosaka,

 Share

Pergunta

Frank K Hosaka

Frank K Hosaka

Postado
Postado (editado)

Usando o método da tentativa e erro, bem como a ajuda da Gemini, consegui montar o meu segundo arquivo html. Eu fiquei surpreso por ele ter funcionado, o código JavaScript funcionou, mesmo que tenha sido colocado no topo da página. Desconfio que o JavaScript conseguiu encontrar o <div id=usuario1> bem como <spam id=nomeUsuario> graças ao marcador <!DOCTYPE html>. Agora o meu desafio é reutilizar esse mesmo código em várias páginas que virão adiante, eu não consegui utilizar o marcador <include> do HTML, assim vou usar o motor xmlhttp do JavaScript. Espero que dê certo. 

arquivo menu.html
<!DOCTYPE html>
<html lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
      crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
      crossorigin="anonymous"></script>
  <style>
      a {color:blue;text-decoration:none}
      a:hover {color:black;}
      body {align-items: center;background-color: #f5f5f5;}
      form {margin:0}
      .linha {line-height:0px}
      summary{list-style:none}
      td {white-space: nowrap}
  </style>
  <title>Projeto HTML</title>

<script>

  // pega o id e nome do usuário no php e amplia o menu de opções se o usuario = 1
  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')
      }
    }
  }

</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="?ControleLogin.sair">Sair</a></li>
    <li><a class="dropdown-item" href="?ControleLogin.alterarsenha">Mudar a senha</a></li>
  </ul>
  </div>
</header>

  
arquivo config.php
<?php

// ...

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

 

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
Frank K Hosaka

Frank K Hosaka

Postado
  • Autor
Postado (editado)

Consegui carregar um arquivo html dentro de outro arquivo html com a ajuda do JavaScript. Praticamente o código do menu.html vai ser o código padrão de todos os outros arquivos html. 

Para testar esses códigos, eu tive que limpar o histórico do navegador, fechar o navegador, abrir o navegador, e depois testar o código.

Como o código menu.html precisa de duas funções do JavaScript, decidi colocar todas as funções do JavaScript num só arquivo que chamei de java.js: 


arquivo /HTML/basicoMenu.html
<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.php">Sair</a></li>
    <li><a class="dropdown-item" href="alterarSenha.html">Mudar a senha</a></li>
  </ul>
  </div>
</header>


arquivo /HTML/config.php
<?php
session_start();
$mysqli=new mysqli("localhost","root","","diario");
if(isset($_POST['email'])) {
    $email=$_POST['email'];
    $senha=$_POST['senha'];
    $query=$mysqli->query("select * from tbusuario where email='$email'");
    $usuario=$query->fetch_assoc();
    $validaEmail=$usuario['email'];
    if(!$validaEmail) {
        echo "Dados inválidos";
        exit;
    }
    $confirmar=$usuario['password'];
    $validaSenha=password_verify($senha,$confirmar);
    if(!$validaSenha) {
        echo "Dados inválidos!";
        exit;
    }
    $_SESSION['id']=$usuario['id'];
    $_SESSION['nome']=$usuario['name'];
    echo "liberado";
}
if(isset($_POST['usuario'])){
    $nome=$_SESSION['nome'];
    $id=$_SESSION['id'];
    echo json_encode(['nome'=>$nome,'id'=>$id]);
}

arquivo /HTML/index.html
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Projeto HTML</title>
<script src="java.js"></script>
<body class="d-flex text-center bg-light">
<main class="w-25 m-auto" style="padding-top:160px">
  <form id="formLogin" action="javascript:void(0)">
    <h1 class="h3 mb-3 fw-normal">Projeto HTML</h1>
    <div id="mensagem"></div>
    <div class="form-floating">
      <input type="email" class="form-control" name=email id=email autofocus required>
      <label for="floatingInput">Email</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" name="senha" id="senha" required
        ondblclick="senha.type='text'">
      <label for="floatingPassword">Duplo click para ver a Senha<label>
    </div>
    <input class="w-100 btn btn-lg btn-primary" type="submit" value="Entrar" onclick="login()">
  </form>
</main></body>

arquivo /HTML/java.js
function carregarBasicoMenu(){
    xhr = new XMLHttpRequest();
    externalHTMLURL = 'basicoMenu.html';
    xhr.open('GET', externalHTMLURL);
    xhr.onload = function() {
      if (xhr.status === 200) {
        externalHTML = xhr.responseText;
        menu.innerHTML = externalHTML;
      } else {
        console.error('Error loading external HTML:', xhr.statusText);
      }
    }
    xhr.send();
}


function login() {
    xmlhttp=new XMLHttpRequest();
    url = "config.php";
    formData = new FormData(document.getElementById("formLogin"));
    xmlhttp.open("POST",url,true);
    xmlhttp.send(formData);
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
        if(xmlhttp.responseText=="liberado"){
          window.location.href="menu.html"
        }
        mensagem.innerHTML=xmlhttp.responseText;
      }
    }
  }

function usuario () {
    // pega o id e nome do usuário no php e amplia o menu de opções se o usuario = 1
    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 /HTML/menu.html
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
    crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
    crossorigin="anonymous"></script>
<style>
    a {color:blue;text-decoration:none}
    a:hover {color:black;}
    form {margin:0}
    .linha {line-height:0px}
    summary{list-style:none}
    td {white-space: nowrap}
</style>
<title>Projeto HTML</title>
<body class="text-center bg-light w-25 m-auto">
<script src="java.js"></script>
<script>carregarBasicoMenu();usuario()</script>
<div id="menu"></div>

 

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...