Question

我们希望开发一个视频通话应用程序UI，如下所示。

用户点击的主要人员将留在主要div上，其余参与者应留在左侧和右侧。

所以，我们就像占据父母所拥有的所有空间一样。Current sample fiddle

<?php
include($_SERVER['DOCUMENT_ROOT'] . '/db.php');
?>

<!DOCTYPE html>
<html>
<head>
    <title>Login or SignUp</title>
</head>
<body>
    <h2>Signup</h2>

    <form action="" method="POST">
        Email:
        <input type="text" name="email"><br>
        Username:
        <input type="text" name="username"><br>
        Name:
        <input type="text" name="name"><br>
        Password:
        <input type="password" name="password"><br>
        Confirm Password:
        <input type="password" name="confirm_password"><br>
        <input type="submit" name="user_register" value="Register">
    </form>

<?php
if(isset($_POST['user_register'])){

    // Validate username
    if(empty(trim($_POST['username']))){
        $username_err = "Please Enter a Username.";
    } else {
        $sql = "SELECT user_id FROM user WHERE username = :username";

        if($statement = $connect->prepare($sql)){
            $statement->bindParam(':username', $username);
            $param_username = trim($_POST['username']);
            if($statement->execute()){
                if($statement->rowCount() == 1){
                    $username_err = "This username is already taken.";
                } else {
                    $username = trim($_POST['username']);
                }
            }
        unset($statement);
        }
    }

    // Validate Password
    if(empty(trim($_POST['password']))){
        $password_err = "Please enter a password.";
    } elseif(strlen(trim($_POST['password'])) < 6) {
        $password_err = "Password must have atleast 6 characters.";
    } else {
        $password = trim($_POST['password']);
    }

    // Validate confirm Password
    if(empty(trim($_POST['confirm_password']))){
        $confirm_password_err = 'Please confirm password.';
    } else {
        $confirm_password = trim($_POST['confirm_password']);
        if($password != $confirm_password){
            $confirm_password_err = "Password did not match.";
        }
    }

    // Validate email
    if(empty($_POST['email'])){
        $email_err = "Email is Required.";
    } else {
        $email = $_POST['email'];
        if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
            $email_err = "Invalid email format.";
        }
        else {
            $email = filter_var($email, FILTER_VALIDATE_EMAIL);
        }
    }

  // ##########################################################
  // And the main logic:
  // ##########################################################  
    // Check input errors before inserting in database
    if(empty($username_err) && empty($password_err) && empty($confirm_password_err) && empty($email_err)){
        $sql = "INSERT INTO user (username, user_name, user_password, user_email) VALUES (:username, :user_name, :password, :email)";
        if($statement = $connect->prepare($sql)){
            $statement->bindParam(':username', $param_username);
            $statement->bindParam(':password', $param_password);
            $statement->bindParam(':user_name', $param_user_name);
            $statement->bindParam(':email', $param_user_email);
            $param_username = $username;
            $param_password = password_hash($password, PASSWORD_DEFAULT);
            $param_user_email = $email;
            $param_user_name = $_POST['name'];
            if($statement->execute()){
                header("location: login.php");
            } else {
                echo "Something went wrong. Please try again later.";
            }
        }
        unset($statement);
    }
    unset($connect);
}
?>
</body>
</html>

关于如何实现UI的任何想法，如图所示？

视频通话应用程序UI

0 个答案: