How to echo an error in my page so that I can style it?

Question

In my php script, I have a simple username/ email exists condition, but I want to put the error (should it exist) somewhere in my html, so that I can style it and position it over my form. Echo just puts it top-left. How can I do that? Setting a variable seems like not the optimal solution.

<?php
require('connect.php');
if(isset($_POST["register"])){
    $username = $_POST["username"];
    $password = $_POST["password"];
    $email = $_POST["email"];

    $username = mysqli_real_escape_string($conn, $username);
    $password = mysqli_real_escape_string($conn, $password);
    $email = mysqli_real_escape_string($conn, $email);

    $conflictUserQuery = "SELECT username FROM members WHERE username='$username'";
    $conflictUserResult = mysqli_query($conn, $conflictUserQuery);
    $conflictUserRow = mysqli_fetch_array($conflictUserResult, MYSQLI_ASSOC);
    $conflictMailQuery = "SELECT email FROM members WHERE email='$email'";
    $conflictMailResult = mysqli_query($conn, $conflictMailQuery);
    $conflictMailRow = mysqli_fetch_array($conflictMailResult, MYSQLI_ASSOC);
    if(mysqli_num_rows($conflictMailResult) ==1){
        echo "Could not be registered. Mail exists.";
    }
    elseif(mysqli_num_rows($conflictUserResult) ==1){
        echo "Could not be registered. Username exists.";
    }
    else{
        $registerQuery = mysqli_query($conn, "INSERT INTO members (username, password, email) VALUES ('$username', '$password', '$email')");
        if($registerQuery){
            echo "Thank You! you are now registered.";
        }
    }


}
?>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <title>Blog</title>
    </head>
    <body>
        <div class="flex-enable flex-center">
            <div class="flex-enable flex-center semiOverride flex-center px100">
                <div class="flex-enable flex-center flex-column">
                    <h2 class="big-white-title">Register.</h2>
                    <h3 class="medium-white-title">Be a part of this.</h3>
                <form class="flex-enable flex-center flex-column" method="POST">
                    <input class="form-input-text small-white-title" type="text" name="username" placeholder="Username">
                    <input class="form-input-text small-white-title" type="text" name="password" placeholder="Password">
                    <input class="form-input-text small-white-title" type="text" name="email" placeholder="e-mail">
                    <input class="form-button small-white-title" type="submit" name="register" value="Register">
                </form>
                <h3 class="small-white-subtitle">Or <a id="register" href="">login</a> if you have an account.</h3>
                </div>
            </div>
        </div>
        <div id="attribution">Photo by <a href="https://unsplash.com/@meindrittesauge">Sebastian Kanczok</a></div>
    </body>
</html>

"Setting a variable seems like not the optimal solution." Why not? That's the most straightforward solution. — , Nov 23 '17 at 18:24
I'm a beginner in coding, and I thought setting variables should be avoided because they would bloat memory. I would have thought something along the lines of a goto() or something similar. — mechanicarts, Nov 23 '17 at 18:25
@mechanicarts may I suggest a few changes to your code. **Please never store plain text passwords!** It is unsafe and PHP provides these two special function to hash passwords: [`password_hash()`](https://php.net/manual/en/function.password-hash.php) and [`password_verify()`](https://php.net/manual/en/function.password-verify.php) please use them. Make sure you [**don't escape passwords**](https://stackoverflow.com/q/36628418/5914775) or use any other cleansing mechanism on them before hashing. Doing so changes the password and causes unnecessary additional coding. (1/2) — Tom Udding, Nov 23 '17 at 18:29
And your script is at risk of [SQL Injection Attack](https://stackoverflow.com/q/60174/5914775). Have a look at what happened to [Little Bobby Tables](http://bobby-tables.com/). Even [if you are escaping inputs, its not safe!](https://stackoverflow.com/q/5741187/5914775). Use [prepared parameterized statements](https://php.net/manual/en/mysqli.quickstart.prepared-statements.php) instead. (2/2) Since you're a beginner these things are easily 'dismissed', but they provide you with the proper security to help you develop secure things in the future. — Tom Udding, Nov 23 '17 at 18:30
Did you mean something like this? `echo "Could not be registered. Mail exists.";` - if not, can you elaborate on your post in more detail? @mechanicarts — Funk Forty Niner, Nov 23 '17 at 18:32
I don't have to use any amount of security. I do get that it's not applicable in real-life scenarios, but it's an assignment and we're supposed to use only the basics, specifically for passwords we shouldn't care at all about encrypting them (someone did ask). Fred, no, I mean that I want to echo the error somewhere inside my page, outside the php script, specifically over my form. — mechanicarts, Nov 23 '17 at 18:34
@mechanicarts ok, well this could be is as simple as assigning a variable to it then `$error = "Error message here.";` or use a stylesheet with an `.error` class and apply it to an error element and simply place the `$error` where you want it to appear and with an `isset()`. — Funk Forty Niner, Nov 23 '17 at 18:37
Probably my solution! Can you write it in an answer so that we can close it? — mechanicarts, Nov 23 '17 at 18:37

Funk Forty Niner · Accepted Answer · 2017-11-23T18:49:12.663

As I stated in comments:

This could be is as simple as assigning a variable to it then, while using an inline CSS styling method:

$error = "<span style=\"color:red;\">Error message here.</span>";

You could also use a stylesheet with an .error class (that can be used for multiple instances as opposed to an #id) and apply it to an error element and simply place the $error variable where you would like it to appear and with an isset().

Note: The use of isset() is important since it will avoid a possible undefined variable notice.

You could also use a ternary operator:

http://php.net/manual/en/language.operators.comparison.php

which also works quite well for something like this, since you could set a default message for it.

As noted in comments, it'd be better to use a prepared statement and using a safe password storing/hashing method is highly advised.

References:

Very helpful, thanks! I was getting constant errors about undefined, then I saw your `isset()` addition. Works like a charm! — mechanicarts, Nov 23 '17 at 19:06
@mechanicarts Ahhhhh, and that's why I thought I'd add that to the answer earlier, just in case and to cover that base ;-) Glad to hear that you worked it all out, *cheers!* and you're most welcome. — Funk Forty Niner, Nov 23 '17 at 19:08

How to echo an error in my page so that I can style it?

1 Answers1