个人中心
gpt4 book ai didi

php - 我做了一个登录系统，但是，我不知道如何设置其中的一些样式

转载 作者：行者123 更新时间：2023-12-04 15:21:23 25 4
gpt4 key购买 nike

所以，我一直在设计一个登录页面，到目前为止它运行得非常好。但是，我无法在出现错误消息的地方设置样式。这是代码:

-- login.php 文件--


<?php
include_once '../resources/session.php';
include_once '../resources/database.php';
include_once '../resources/utilities.php';

if(isset($_POST['loginBtn'])){

    // array to hold errors
    $form_errors = array();

    // validate
    $required_fields = array('username', 'password');

    $form_errors = array_merge($form_errors, check_empty_fields($required_fields));

    if(empty($form_errors)){

        // collect form data
        $user = $_POST['username'];
        $password = $_POST['password'];

        //  check if user exists in the database
        $sqlQuery = "SELECT * FROM users WHERE username = :username";
        $statement = $db->prepare($sqlQuery);
        $statement->execute(array(':username' => $user));

        while($row = $statement->fetch()){
            $id = $row['id'];
            $hashedpassword = $row['password'];
            $username = $row['username'];

            if(password_verify($password, $hashedpassword)){
                $_SESSION['id'] = $id;
                $_SESSION['username'] = $username;
                redirectTo('dashboard');
            }
            else{
                $result = flashMessage("Invalid username or password");
            }
        }

    }
    else{
        if(count($form_errors) == 1){
            $result = flashMessage("There was 1 error in the form");
        }
        else{
            $result = flashMessage("There were " .count($form_errors). " errors in the form");
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Login</title>
        <link rel="stylesheet" href="../css/loginstyles.css">
        <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Open+Sans">
        <script src="https://kit.fontawesome.com/586353a8fa.js" crossorigin="anonymous"></script>
        <style>
            body{
                font-family: 'Open Sans', serif;
            }
            .links{
                text-decoration: none;
                color: black;
                font-size: 70%;
            }
            .links:hover{
                color: #21ada8;
            }

        </style>
    </head>
    <body>
        <a href="../html/index.html"><i class="far fa-arrow-alt-circle-left" style="color: #21ada1;"></i></a><br>
        <img src="../img/loginimg.svg" alt="login" style="width: 55%; margin-top: 17%;">
        <div class="login-wrapper">
            <h2 class="formtitle">Login Form</h2>
            <?php if(isset($result)) echo $result; ?>
            <?php if(!empty($form_errors)) echo show_errors($form_errors); ?>
            <form class="loginform" action="" method="post">
                    <table>
                        <tr>
                            <td><input type="text" value="" name="username" autocomplete="off" placeholder="username" class="usernameinput" style="height: 80px; border: none;"></td>
                        </tr>
                        <tr>
                            <td><input type="password" value="" name="password" autocomplete="off" placeholder= "password" class="passwordinput"style="width: 300px; height: 80px; margin-top: 2%; border: none;"></td>
                        </tr>
                        <tr>
                            <td><a class="links" href="forgot_password.php">Forgot your Password?</a></td>
                        </tr>
                        <tr>
                            <td><input style="float: right;" type="submit" name="loginBtn" class="loginBtn" value="Login"></td>
                        </tr>
                        <tr>
                            <td><a class="links" href="signup.php">Not a Member Yet? Sign Up!</a></td>
                        </tr>
                    </table>
            </form>
        </div>
    </body>
</html>

-- loginstyles.css 文件--

.loginform{
    margin-left: 70%;
  margin-top: -30%;
}

.loginform input{
    width: 100%;
}

.usernameinput:focus{
    outline: none;
    background:
      linear-gradient(#21ada8, #00ced1) center bottom 5px /calc(100% - 10px)2px no-repeat;
}

.passwordinput:focus{
    outline: none;
    background:
      linear-gradient(#21ada8, #00ced1) center bottom 5px /calc(100% - 10px)2px no-repeat;
}

.loginBtn{
    border: none;
    text-decoration: none;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: #00ced1;
    margin-top: 5%;
    margin-bottom: 5%;
}

.loginBtn:focus{
  outline: none;
}

.loginBtn:hover{
    background-color: #00a3a6;
}

.usernameinput::placeholder{
    color: #c0c0c0;
}

.passwordinput::placeholder{
    color: #c0c0c0;
}

.usernameinput{
    background:
      linear-gradient(#c0c0c0, #c0c0c0) center bottom 5px /calc(100% - 10px)2px no-repeat;
    font-size: 18px;
}

.passwordinput{
    background:
      linear-gradient(#c0c0c0, #c0c0c0) center bottom 5px /calc(100% - 10px)2px no-repeat;
  font-size: 18px;
}

.formtitle{
    font-size: 30px;
    margin-left: 73%;
    position: fixed;
  margin-top: -10%;
}

.backBtn {
  color: red !important;
}

.login-wrapper{
    // border: 1px solid gray;

}

-- utilities.php 文件--


<?php

/**
    * @param $required_fields_array, n array containing the list of all required fields
    * @return array, containing all errors
*/

// start

function check_empty_fields($required_fields_array){
        // initialize an array to store error messages
        $form_errors = array();

        // loop throgh the required fields array and popular the form error array
        foreach ($required_fields_array as $name_of_field){
            if(!isset($_POST[$name_of_field]) || $_POST[$name_of_field] == NULL){
                $form_errors[] = $name_of_field . " is a required field";

            }

        }

        return $form_errors;
}

/**
    * @param $fields_to_check_length, an array containing the name of fields
    * for which we wnt th check min required length e.g. array('username' => 4, 'email' => 12)
    * @return array, containing all errors
*/

function check_min_length($fields_to_check_length){
    //initialize an array to store error messages
    $form_errors = array();

    foreach($fields_to_check_length as $name_of_field => $minimum_length_required){
        if(strlen(trim($_POST[$name_of_field])) < $minimum_length_required){
            $form_errors[] = $name_of_field . " is too short, must be {$minimum_length_required} characters long";

        }
    }
    return $form_errors;
}

/**
    * @param $data, store a key/value pair array where key is the name of the form control
    * in this case 'email' and value is the input entered by the user
    * @return array, containing email error
*/

function check_email($data){
    //initialize an array to store error messages
    $form_errors = array();
    $key = 'email';
    // check if the key email exists in data array
    if(array_key_exists($key, $data)){

        // check if the email field has a value
        if($_POST[$key] != null){

            // remove all illegal characters from email
            $key = filter_var($key, FILTER_SANITIZE_EMAIL);

            // check if input is a valid email addresss
            if(filter_var($_POST[$key], FILTER_VALIDATE_EMAIL) === false){
                $form_errors[] = $key . " is not a valid email address";
            }
        }
    }

    return $form_errors;
}

/**
    * @param $form_errors_array, the array holding all
    * errors which we want to loop through
    * @return string, list containing all error messages
*/

function show_errors($form_errors_array){
    $errors = "<p><ul style ='color: red;'>";

    // loop through error array and display all items in a list
    foreach($form_errors_array as $the_error){
        $errors .= "<li> {$the_error} </li>";
    }
    $errors .= "</ul><p>";
    return $errors;
}

function flashMessage($message, $passOrFail = "Fail"){
  if($passOrFail === "Pass"){
    $data = "<p style='padding: 20px; color: green; margin-left: 73%;'>{$message}</p>";
  }
  else{
    $data = "<p style='padding: 20px; color: red; margin-left: 73%;'>{$message}</p>";
  }

  return $data;
}

function redirectTo($page){
  header("Location: {$page}.php");
}

function checkDuplicateEntries($table, $column_name, $value, $db){

  try{
    $sqlQuery = "SELECT * FROM " .$table. " WHERE " .$column_name. "=:$column_name";
    $statement = $db->prepare($sqlQuery);
        $statement->execute(array(':$column_name' => $value));

    if ($row = $statement->fetch()){
      return true;
    }
    return false;
  }
  catch (PDOException $ex){
    // handle exception
  }

}

实际情况是，错误消息出现在屏幕底部而不是登录表单下方。而且，表单标题也被拖下，所以它看起来像这样:

enter image description here

非常感谢任何帮助!

提前致谢!

最佳答案

您应该将 show_errors 移动到表单底部并使用 html 格式。

 <div class="login-wrapper">
            <h2 class="formtitle">Login Form</h2>
            <?php if(isset($result)) echo $result; ?>
            <?php if(!empty($form_errors)) echo show_errors($form_errors); ?>
            <form class="loginform" action="" method="post">

类似于:

 <div class="login-wrapper">
            <h2 class="formtitle">Login Form</h2>
            <form class="loginform" action="" method="post">
<table>
                        <tr>
                            <td><input type="text" value="" name="username" autocomplete="off" placeholder="username" class="usernameinput" style="height: 80px; border: none;"></td>
                        </tr>
                        <tr>
                            <td><input type="password" value="" name="password" autocomplete="off" placeholder= "password" class="passwordinput"style="width: 300px; height: 80px; margin-top: 2%; border: none;"></td>
                        </tr>
                        <tr>
                            <td><a class="links" href="forgot_password.php">Forgot your Password?</a></td>
                        </tr>
<?php if(isset($result)){ ?>
                        <tr>
                            <td><span><?=$result?></span></td>
                        </tr>
<?php } ?>
<?php if(!empty($form_errors)){ ?>
                        <tr>
                            <td><span><?=show_errors($form_errors)?></span></td>
                        </tr>
<?php } ?>

                        <tr>
                            <td><input style="float: right;" type="submit" name="loginBtn" class="loginBtn" value="Login"></td>
                        </tr>
                        <tr>
                            <td><a class="links" href="signup.php">Not a Member Yet? Sign Up!</a></td>
                        </tr>
                    </table>

然后你会得到表结构中的错误。

我建议您可以使用一些现代结构来设置 html 的样式，例如 css flex。

关于php - 我做了一个登录系统，但是，我不知道如何设置其中的一些样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63206713/

25 4 0
文章推荐： typescript - 类型-graphql。 String、Boolean 和 Number 的联合类型失败
文章推荐： dataframe - 替换 Julia 中多种数据类型数组的子字符串
文章推荐： python - 我如何在 Python 中嵌入的 Discord 中换行？
文章推荐： 滚动页面时，Angular 9+ 和 ng-bootstrap 工具提示在固定元素上失败，是否有比我更好的修复方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com