Skip to content

Commit

Permalink
Changed more msqli into pdo and also updated the design for the register
Browse files Browse the repository at this point in the history 
	modified:   chat_functions.php
	modified:   css/style_register.css
	modified:   fetch_messages.php
	modified:   join_or_leave_chat.php
	new file:   js/register.js
	modified:   login.php
	modified:   login_handler.php
	modified:   register.php
  • Loading branch information
@push42
push42 committed Aug 1, 2023
1 parent 2c5153c commit da39b29
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 514 deletions.
70 changes: 16 additions & 54 deletions chat_functions.php
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,39 @@
<?php
// Function to save a chat message to the database
function save_message($username, $avatar_url, $message) {
$servername = 'localhost';
$db_username = 'root';
$password = '';
$database = 'webdev';

// Create a database connection
$connection = new mysqli($servername, $db_username, $password, $database);
try {
$conn = new PDO("mysql:host=$servername;dbname=$database", $db_username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// Check if the connection was successful
if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
$stmt = $conn->prepare("INSERT INTO chat_messages (username, avatar_url, message) VALUES (?, ?, ?)");
$stmt->execute([$username, $avatar_url, $message]);
} catch (PDOException $e) {
die("Connection failed: " . $e->getMessage());
}

// Prepare the SQL statement with placeholders
$sql = "INSERT INTO chat_messages (username, avatar_url, message) VALUES (?, ?, ?)";
$stmt = $connection->prepare($sql);

// Bind parameters to the prepared statement
$stmt->bind_param("sss", $username, $avatar_url, $message);

// Execute the prepared statement
$stmt->execute();

// Close the statement and the database connection
$stmt->close();
$connection->close();
}



// Function to get chat messages from the database
function get_messages($reverse = false) {
$servername = 'localhost';
$username = 'root';
$password = '';
$database = 'webdev';

// Create a database connection
$connection = new mysqli($servername, $username, $password, $database);
try {
$conn = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// Check if the connection was successful
if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}
$sql = "SELECT username, avatar_url, message, timestamp FROM chat_messages ORDER BY timestamp DESC";
$stmt = $conn->query($sql);

$sql = "SELECT username, avatar_url, message, timestamp FROM chat_messages ORDER BY timestamp DESC";
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);

$result = $connection->query($sql);

// Create an array to store the chat messages
$messages = array();

// Fetch the results and store them in the array
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$message = array(
'username' => $row['username'],
'avatar_url' => $row['avatar_url'],
'message' => $row['message'],
'timestamp' => $row['timestamp']
);
$messages[] = $message;
}
return $messages;
} catch (PDOException $e) {
die("Connection failed: " . $e->getMessage());
}

// Close the result and the database connection
$result->close();
$connection->close();

return $messages;
}


?>
227 changes: 67 additions & 160 deletions css/style_register.css
View file
Original file line number Diff line number Diff line change
@@ -1,200 +1,107 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(to right, #0a0a0a, #1b1b1b);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
justify-content: center;
height: 90vh;
margin: 0;
position: relative;
color: #fff;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #0e0e0e;
z-index: -1;
.register-container {
background: #121212;
padding: 60px 80px;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
width: 450px;
max-width: 90%;
}

.register-container {
.header-text h2 {
text-align: center;
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
color: #1e90ff;
}

.form-field {
margin-bottom: 25px;
position: relative;
color: #003cff;
background: rgb(24, 26, 71);
background: radial-gradient(circle, rgba(24, 26, 71, 0.9) 0%, rgba(27, 27, 27, 1) 100%);
border: 1px solid #003cff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
padding-right: 40px;
}

.register-container h2 {
margin-top: 0;
text-align: center;
margin-top: -50px;
.register-container label {
font-weight: 500;
display: block;
margin-bottom: 10px;
color: #eee;
}

.register-container input[type="text"],
.register-container input[type="password"] {
width: 90%;
padding: 10px;
border: 3px solid #003cff;
background: linear-gradient(to bottom, #eeeeee, #414141);
border-radius: 6px;
padding: 15px;
border: 2px solid #333;
background: #333;
border-radius: 10px;
outline: none;
color: #fff;
font-size: 16px;
width: 100%;
}

.register-container input[type="text"]:focus,
.register-container input[type="password"]:focus {
border-color: #1e90ff;
}

.register-container input[type="submit"] {
font-weight: 500;
font-size: 12px;
bottom: 0;
right: 50%;
width: 50%;
padding: 10px;
margin-top: 10px;
background: transparent;
box-shadow: 5px #0e0e0e;
width: 100%;
padding: 18px;
border: none;
background-color: #1e90ff;
color: #fff;
border: 2px solid #414141;
border-radius: 25px;
font-weight: bold;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 17px;
font-family: 'Montserrat', sans-serif;
margin-top: 17px;
margin-top: 40px;
}

.register-container input[type="submit"]:hover {
background-color: #a8a8a8;
}

.logo-image {
width: 200px;
height: auto;
margin-bottom: 20px;
}

.register-username,
.register-password {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
color: #a8a8a8;
padding-top: 2px;
padding-bottom: 5px;
display: flex;
align-items: center;
margin-top: 10px;
background-color: #0066cc;
margin-top: 40px;
}

.form-icons {
margin-right: 8px;
}

.form-icons2 {
.form-icons,
.form-icons2,
.form-icons3,
.form-icons4 {
margin-right: 10px;
font-size: 18px;
color: #1e90ff;
}

@media (max-width: 480px) {
.register-container input[type="submit"] {
width: 75%;
}
}

.spacer01 {
font-family: 'Montserrat', sans-serif;
font-size: 8.5px;
font-weight: 600;
text-transform: none;
color: #a8a8a8;
padding: 10px 10px;
}

.madeby {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #fff;
font-size: 7px;
margin-top: 25px;
text-align: center;
}

.hinweis {
padding: 9px;
color: #fff;
}

.register-container p {
color: #fff;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
font-size: 9px;
margin-top: -5px;
}

.iconsfont {
padding: 8px;
}

.header-text{
position: absolute;
color: #fff;
margin-top: -480px;
padding-bottom: 70px;
}

.info-icon {
position: absolute;
left: 30px;
top: 87%;
width: 15px;
height: 15px;
background-color: rgba(255, 255, 255, 0.877);
border-radius: 50%;
.form-field label {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 16px;
}

.info-box {
display: none;
position: absolute;
left: -140px;
top: 87%;
width: 120px;
background-color: #1d1d1d;
color: #fff;
padding: 8px 8px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
/* Responsive styles */
@media (max-width: 768px) {
.register-container {
padding: 20px 30px;
}
}

.info-icon:hover + .info-box {
.register-logo {
display: block;
max-width: 150px; /* You can adjust the size as needed */
margin: 0 auto 2px auto; /* Center align with margin below */
margin-bottom: -35px;
}

.form-icons3 {
color: #000000;
}

.register-security-code {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
color: #a8a8a8;
padding-top: 2px;
padding-bottom: 5px;
display: flex;
align-items: center;
margin-top: 10px;
}
Loading

0 comments on commit da39b29

Please sign in to comment.