Skip to content

PHP Code-Along Series (Part 3)

The final part of this series can serve as an extension to the activity done in Practical 9. Here, we will be going through how to utilize credentials stored in a database in simulating a mock login and logout functionality.

Video

Prep Files

DBConnection.php
<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbName = "newDB";

    $conn = new mysqli($servername, $username, $password, $dbName);

    if($conn->connect_error) die("Connection failed: " . $conn->connect_error);
auth.php
<?php
    // Nothing here
index.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php
    $message = "You are not logged in.";
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Log-in</title>

        <style>
            body {
                height: 100vh;
                margin: 0;
            }

            #main {
                background-color: lightgray;
                margin: 20vh auto;
                min-width: 600px;
                min-height: 600px;
                text-align: center;
                width: 40vw;
                height: 60vh;
            }

            h1 {
                padding: 4rem 0;
            }

            input,
            button {
                font-size: 24px;
                margin: 2rem 0;
                text-align: center;
            }

            input:not([type="submit"]):not([type="reset"]) {
                max-width: 500px;
                width: 60%;
            }
        </style>
    </head>

    <body>
        <div id="main">
            <h1 id="message"><?= $message; ?></h1>

            <div id="content">
                <button onclick="window.location.href='login.php';">Log In</button>
            </div>

        </div>

    </body>
</html>
login.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Log-in</title>

        <style>
            body {
                height: 100vh;
                margin: 0;
            }

            #main {
                background-color: lightgray;
                margin: 20vh auto;
                min-width: 600px;
                min-height: 600px;
                text-align: center;
                width: 40vw;
                height: 60vh;
            }

            h1 {
                padding: 4rem 0;
            }

            input,
            button {
                font-size: 24px;
                margin: 2rem 0;
                text-align: center;
            }

            input:not([type="submit"]):not([type="reset"]) {
                max-width: 500px;
                width: 60%;
            }

            #invalid_login_msg {
                background-color: lightpink;
                border: 2px solid red;
                font-size: 20px;
                margin: auto;
                padding: 1rem 0;
                width: 600px;
            }
        </style>
    </head>

    <body>
        <div id="main">
            <h1>Login Page</h1>

            <form action="auth.php" method="post" autocomplete="nope">
                <input type="text" name="username" id="username" placeholder="Username" autocomplete="false" />
                <input type="password" name="password" id="password" placeholder="Password" autocomplete="false" />

                <br />
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </form>
            <button onclick="window.location.href='.';">Go Back</button>
        </div>
    </body>
</html>
userTable.sql
DROP TABLE IF EXISTS `newDB`.`User`;
CREATE TABLE `newDB`.`User` (
    `id`                INT NOT NULL AUTO_INCREMENT,
    `username`          VARCHAR(20) NOT NULL,
    `password`          VARCHAR(100) NOT NULL,
    `name`              VARCHAR(100) NOT NULL,

    PRIMARY KEY(`id`)
);

INSERT INTO `newDB`.`User` (`username`, `password`, `name`) VALUES
('110358', 'Weloveqwerty123', 'Person');

Warning

The code-along video uses a different username, exercise caution if you plan on using this username instead.