washalbano

Olá! Execute: <?php echo password_hash('sua-senha', PASSWORD_BCRYPT); pra ver qual vai ser a hash da senha que você precisa. Ex.: $password = $_POST['password']; echo password_hash($password, PASSWORD_BCRYPT); Saída: $2y$10$JEoiDGG9CuATsxpjgoAiqOLJg/XZzKLr5n7lt.nq7XyfTHh42zB.m Dessa forma, vais poder usar essas hash no seu arquivo .sql Percebi que está iniciando session em arquivos de views. Não faça isso. A responsabilidade das views é apenas exibir. iniciar/encerrar sessões e conectar com database não são responsabilidades de uma view.

Olá! Talvez seja necessário definir qual é a url base, no seu html com: base href url é diferente de path. para include* e require*, use path // não precisa começar com http...

Não tenha medo de js. Seria algo +- assim: https://codepen.io/washalbano/pen/BaxMqYd?

Olá! Segue sugestão de solução: Crie uma modal para editar os dados pessoais E outra exclusiva para troca de senha: <div class="modal fade" id="profile" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="staticBackdropLabel">Editar</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="profile-form" method="post" action="profile/save"> <div class="row"> <div class="col-12"> <label>Nome:</label> <input type="text" class="form-control" value="<?= $nomeDoUsuario ?>" required> </div> <div class="col-md-6 mt-2"> <label>Telefone:</label> <input type="tel" class="form-control" value="<?= $telefone ?>" required> </div> <div class="col-md-6 mt-2"> <label>Email:</label> <input type="email" class="form-control" value="<?= $email ?>" required> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" form="profile-form" class="btn btn-warning">Atualizar <i class="fa-solid fa-floppy-disk"></i></button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="password-change" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="staticBackdropLabel">Trocar senha</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="password-form" method="post" action="profile/new-password"> <div class="row"> <div class="col-12"> <label>Senha atual:</label> <input type="password" class="form-control" required> </div> <div class="col-12 mt-2"> <label>Nova senha:</label> <input type="password" class="form-control" required> </div> <div class="col-12 mt-2"> <label>Confirmar nova senha:</label> <input type="password" class="form-control" required> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" form="password-form" class="btn btn-warning">Atualizar <i class="fa-solid fa-floppy-disk"></i></button> </div> </div> </div> </div>

sim. aquele e mais alguns

app/connection.php <?php // define a exibição de erros // REMOVA/COMENTE ESSA LINHA QUANDO ENVIAR PARA PRODUÇÃO error_reporting(E_ALL); //inicia a sessão session_start(); // defina as variáveis de conexão $config = [ 'db_host' => 'localhost', 'db_user' => 'root', 'db_pass' => 'my-secret-pw', 'db_name' => 'my-database', ]; // tenta estabelecer conexão: try { $sqli = new mysqli($config['db_host'], $config['db_user'], $config['db_pass']); } catch(Exception $e) { // se não conseguir estabelecer conexão, exibe erro exit('<p><b>Falha na conexão com o mysql</b>: '.$e->getMessage().'</p>'); } // tenta definir o padrão de caracteres if (!$sqli->set_charset('utf8')) { // se não conseguir definir o padrão de caracteres, exibe o padrão disponível exit("<p class='text-danger'>Seu charset não é utf8, chefe!<br>$sqli->character_set_name()</p>"); } // tenta selecionar/abrir o banco de dados para trabalhar if (!$sqli->select_db($config['db_name'])) { // se o banco de dados não for encontrado: exit("<p class='text-danger'>Banco de dados não encontrado, chefe!</p>"); } return $sqli; public_html/index.php <?php session_start(); if(!isset($_SESSION['user'])) { header('Location: login.php'); } ?> <!doctype html> <html lang="en" data-bs-theme="auto"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Hugo 0.118.2"> <title>Dashboard</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand">Império Verde</a> <?php echo "olá {$_SESSION['user']->name}!" ."<a href='logout.php' class='btn btn-danger'>Sair</a>"; ?> </div> </nav> <script src="assets/js/color-modes.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> public_html/login.php <?php // define errors vazio $errors = []; $login = $password = ''; // conexão com o database $sqli = require '../app/connection.php'; if ($_SERVER['REQUEST_METHOD'] == 'POST') { // recebe os dados do formulário $login = filter_input(INPUT_POST, 'email'); $password = filter_input(INPUT_POST, 'password'); // valida o login if (empty($login)) { $errors['email'] = 'O campo de email deve ser preenchido.'; } // valida a senha if (empty($password)) { $errors['password'] = 'O campo de senha deve ser preenchido.'; } // se não houver erro de input if (!count($errors)) { // escapa as strings para evitar sql injection $login_escaped = $sqli->real_escape_string($login); // use prepared statement pra evitar injections $stmt = $sqli->prepare('SELECT id, email, name, password FROM cadastros WHERE email = ?'); // executa a consulta $stmt->bind_param('s', $login_escaped); $stmt->execute(); $result = $stmt->get_result(); // se nenhum user foi encontrao if (!$result->num_rows) { $errors['password'] = 'Usuário ou senha incorreta.'; } // guarda o resultado da busca em $user $user = $result->fetch_object(); // verifica se a senha está correta if ($user && !password_verify($password, $user->password)) { $errors['password'] = 'Usuário ou senha incorreta.'; } // se não há erros de database if (!count($errors)) { // guarda o user na sessão $_SESSION['user'] = $user; // volta para o index header('Location: ./'); exit(); } } } ?> <!DOCTYPE html> <html lang="en" data-bs-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="assets/css/style.css"> </head> <body class="d-flex align-items-center py-4 bg-body-tertiary"> <main class="form-signin w-100 m-auto"> <form method='post'> <img class="mb-4" src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <h1 class="h3 mb-3 fw-normal">Please Log in</h1> <div class="form-floating"> <input type="email" class="form-control" name="email" value="<?= $login ?>" placeholder="[email protected]" required> <label for="floatingInput">Email</label> </div> <div class="form-floating"> <input type="password" class="form-control" value="<?= $password ?>" name="password" placeholder="Password" required> <label>Password</label> </div> <small class="d-block text-danger"><?= isset($errors['password']) ? $errors['password'] : '' ?></small> <small class="d-block text-danger"><?= isset($errors['email']) ? $errors['email'] : '' ?></small> <button class="btn btn-primary w-100 py-2 mt-4" type="submit">Login in</button> <p class="mt-5 mb-3 text-body-secondary">© 2024</p> </form> </main> </body> </html> database.sql drop schema if exists `my-database`; create schema `my-database`; use `my-database`; -- -- -- drop table if exists cadastros; create table cadastros ( id varchar(192) not null primary key, email varchar(192) unique, name varchar(192), password varchar(192), status tinyint(1) comment '0=desativado;1=ativo', created_by varchar(192), created_at timestamp default current_timestamp, updated_at datetime null ) Engine = InnoDB; insert into cadastros (id, email, name, password) values ( 'b2a22bfa-0fd0-406b-8904-ece488003e21', '[email protected]', 'Carlos Admin', '$2y$10$JnA1Tcf2ZhyFf7lPRqYptezjuaf3yv0FhOZCJWjiW18uQexNd1YL.' ); se preferir, pode baixar aqui: https://github.com/w-studies/carlos-fw login: [email protected] password: sua-senha

@Carlos FW Informatica a senha não pode ser gravada sem criptografia no banco de dados. Vou te escrever uma sugestão.

Olá! Se puder, envie um screenshot de como está e outro, de como deve ficar.

Transpilei o scss em css usando o vite

Agora com ícones:

É bem como o colega argumentou: Se não tiver o código fonte original, que transpilou nesse daí: Do zero!!! Comecei um aqui. Veja se te ajuda: https://codepen.io/washalbano/pen/YzBLVjv Visualiza bem em telas bem pequenas. mas ainda não está 100% responsivo

passe o link inteiro. ex.: 'link' => '?p=foto' ou: 'link' => 'https://google.com' sugiro passar até mais um atributo: 'target' => '_blank' e ao montar o menu: $navigator .= "<a href='$item[link]' target='$item[target]' $active>"

Olá! percebi que você tem forms dentro de outro form. Remova eles pra ver: Testei aqui. Funcionou:

Bom, pelo que pude perceber, você não precisa de uma lista. Então segue sugestão usando nav, com php: <?php $menu = [ [ 'icon' => 'fa-image', 'link' => 'foto', 'label' => 'Foto', ], [ 'icon' => 'fa-Vídeo', 'link' => 'videos', 'label' => 'Vídeos', ], [ 'icon' => 'fa-music', 'link' => 'musica', 'label' => 'Música', ], [ 'icon' => 'fa-users', 'link' => 'usuarios', 'label' => 'Usuários', ], [ 'icon' => 'fa-computer', 'link' => 'pcs', 'label' => 'Computadores', ], [ 'icon' => 'fa-microchip', 'link' => 'BIOS', 'label' => 'BIOS', ], ]; $page = $_GET['p'] ?? 'BIOS' ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>admtwbful menu buttons</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <?php $navigator = '<nav>'; foreach ($menu as $item) { $active = $item['link'] === $page ? ' class="active"' : ''; $navigator .= "<a href='?p=$item[link]'$active>" ."<div class='icon'><i class='fa-solid $item[icon]'></i></div>" ."<span>$item[label]</span>" .'</a>'; } echo $navigator.'</nav>'; ?> </body> </html> :root { --size: 50px; } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; background-color: #7f7f7f; } nav { /* Definindo este elemento como "flex" */ display: flex; /* Alinhamento Vertical para os elementos internos - no caso os "li's" */ align-items: center; /* Alinhamento Horizontal */ /* Obs. Para alinhar à esquerda, utilize: "start", para a direita: "end" e justificar + espaçar igualmente os "li's": "space-between" */ justify-content: center; gap: 4px; } nav a { /* Definindo os elementos "li" como flex e o alinhamento dos itens internos destes (mesmo conceito do bloco "ul" acima) */ display: flex; align-items: center; /* Definindo altura e largura inicial - e outros estilos apenas visualizar o comportamento */ max-width: var(--size); height: var(--size); /* border: 1px solid #ddd; */ box-shadow: inset 0 0 0 1px #ddd; /* Alterar o cursor do mouse quando "hover" no elemento */ color: white; /* Definindo uma transição suave quando "out hover" do elemento */ transition: all 0.5s ease; text-decoration: none; overflow: hidden; padding-right: 24px; } nav a span { opacity: 0; transition: all 0.5s ease; } nav a:hover, nav a.active { /* Muda a largura inicial do elemento "li" quando "hover" */ /* Obs. Aqui você define o tamanho/largura expandido que deseja - pode usar medidas relativas também ( % ) */ max-width: 300px; transition: max-width 1.75s ease; } nav a:hover span, nav a.active span { opacity: 1; } nav a:hover .icon, nav a.active .icon { border-top: 3px solid #157dad; } nav a:first-child { background: #e8c813; } nav a:nth-child(2) { background: #ad1515; } nav a:nth-child(3) { background: #15ad36; } nav a:nth-child(4) { background: #2112a8; } nav a:nth-child(5) { background: #157dad; } nav a:nth-child(6) { background: #000000; } nav a:nth-child(7) { background: #9f9f00; } nav .icon { border: 3px solid transparent; min-width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } screenshot de botão foto ativado + hover sobre o botão Computadores

Olá! Segue sugestão: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <header> <div class="icone-header"> <img src="LOGO (1).jpg" alt=""> </div> <div class="info-header"> <div class="logo"> <h3>Gestao de Banco</h3> </div> </div> </header> <!-- Fim do Header--> <section class="main"> <nav class="sidebar"> <br> <a href="home">Home</a> <hr> <br> <a href="dashboard">Dashboard</a> <hr> <br> <a href="previsao-de-clientes">Previsao de Clientes</a> <br> <hr> <a href="about">Conheça-nos</a> <hr> </nav> <main> </main> </section> <template id='home'> <h1>Bem vindo ao banco</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptatum commodi eos quas nobis natus quisquam perspiciatis, dolorum facere reprehenderit. Quaerat non nihil repellat possimus eligendi officiis molestiae laudantium accusantium?</p> </template> <template id='dashboard'> <h1>Dashboard</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, eius itaque, molestias praesentium porro dicta modi vel nostrum minus corrupti earum. Tempore exercitationem totam odio! Quae reiciendis alias ad quos!</p> </template> <template id='previsao-de-clientes'> <h1>Dashboard</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla inventore id aliquid nostrum! Illum omnis corrupti at earum quidem excepturi? Nam voluptas quas deleniti non quasi quos quisquam dicta. Saepe?</p> </template> <script src="assets/js/app.js"></script> </body> </html> const sidebar = document.querySelector('nav.sidebar') const main = document.querySelector('main') sidebar.onclick = (e) => { e.preventDefault() const { target } = e if (target.matches('a')) { const id = target.getAttribute('href') const template = document.querySelector(`template#${id}`) let mainContent = '<h1>Oops! Página não encontrada!</h1>' if (template) { mainContent = template.innerHTML } main.innerHTML = mainContent } } veja um exemplo funcionando aqui: https://codepen.io/washalbano/pen/xxMZYzx