chat box tutorial

Setting it up

Use the drop-down menu on the the top right of the page to navigate to phpmyamin VV

once you log in, click over on your database (it will be you username)

Now go ahead and press SQL

and enter the above code in the box to create a query

^ it should look something like this ^

Now press run and you just made a table that will hold all your chat information!

This is where you'll be able to view a log or an edit/delete unwanted chat messages you may get

Connecting

This is a the basic code for connecting your database to a .php file

You'll need to add in your information where "username" "password" and "database" is at

But lets go ahead and create 2 php files. name one get-messages.php and the other send-messages.php (also a index.html) it should look something like this

Now put this into get-messages.php

and this is into send-messages.php

<?php
// Database connection parameters
$servername = "localhost";
$username = "username"; // Your MySQL username
$password = "password"; // Your MySQL password
$dbname = "database"; // Your database name

// Connect to the database
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die(json_encode(array("success" => false, "error" => "Connection failed: " . $conn->connect_error)));
}

// Check if the request method is POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get message data from the POST request
    $name = $_POST['name'];
    $message = $_POST['message'];
    $image = $_FILES['image']['name'];

// Prepare SQL statement to insert message into database
    $stmt = $conn->prepare("INSERT INTO messages (name, message, image) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $name, $message, $image);

// Execute SQL statement
    if ($stmt->execute()) {
        // Fetch the newly inserted message
        $newMessageId = $stmt->insert_id;
        $result = $conn->query("SELECT * FROM messages WHERE id = $newMessageId");
        $newMessage = $result->fetch_assoc();
        
        // Return success response with the newly inserted message
        echo json_encode(array("success" => true, "message" => $newMessage));
    } else {
        // Return error response
        echo json_encode(array("success" => false, "error" => $stmt->error));
    }
} else {
    // If request method is not POST, return error response
    echo json_encode(array("success" => false, "error" => "Invalid request method"));
}

// Close the database connection

?>

okay, thats all you need for those!

Finish

html/css/html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <style>
        /* Chat window styles */
        #chat-window {
            width: 600px;
          height:700px;
            margin: 20px auto;
            border: 3px solid deeppink;
            padding: 20px;
            
          color:deeppink;
        }
        
        /* Chat messages styles */
        #chat-messages {
            height: 500px;
            overflow-y: auto;
            padding: 5px;
            border: 2px solid deeppink;
          margin-bottom: 20px;
        }
        
        /* Individual chat message styles */
        .chat-message {
            margin-bottom: 10px;
            padding: 5px;
            background-color: black;
          color:deeppink;
            font-family:monospace;
          font-size: 16px;
          border: 1px deeppink solid;
           border-radius: 10px;
        }
        
        /* Message sender's username styles */
        .message-sender {
            font-weight: bold;
            color: deeppink;
          
        }
        
        /* Message content styles */
        .message-content {
            margin-left: 0px;
          color:white;
          
        }
        
        /* Message image styles */
        .message-image {
            width: 30%;
            margin-top: 5px;
          
        }
        body{
          background-color:black;}
            .reply-button {
            margin-left: 5px;
            cursor: pointer;
            color: black;
            text-decoration: none;
              font-family:impact;
        }
        .reply-button:hover{
          color:deeppink;
        }
        input{
          color:white;
          background-color:black;
          border: deeppink 1px solid;
          padding: 3px;
          width:590px;
          margin-bottom:6px;
          
        }
        input:hover{
          border: white solid 1px;
        }
        button{
          color:white;
          background-color: black;
          border: solid white 2px;
          padding:15px;
          border-radius: 50px;
          margin: 10px;
        }
        button:hover{
          background-color: deeppink;
        }
        #message-input{
          height: 25px;
        }
        #name-input{
          width: 100px;
        }
              input[type="file"].custom-file-input {
            border: none;
            height: 0;
            display: none;
        }
        
        #status{
          font-size:13px;
          font-family:monospace;
          padding-bottom: 15px;
        }
         ::-webkit-scrollbar {
          width: 3px; /* Set the width of the scrollbar */
        }
        
        /* Customize scrollbar track */
        ::-webkit-scrollbar-track {
          background: black; /* Set track background color */
        }
        
        /* Customize scrollbar thumb */
        ::-webkit-scrollbar-thumb {
          background: black; 
          border: deeppink solid 1px;/* Set thumb color */
          /* Set thumb border radius */
        }
    </style>
</head>

<body>
    <div id="chat-window">
        <div id="chat-messages"></div>
        <div id="message-input-container">
            <input type="text" id="name-input" placeholder="Your Name">
            <input type="file" id="image-input" class="custom-file-input">
            <input type="text" id="message-input" placeholder="Type your message here">
            <center> <button onclick="sendMessage()">Send</button> </center>
        </div>
        <div id="status">Connected</div>
    </div>

</html>

just html

just css

/* Chat window styles */
#chat-window {
    width: 600px; /* Set the width of the chat window */
    height: 700px; /* Set the height of the chat window */
    margin: 20px auto; /* Center the chat window horizontally */
    border: 3px solid deeppink; /* Set border for the chat window */
    padding: 20px; /* Add padding inside the chat window */
    color: deeppink; /* Set text color for the chat window */
}

/* Chat messages container styles */
#chat-messages {
    height: 500px; /* Set the height of the chat messages container */
    overflow-y: auto; /* Enable vertical scrollbar if needed */
    padding: 5px; /* Add padding inside the chat messages container */
    border: 2px solid deeppink; /* Set border for the chat messages container */
    margin-bottom: 20px; /* Add margin at the bottom of the chat messages container */
}

/* Individual chat message styles */
.chat-message {
    margin-bottom: 10px; /* Add margin between individual chat messages */
    padding: 5px; /* Add padding inside individual chat messages */
    background-color: black; /* Set background color for individual chat messages */
    color: deeppink; /* Set text color for individual chat messages */
    font-family: monospace; /* Set font family for individual chat messages */
    font-size: 16px; /* Set font size for individual chat messages */
    border: 1px deeppink solid; /* Set border for individual chat messages */
    border-radius: 10px; /* Set border radius for individual chat messages */
}

/* Message sender's username styles */
.message-sender {
    font-weight: bold; /* Set font weight for message sender's username */
    color: deeppink; /* Set text color for message sender's username */
}

/* Message content styles */
.message-content {
    margin-left: 0px; /* Reset margin for message content */
    color: white; /* Set text color for message content */
}

/* Message image styles */
.message-image {
    width: 30%; /* Set width for message images */
    margin-top: 5px; /* Add margin at the top of message images */
}

/* Reply button styles */
.reply-button {
    margin-left: 5px; /* Add margin to the left of the reply button */
    cursor: pointer; /* Set cursor style for the reply button */
    color: black; /* Set text color for the reply button */
    text-decoration: none; /* Remove underline from the reply button */
    font-family: impact; /* Set font family for the reply button */
}

/* Hover effect for reply button */
.reply-button:hover {
    color: deeppink; /* Change text color on hover */
}

/* Input field styles */
input {
    color: white; /* Set text color for input fields */
    background-color: black; /* Set background color for input fields */
    border: deeppink 1px solid; /* Set border for input fields */
    padding: 3px; /* Add padding inside input fields */
    width: 590px; /* Set width for input fields */
    margin-bottom: 6px; /* Add margin at the bottom of input fields */
}

/* Hover effect for input fields */
input:hover {
    border: white solid 1px; /* Change border color on hover */
}

/* Button styles */
button {
    color: white; /* Set text color for buttons */
    background-color: black; /* Set background color for buttons */
    border: solid white 2px; /* Set border for buttons */
    padding: 15px; /* Add padding inside buttons */
    border-radius: 50px; /* Set border radius for buttons */
    margin: 10px; /* Add margin around buttons */
}

/* Hover effect for buttons */
button:hover {
    background-color: deeppink; /* Change background color on hover */
}

/* Input field for messages */
#message-input {
    height: 25px; /* Set height for message input field */
}

/* Input field for name */
#name-input {
    width: 100px; /* Set width for name input field */
}

/* Custom file input field */
input[type="file"].custom-file-input {
    border: none; /* Remove border from file input field */
    height: 15px; /* Set height for file input field */
    display: none; /* Hide file input field */
}

/* Status message styles */
#status {
    font-size: 13px; /* Set font size for status message */
    font-family: monospace; /* Set font family for status message */
    padding-bottom: 15px; /* Add padding at the bottom of status message */
}

/* Body styles */
body {
    background-color: black; /* Set background color for the body */
}

just js (required)

you might notice there is a hidden image input feature, this can be worked in if you prefer, but DONT DELETE IT FROM FORM or else the chat won't run correctly

AND YOU'RE DONE!

but even tho this works, remember this is best just as a starting point. I'm encouraging you to look into implementing a more secure experience for your visitors and yourself

Simple Chat Box Tutorial

On your lexiqqq.com website!

Setting it up

Connecting

Finish

AND YOU'RE DONE!