micheler/FVS-Social-Projekt-Neu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Version 0.9

Browse source 
-Nachrichten Senden
-Design verbessert
-Kleine Verbesserungen

Signed-off-by: erik <micheler@steinbeis.schule>
This commit is contained in:
Erik M 2025-03-10 10:48:39 +01:00
parent 55abbf6cb3
commit c3b42cccac
21 changed files with 730 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
FVS-Social/chat.php Normal file
View file

@ -0,0 +1,196 @@
<?php
session_start();
if(!isset($_SESSION['user_id'])) {
die("<p>Du musst dich zuerst Einloggen oder Regestrieren <br> <a href='login/login-page.html'>Hier Einloggen</a> <br> <a href='signup/signup-page.html'>Hier Regestrieren</a>");
}
include "db_connect.php";
$username = $_GET['user'];
$userId = $_SESSION['user_id'];
try {
// Benutzerdaten abrufen
$stmt = $pdo->prepare("SELECT id, username, email, created_at FROM users WHERE id = :username");
$stmt->execute([':username' => $username]);
$selected_user = $stmt->fetch(PDO::FETCH_ASSOC);
$stmt1 = $pdo->prepare("SELECT username, email, created_at FROM users WHERE id = :id");
$stmt1->execute([':id' => $userId]);
$user = $stmt1->fetch(PDO::FETCH_ASSOC);
$stmt2 = $pdo->prepare("SELECT file_path FROM profile_pictures WHERE user_id = :user_id");
$stmt2->execute([':user_id' => $userId]);
$profile_pic2 = $stmt2->fetch(PDO::FETCH_ASSOC);
$stmt3 = $pdo->prepare("
SELECT users.id, users.username, profile_pictures.file_path
FROM users
LEFT JOIN profile_pictures ON users.id = profile_pictures.user_id
ORDER BY profile_pictures.uploaded_at DESC
");
$stmt3->execute();
$users = $stmt3->fetchAll(PDO::FETCH_ASSOC);
$stmt2 = $pdo->prepare("SELECT file_path FROM profile_pictures WHERE user_id = :user_id");
$stmt2->execute([':user_id' => $selected_user['id']]);
$profile_pic = $stmt2->fetch(PDO::FETCH_ASSOC);
if ($profile_pic) {
$selected_profile_image = $profile_pic['file_path'];
} else {
$selected_profile_image = 'profile-pics/default.jpeg';
}
if ($profile_pic2) {
$selected_profile_image1 = $profile_pic2['file_path'];
} else {
$selected_profile_image1 = 'profile-pics/default.jpeg';
}
$stmt3 = $pdo->prepare("SELECT COUNT(following_id) AS following_count FROM followers WHERE following_id = :user_id ");
$stmt3->execute([':user_id' => $selected_user['id']]);
$follower_count = $stmt3->fetch(PDO::FETCH_ASSOC)['following_count'];
$sender_id = $_SESSION['user_id'];
$receiver_id = $_GET['user'];
} catch (PDOException $e) {
die("Fehler: " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<script>
function loadMessages() {
let chatBox = document.querySelector('.chat-box');
// Aktuelle Scroll-Position speichern
let scrollPosition = chatBox.scrollTop;
let user = <?= json_encode($receiver_id); ?>;
fetch('get_messages.php?user=' + user)
.then(response => response.text())
.then(data => {
chatBox.innerHTML = data;
// Scroll-Position wiederherstellen
chatBox.scrollTop = scrollPosition;
});
}
// Alle 2 Sekunden neue Nachrichten abrufen
setInterval(loadMessages, 2000);
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil von <?php echo htmlspecialchars($selected_user['username']); ?></title>
<link rel="stylesheet" href="style.css?v=<?php echo time(); ?>">
</head>
<body>
<div class="container">
<div class="col-3">
<div class="navigation-body">
<div class="profile-name-header">
<?php echo "<img class = 'profile-pictures-header' src='$selected_profile_image1' alt='pv' width='50'>";?>
<h1>
<a href="">@<?php echo htmlspecialchars($user['username']); ?></a>
</h1>
</div>
<ul class="icons">
<li><a href="index.php"><img src="icons/home.svg" alt="">Home</a></li>
<li><a href="profile.php?user=<?= htmlspecialchars($user['username']) ?>"><img src="icons/user.svg" alt="">Profil</a></li>
<li><a href="chat.php"><img src="icons/envelope.svg" alt="">Nachrichten</a></li>
<li><a href="logout.php"><img src="icons/exit.svg" alt="">Abmelden</a></li>
<a href="chat.php?user=<?= htmlspecialchars($benutzer['id']) ?>"><?= htmlspecialchars($benutzer['username']) ?></a>
</ul>
</div>
<div class="navigation-body">
<ul>
<?php foreach ($users as $benutzer):?>
<?php if($benutzer['id'] != $userId):?>
<li>
<form class="user-card" action="profile.php" method="post">
<a href="chat.php?user=<?= htmlspecialchars($benutzer['id']) ?>"> <img class="profile-pictures" src="<?= htmlspecialchars($benutzer['file_path']) ?: 'profile-pics/default.jpeg' ?>" alt="Profilbild"><?= htmlspecialchars($benutzer['username']) ?></a>
</form>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="profile-body col-9">
<?php if($receiver_id):?>
<div class="profile-header">
<h1>Profil von <?php echo htmlspecialchars($selected_user['username']); ?></h1>
<img src="<?php echo htmlspecialchars($selected_profile_image); ?>" alt="Profilbild" width="100">
<p>Email: <?php echo htmlspecialchars($selected_user['email']); ?></p>
<p>Registriert seit: <?php echo htmlspecialchars($selected_user['created_at']); ?></p>
<h3>Follower: <?php echo htmlspecialchars($follower_count) ?></h3>
<a href="index.php">Zurück zur Startseite</a>
</div>
<div class="chat">
<?php
$sender_id = $_SESSION['user_id'];
$receiver_id = $_GET['user'];
// Nachrichten abrufen
$stmt = $pdo->prepare("SELECT * FROM messages
WHERE (sender_id = :sender_id AND receiver_id = :receiver_id)
OR (sender_id = :receiver_id AND receiver_id = :sender_id)
ORDER BY sent_at ASC");
$stmt->execute([
':sender_id' => $sender_id,
':receiver_id' => $receiver_id
]);
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
$stmt3324 = $pdo->prepare("SELECT * FROM users WHERE id = :user_id");
$stmt3324->execute([':user_id' => $receiver_id]);
$receiver = $stmt3324->fetch(PDO::FETCH_ASSOC);
?>
<h2>Chat mit Benutzer <?= htmlspecialchars($receiver['username']); ?></h2>
<div class="chat-box" style="border:1px solid black; height:300px; overflow-y:scroll;">
<?php foreach ($messages as $msg): ?>
<p><strong><?= ($msg['sender_id'] == $sender_id) ? "Du" : htmlspecialchars($receiver['username']); ?>:</strong> <?= htmlspecialchars($msg['message']); ?>
<small><?= $msg['sent_at']; ?></small>
</p>
<?php endforeach; ?>
</div>
<form action="send_message.php" method="post" onsubmit="clearMessageBox()">
<input type="hidden" name="receiver_id" value="<?= htmlspecialchars($receiver_id); ?>">
<textarea name="message" required placeholder="Nachricht schreiben..."></textarea>
<button type="submit">Senden</button>
</form>
</div>
<?php endif; ?>
</div>
</div>
</body>
</html>

34
FVS-Social/get_messages.php Normal file
View file

@ -0,0 +1,34 @@
<?php
session_start();
include 'db_connect.php';
if (!isset($_SESSION['user_id']) || !isset($_GET['user'])) {
die("Zugriff verweigert");
}
$sender_id = $_SESSION['user_id'];
$receiver_id = $_GET['user'];
$stmt = $pdo->prepare("SELECT * FROM messages
WHERE (sender_id = :sender_id AND receiver_id = :receiver_id)
OR (sender_id = :receiver_id AND receiver_id = :sender_id)
ORDER BY sent_at ASC");
$stmt->execute([
':sender_id' => $sender_id,
':receiver_id' => $receiver_id
]);
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
$stmt3324 = $pdo->prepare("SELECT * FROM users WHERE id = :user_id");
$stmt3324->execute([':user_id' => $receiver_id]);
$receiver = $stmt3324->fetch(PDO::FETCH_ASSOC);
?>
<?php foreach ($messages as $msg): ?>
<p><strong><?= ($msg['sender_id'] == $sender_id) ? "Du" : htmlspecialchars($receiver['username']); ?>:</strong> <?= htmlspecialchars($msg['message']); ?>
<small><?= $msg['sent_at']; ?></small>
</p>
<?php endforeach; ?>

2
FVS-Social/icons/arrow-right.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M23.12,9.91,19.25,6a1,1,0,0,0-1.42,0h0a1,1,0,0,0,0,1.41L21.39,11H1a1,1,0,0,0-1,1H0a1,1,0,0,0,1,1H21.45l-3.62,3.61a1,1,0,0,0,0,1.42h0a1,1,0,0,0,1.42,0l3.87-3.88A3,3,0,0,0,23.12,9.91Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 337 B

1
FVS-Social/icons/delete.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#000000"><path d="M267.33-120q-27.5 0-47.08-19.58-19.58-19.59-19.58-47.09V-740h-7.34q-14.16 0-23.75-9.62-9.58-9.61-9.58-23.83 0-14.22 9.58-23.72 9.59-9.5 23.75-9.5H352q0-14.33 9.58-23.83 9.59-9.5 23.75-9.5h189.34q14.16 0 23.75 9.58 9.58 9.59 9.58 23.75h158.67q14.16 0 23.75 9.62 9.58 9.62 9.58 23.83 0 14.22-9.58 23.72-9.59 9.5-23.75 9.5h-7.34v553.33q0 27.5-19.58 47.09Q720.17-120 692.67-120H267.33Zm425.34-620H267.33v553.33h425.34V-740ZM398.12-270.67q14.21 0 23.71-9.58t9.5-23.75v-319.33q0-14.17-9.61-23.75-9.62-9.59-23.84-9.59-14.21 0-23.71 9.59-9.5 9.58-9.5 23.75V-304q0 14.17 9.61 23.75 9.62 9.58 23.84 9.58Zm164 0q14.21 0 23.71-9.58t9.5-23.75v-319.33q0-14.17-9.61-23.75-9.62-9.59-23.84-9.59-14.21 0-23.71 9.59-9.5 9.58-9.5 23.75V-304q0 14.17 9.61 23.75 9.62 9.58 23.84 9.58ZM267.33-740v553.33V-740Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 910 B

2
FVS-Social/icons/edit.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M5,19H9.414L23.057,5.357a3.125,3.125,0,0,0,0-4.414,3.194,3.194,0,0,0-4.414,0L5,14.586Zm2-3.586L20.057,2.357a1.148,1.148,0,0,1,1.586,0,1.123,1.123,0,0,1,0,1.586L8.586,17H7Z"/><path d="M23.621,7.622,22,9.243V16H16v6H2V3A1,1,0,0,1,3,2H14.758L16.379.379A5.013,5.013,0,0,1,16.84,0H3A3,3,0,0,0,0,3V24H18.414L24,18.414V7.161A5.15,5.15,0,0,1,23.621,7.622ZM18,21.586V18h3.586Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 567 B

2
FVS-Social/icons/envelope.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 445 B

2
FVS-Social/icons/exit.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M22.829,9.172,18.95,5.293a1,1,0,0,0-1.414,1.414l3.879,3.879a2.057,2.057,0,0,1,.3.39c-.015,0-.027-.008-.042-.008h0L5.989,11a1,1,0,0,0,0,2h0l15.678-.032c.028,0,.051-.014.078-.016a2,2,0,0,1-.334.462l-3.879,3.879a1,1,0,1,0,1.414,1.414l3.879-3.879a4,4,0,0,0,0-5.656Z"/><path d="M7,22H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2H7A1,1,0,0,0,7,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H7a1,1,0,0,0,0-2Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 548 B

1
FVS-Social/icons/full_heart.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#EA3323"><path d="M480-142.33q-12 0-24.17-4.34Q443.67-151 434.67-160l-58.34-53.67q-118-109-207.16-210.5Q80-525.67 80-640q0-91.33 61.33-152.67 61.34-61.33 152-61.33Q345-854 394-830.17q49 23.84 86 74.17 40.33-50.33 87.33-74.17 47-23.83 99.34-23.83 90.66 0 152 61.33Q880-731.33 880-640q0 114.33-89 216T583.33-213.33l-58 53.33q-9 9-21.16 13.33-12.17 4.34-24.17 4.34Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 469 B

2
FVS-Social/icons/home.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 529 B

2
FVS-Social/icons/picture.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M19,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V5A5.006,5.006,0,0,0,19,0ZM5,2H19a3,3,0,0,1,3,3V19a2.951,2.951,0,0,1-.3,1.285l-9.163-9.163a5,5,0,0,0-7.072,0L2,14.586V5A3,3,0,0,1,5,2ZM5,22a3,3,0,0,1-3-3V17.414l4.878-4.878a3,3,0,0,1,4.244,0L20.285,21.7A2.951,2.951,0,0,1,19,22Z"/><path d="M16,10.5A3.5,3.5,0,1,0,12.5,7,3.5,3.5,0,0,0,16,10.5Zm0-5A1.5,1.5,0,1,1,14.5,7,1.5,1.5,0,0,1,16,5.5Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 573 B

1
FVS-Social/icons/unlike_heart.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#000000"><path d="M480-142.33q-11.8 0-24.02-4.25-12.22-4.25-21.49-13.59l-58.16-53.5q-118-109-207.16-210.5Q80-525.67 80-640q0-91.44 61.33-152.72 61.34-61.28 152-61.28Q345-854 394-830.17q49 23.84 86 74.17 40.33-50.33 87.33-74.17 47-23.83 99.34-23.83 90.66 0 152 61.28Q880-731.44 880-640q0 114.33-89 216T583.33-213.33l-58 53.33q-9.16 9.25-21.25 13.46-12.08 4.21-24.08 4.21Zm-30-543q-27.67-46.34-68-74.17t-88.67-27.83q-64 0-105.33 41.66-41.33 41.67-41.33 105.96 0 55.71 38.25 117.65 38.25 61.93 91.5 120.16T386.5-293.33q56.83 50.33 93.5 84 36.67-33 93.5-83.67t110-109.33Q736.67-461 775-522.96q38.33-61.96 38.33-117.04 0-64-41.66-105.67-41.67-41.66-105-41.66-49 0-89 27.5t-69 74.5q-5.67 8.66-13 12.66-7.34 4-16.34 4t-16.66-4q-7.67-4-12.67-12.66Zm30 187Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 855 B

2
FVS-Social/icons/user.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M12,12A6,6,0,1,0,6,6,6.006,6.006,0,0,0,12,12ZM12,2A4,4,0,1,1,8,6,4,4,0,0,1,12,2Z"/><path d="M12,14a9.01,9.01,0,0,0-9,9,1,1,0,0,0,2,0,7,7,0,0,1,14,0,1,1,0,0,0,2,0A9.01,9.01,0,0,0,12,14Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 340 B

230
FVS-Social/index.php
View file

@ -1,48 +1,70 @@
<?php
global $pdo;
session_start();
$page = isset($_GET['page']) ? $_GET['page'] : 'posts';
$user_page = isset($_GET['user']) ? $_GET['user'] : 'posts';
$page = isset($_GET['page']) ? $_GET['page'] : 'posts';
$user_page = isset($_GET['user']) ? $_GET['user'] : 'posts';
if(!isset($_SESSION['user_id'])) {
header("Location: login/login-page.html");
}
header("Location: login/login-page.html");
}
include 'db_connect.php';
include 'db_connect.php';
try {
$userId = $_SESSION['user_id'];
try {
$userId = $_SESSION['user_id'];
$stmt1 = $pdo->prepare("SELECT username, email, created_at FROM users WHERE id = :id");
$stmt1->execute([':id' => $userId]);
$user = $stmt1->fetch(PDO::FETCH_ASSOC);
$stmt2 = $pdo->prepare("SELECT file_path FROM profile_pictures WHERE user_id = :user_id");
$stmt2->execute([':user_id' => $userId]);
$profile_pic = $stmt2->fetch(PDO::FETCH_ASSOC);
$stmt3 = $pdo->prepare("
//Daten von Angemeldeten benutzer werden ausgelesen
$stmt1 = $pdo->prepare("SELECT username, email, created_at FROM users WHERE id = :id");
$stmt1->execute([':id' => $userId]);
$user = $stmt1->fetch(PDO::FETCH_ASSOC);
//Profilbild wird vom angemeldeten benutzer ausgelesen
$stmt2 = $pdo->prepare("SELECT file_path FROM profile_pictures WHERE user_id = :user_id");
$stmt2->execute([':user_id' => $userId]);
$profile_pic = $stmt2->fetch(PDO::FETCH_ASSOC);
//Benutzername und Profilbild werden von allen benutzer ausgelesen
$stmt3 = $pdo->prepare("
SELECT users.username, profile_pictures.file_path
FROM users
LEFT JOIN profile_pictures ON users.id = profile_pictures.user_id
ORDER BY profile_pictures.uploaded_at DESC
");
$stmt3->execute();
$users = $stmt3->fetchAll(PDO::FETCH_ASSOC);
$stmt3->execute();
$users = $stmt3->fetchAll(PDO::FETCH_ASSOC);
//Alle beiträge von allen benutzer werden ausgelesen
$stmt4 = $pdo->prepare("
SELECT posts.*, profile_pictures.file_path AS profile_picture, users.username
FROM posts
LEFT JOIN profile_pictures ON posts.user_id = profile_pictures.user_id
LEFT JOIN users ON posts.user_id = users.id
ORDER BY posts.created_at DESC
");
$stmt4->execute();
$posts = $stmt4->fetchAll(PDO::FETCH_ASSOC);
if ($profile_pic) {
$profile_image = $profile_pic['file_path'];
} else {
$profile_image = 'profile-pics/default.jpeg';
}
if(!$user){
die("Benutzer nicht gefunden!");
}
}catch (PDOException $e){
die("Fehler: " . $e->getMessage());
if ($profile_pic) {
$profile_image = $profile_pic['file_path'];
} else {
$profile_image = 'profile-pics/default.jpeg';
}
if(!$user){
die("Benutzer nicht gefunden!");
}
}catch (PDOException $e){
die("Fehler: " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
@ -50,22 +72,26 @@ if(!isset($_SESSION['user_id'])) {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php echo '<link rel="stylesheet" href="style.css?v='.time().'">'; ?>
<title>Profile</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="navigation-body">
<h1>
<?php echo "<img class = 'profile-pictures' src='$profile_image' alt='pv' width='50'>";?>
<a href=""><?php echo htmlspecialchars($user['username']); ?></a>
</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Profil</a></li>
<li><a href="">Nachrichten</a></li>
<li><a href="">Benachrichtiungen</a></li>
<div class="profile-name-header">
<?php echo "<img class = 'profile-pictures-header' src='$profile_image' alt='pv' width='50'>";?>
<h1>
<a href="">@<?php echo htmlspecialchars($user['username']); ?></a>
</h1>
</div>
<ul class="icons">
<li><a href="index.php"><img src="icons/home.svg" alt="">Home</a></li>
<li><a href="profile.php?user=<?= htmlspecialchars($user['username']) ?>"><img src="icons/user.svg" alt="">Profil</a></li>
<li><a href="chat.php"><img src="icons/envelope.svg" alt="">Nachrichten</a></li>
<li><a href="logout.php"><img src="icons/exit.svg" alt="">Abmelden</a></li>
</ul>
</div>
@ -73,9 +99,8 @@ if(!isset($_SESSION['user_id'])) {
<ul>
<?php foreach ($users as $benutzer): ?>
<li>
<form action="profile.php" method="post">
<img src="<?= htmlspecialchars($benutzer['file_path']) ?: 'profile-pics/default.jpeg' ?>" alt="Profilbild">
<a href="profile.php?user=<?= urlencode($benutzer['username']) ?>"><?= htmlspecialchars($benutzer['username']) ?></a>
<form class="user-card" action="profile.php" method="post">
<a href="profile.php?user=<?= urlencode($benutzer['username']) ?>"> <img class="profile-pictures" src="<?= htmlspecialchars($benutzer['file_path']) ?: 'profile-pics/default.jpeg' ?>" alt="Profilbild"><?= htmlspecialchars($benutzer['username']) ?></a>
</form>
</li>
<?php endforeach; ?>
@ -89,10 +114,8 @@ if(!isset($_SESSION['user_id'])) {
<h1>Willkommen, <?php echo htmlspecialchars($user['username']); ?>!</h1>
<p>Email: <?php echo htmlspecialchars($user['email']); ?>!</p>
<p>Regestriert seit:, <?php echo htmlspecialchars($user['created_at']); ?>!</p>
<a href="logout.php">Abmelden</a>
<a href="?page=posts">Posts</a>
<a href="?page=about">Über mich</a>
<a href="?page=settings">Einstellungen</a>
<?php
if($user_page == $user['username']) {
@ -101,88 +124,87 @@ if(!isset($_SESSION['user_id'])) {
?>
</div>
<div class="posts-body">
<?php
if($page == 'posts'){
echo "<h1>Posts</h1>
<button>Post</button>
";
}elseif($page == 'about'){
echo "<h1>Über mich</h1>";
}elseif($page == 'settings'){
echo "
<h1>Einstellungen</h1>
<h3>Profilbild änderen</h3>
<form action='upload-profile/upload.php' method='post' enctype='multipart/form-data'>
<input type='file' name='profile_picture' accept='image/*' required>
<br>
<button type='submit'>Profilbild hochladen</button>
</form>
<h3>Profilbild löschen</h3>
<form action='upload-profile/delete-pb.php'>
<button type='submit'>Profilbild löschen</button>
</form>
<h3>Profilbild änderm</h3>
<form action='change-username.php' method='post'>
<input type='text' required placeholder='Benutzername' name='username'>
<button type='submit'>Ändern</button>
</form>
<h3>Profilbild änderm</h3>
<form action='delete-user.php' method='post'>
<button type='submit'>Profil löschen</button>
</form>
";
echo $profile_image;
}
?>
</div>
<div class="post-formular-body">
<?php
if($page == 'posts'){
echo "
<form action='upload-post/upload-post.php' method='post' enctype='multipart/form-data'>
<textarea name='text_content' required placeholder='Schreibe etwas...'></textarea>
<input type='file' name='image'>
<button type='submit'>Posten</button>
</form>
";
$stmt45 = $pdo->prepare("
SELECT posts.*, profile_pictures.file_path AS profile_picture, users.username
FROM posts
LEFT JOIN profile_pictures ON posts.user_id = profile_pictures.user_id
LEFT JOIN users ON posts.user_id = users.id
ORDER BY posts.created_at DESC
");
$stmt45->execute();
$posts = $stmt45->fetchAll(PDO::FETCH_ASSOC);
}
?>
</div>
</div>
<?php foreach ($posts as $post): ?>
<?php
$stmt5 = $pdo->prepare("SELECT COUNT(post_id) AS likes_count FROM likes WHERE post_id = :post_id");
$stmt5->execute([':post_id' => $post['id']]);
$likes = $stmt5->fetch(PDO::FETCH_ASSOC)['likes_count'];
$stmt6 = $pdo->prepare("SELECT user_id, post_id FROM likes WHERE post_id = :post_id AND user_id = :user_id");
$stmt6->execute([':post_id' => $post['id'], ':user_id' => $userId]);
$isLiked = $stmt6->fetch(PDO::FETCH_ASSOC);
?>
<div class="post">
<img src="<?= htmlspecialchars($post['profile_picture']) ?: 'profile-pics/default.jpeg'; ?>" width="50px" alt="">
<p><strong><?php echo $post['username']; ?></strong></p>
<div class="post-nav">
<div class="post-header">
<img class="profile-pictures" src="<?= htmlspecialchars($post['profile_picture']) ?: 'profile-pics/default.jpeg'; ?>" width="50px" alt="">
<p><strong><?php echo $post['username']; ?></strong></p>
</div>
<?php if ($userId == $post['user_id']): ?>
<form action="upload-post/delete-post.php" method="post">
<input type="hidden" name="post_id" value="<?= htmlspecialchars($post['id']) ?>">
<button class="delete-post" type="submit"></button>
</form>
<?php endif; ?>
</div>
<p><?php echo nl2br(htmlspecialchars($post['text_content'])); ?></p>
<?php if (!empty($post['image_path'])): ?>
<img class="post-pics" src="<?php echo htmlspecialchars($post['image_path']); ?>" alt="Bild zum Post">
<?php endif; ?>
<h5>Likes: <?php echo htmlspecialchars($likes)?></h5>
<p><small>Erstellt am: <?php echo $post['created_at']; ?></small></p>
<?php if ($userId == $post['user_id']): ?>
<form action="upload-post/delete-post.php" method="post">
<input type="hidden" name="post_id" value="<?= htmlspecialchars($post['id']) ?>">
<button type="submit">Löschen</button>
</form>
<?php endif; ?>
<div class="post-footer">
<?php if(!$isLiked):?>
<form action="like/like.php" method="post">
<input type="hidden" name="post_id" value="<?= htmlspecialchars($post['id']) ?>">
<button class="like-button unlike" type="submit"></button>
</form>
<?php else: ?>
<form action="like/unlike.php" method="post">
<input type="hidden" name="post_id" value="<?= htmlspecialchars($post['id']) ?>">
<button class="like-button liked" type="submit"></button>
</form>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Scroll-Position aus dem localStorage abrufen
let scrollPos = localStorage.getItem("scrollPosition");
if (scrollPos !== null) {
// Verzögert setzen, um das Springen zu minimieren
requestAnimationFrame(() => {
window.scrollTo(0, parseInt(scrollPos));
});
}
// Speichert die Scroll-Position beim Verlassen der Seite
window.addEventListener("beforeunload", function() {
localStorage.setItem("scrollPosition", window.scrollY);
});
});
</script>
</body>
</html>

23
FVS-Social/like/like.php Normal file
View file

@ -0,0 +1,23 @@
<?php
session_start();
include "../db_connect.php";
if(!isset($_SESSION['user_id']) || !isset($_POST['post_id'])){
header("location: ../index.php");
}
$like_id = $_SESSION['user_id'];
$liked_id = $_POST['post_id'];
$username = $_POST['username'];
try {
$like_abfrage = $pdo->prepare("INSERT INTO likes (user_id, post_id) VALUES (:user_id, :post_id)");
$like_abfrage->execute([':user_id' => $like_id, ':post_id' => $liked_id]);
header("location: ../index.php");
}
catch(PDOException $e){
echo $e->getMessage();
}

23
FVS-Social/like/unlike.php Normal file
View file

@ -0,0 +1,23 @@
<?php
session_start();
include "../db_connect.php";
if(!isset($_SESSION['user_id']) || !isset($_POST['post_id'])){
header("location: ../index.php");
}
$like_id = $_SESSION['user_id'];
$liked_id = $_POST['post_id'];
$username = $_POST['username'];
try {
$like_abfrage = $pdo->prepare("DELETE FROM likes WHERE user_id = :user_id AND post_id = :post_id");
$like_abfrage->execute([':user_id' => $like_id, ':post_id' => $liked_id]);
header("location: ../index.php");
}
catch(PDOException $e){
echo $e->getMessage();
}

2
FVS-Social/login/login-page.html
View file

@ -20,7 +20,7 @@
<a href="">Passwort vergessen?</a>
<button class="login-button" name="login" type="submit">Log In</button>
</form>
<p>Noch kein Account?<a href="../signup/signup-page.html">Jetzt Regestrieren!</a></p>
<!--<p>Noch kein Account?<a href="../signup/signup-page.html">Jetzt Regestrieren!</a></p>-->
</div>
</div>
</body>

BIN
FVS-Social/profile-pics/profile_9.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 565 KiB

After

Width:  |  Height:  |  Size: 326 KiB

72
FVS-Social/profile.php
View file

@ -10,6 +10,8 @@ if (!isset($_GET['user'])) {
die("Kein Benutzer angegeben.");
}
$page = isset($_GET['page']) ? $_GET['page'] : 'posts';
$username = $_GET['user'];
$userId = $_SESSION['user_id'];
@ -57,6 +59,7 @@ try {
$selected_profile_image1 = 'profile-pics/default.jpeg';
}
$stmt3 = $pdo->prepare("SELECT COUNT(following_id) AS following_count FROM followers WHERE following_id = :user_id ");
$stmt3->execute([':user_id' => $selected_user['id']]);
$follower_count = $stmt3->fetch(PDO::FETCH_ASSOC)['following_count'];
@ -78,15 +81,17 @@ try {
<div class="container">
<div class="col-3">
<div class="navigation-body">
<h1>
<?php echo "<img class = 'profile-pictures' src='$selected_profile_image1' alt='pv' width='50'>";?>
<a href=""><?php echo htmlspecialchars($user['username']); ?></a>
</h1>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php?page=settings">Profil</a></li>
<li><a href="">Nachrichten</a></li>
<li><a href="">Benachrichtiungen</a></li>
<div class="profile-name-header">
<?php echo "<img class = 'profile-pictures-header' src='$selected_profile_image1' alt='pv' width='50'>";?>
<h1>
<a href="">@<?php echo htmlspecialchars($user['username']); ?></a>
</h1>
</div>
<ul class="icons">
<li><a href="index.php"><img src="icons/home.svg" alt="">Home</a></li>
<li><a href="profile.php?user=<?= htmlspecialchars($user['username']) ?>"><img src="icons/user.svg" alt="">Profil</a></li>
<li><a href="chat.php"><img src="icons/envelope.svg" alt="">Nachrichten</a></li>
<li><a href="logout.php"><img src="icons/exit.svg" alt="">Abmelden</a></li>
</ul>
</div>
@ -94,23 +99,26 @@ try {
<ul>
<?php foreach ($users as $benutzer): ?>
<li>
<form action="profile.php" method="post">
<img src="<?= htmlspecialchars($benutzer['file_path']) ?: 'profile-pics/default.jpeg' ?>" alt="Profilbild">
<a href="profile.php?user=<?= urlencode($benutzer['username']) ?>"><?= htmlspecialchars($benutzer['username']) ?></a>
<form class="user-card" action="profile.php" method="post">
<a href="profile.php?user=<?= urlencode($benutzer['username']) ?>"> <img class="profile-pictures" src="<?= htmlspecialchars($benutzer['file_path']) ?: 'profile-pics/default.jpeg' ?>" alt="Profilbild"><?= htmlspecialchars($benutzer['username']) ?></a>
</form>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="profile-body col-9">
<div class="profile-header">
<h1>Profil von <?php echo htmlspecialchars($selected_user['username']); ?></h1>
<img src="<?php echo htmlspecialchars($selected_profile_image); ?>" alt="Profilbild" width="100">
<p>Email: <?php echo htmlspecialchars($selected_user['email']); ?></p>
<p>Registriert seit: <?php echo htmlspecialchars($selected_user['created_at']); ?></p>
<h3>Follower: <?php echo htmlspecialchars($follower_count) ?></h3>
<?php if($selected_user['id'] != $userId): ?>
<?php
$follower_id = $_SESSION['user_id'];
@ -132,8 +140,45 @@ try {
<button type="submit">Nicht mehr Folgen</button>
</form>
<?php endif;?>
<form action="chat.php" method="get">
<input type="hidden" name="user" value="<?php echo $selected_user['id'] ?>">
<button type="submit">Nachricht Schreiben</button>
</form>
<?php endif; ?>
<a href="index.php">Zurück zur Startseite</a>
<a href="?user=<?= urlencode($selected_user['username'])?>&page=posts">Posts</a>
<a href="?user=<?= urlencode($selected_user['username'])?>&page=about">Über mich</a>
<?php if($selected_user['id'] == $userId):?>
<a href="?user=<?= urlencode($selected_user['username'])?>&page=settings">Einstellungen</a>
<?php endif;?>
</div>
<?php if($page == "settings"): ?>
<div class="posts-body">
<h1>Einstellungen</h1>
<h3>Profilbild änderen</h3>
<form action='upload-profile/upload.php' method='post' enctype='multipart/form-data'>
<input type='file' name='profile_picture' accept='image/*' required>
<br>
<button type='submit'>Profilbild hochladen</button>
</form>
<h3>Profilbild löschen</h3>
<form action='upload-profile/delete-pb.php'>
<button type='submit'>Profilbild löschen</button>
</form>
<h3>Profilbild änderm</h3>
<form action='change-username.php' method='post'>
<input type='text' required placeholder='Benutzername' name='username'>
<button type='submit'>Ändern</button>
</form>
<h3>Profilbild änderm</h3>
<form action='delete-user.php' method='post'>
<button type='submit'>Profil löschen</button>
</form>
</div>
<?php endif; ?>
<?php
$stmt45 = $pdo->prepare("
@ -147,6 +192,7 @@ try {
$stmt45->execute([':username' => $username]);
$posts = $stmt45->fetchAll(PDO::FETCH_ASSOC);
?>
<?php if($page == "posts"): ?>
<?php foreach ($posts as $post): ?>
<div class="post">
<img src="<?= htmlspecialchars($post['profile_picture']) ?: 'profile-pics/default.jpeg'; ?>" width="50px" alt="">
@ -168,7 +214,7 @@ try {
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</body>

21
FVS-Social/send_message.php Normal file
View file

@ -0,0 +1,21 @@
<?php
session_start();
include 'db_connect.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$sender_id = $_SESSION['user_id'];
$receiver_id = $_POST['receiver_id'];
$message = trim($_POST['message']);
if (!empty($message)) {
$stmt = $pdo->prepare("INSERT INTO messages (sender_id, receiver_id, message) VALUES (:sender_id, :receiver_id, :message)");
$stmt->execute([
':sender_id' => $sender_id,
':receiver_id' => $receiver_id,
':message' => $message
]);
}
}
header("Location: chat.php?user=$receiver_id");
exit();
?>

241
FVS-Social/style.css
View file

@ -2,15 +2,150 @@
box-sizing: border-box;
}
.profile-pictures, .navigation-body ul li img { width: 50px; height: 50px; border-radius: 50%; }
.profile-pictures { width: 50px; height: 50px; border-radius: 50%; }
.profile-pictures-header { width: 75px; height: 75px; border-radius: 50%;}
body {
scroll-behavior: smooth;
margin: 0;
font-family: Arial, sans-serif;
background-color: #FAFBFF;
}
a{
text-decoration: none;
color: black;
}
ul{
list-style: none;
padding: 0;
}
.profile-name-header{
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.profile-name-header h1{
margin: 0;
padding-left: 15px;
padding-right: 15px;
}
.icons{
list-style: none;
padding: 0 20px 0 20px;
}
.icons a img {
height: 25px;
}
.icons img{
height: 25px;
}
.icons a {
align-items: center;
width: 100%;
padding: 10px;
display: flex;
flex-direction: row;
gap: 20px;
border-radius: 20px;
font-size: 19px;
transition: all 0.3s ease, transform 0.3s ease;
}
.like-button {
width: 30px;
height: 30px;
border: none;
background-size: cover;
background-position: center;
background-color: white;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
}
.like-button.unlike {
background-image: url('icons/unlike_heart.svg');
}
.like-button.liked {
background-image: url('icons/full_heart.svg');
}
.like-button:hover {
transform: scale(1.1);
}
.like-button:active {
transform: scale(0.9);
}
.delete-post{
width: 30px;
height: 30px;
border: none;
background-size: cover;
background-position: center;
background-color: white;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
background-image: url("icons/delete.svg");
}
.delete-post:hover {
transform: scale(1.1);
}
.delete-post:active {
transform: scale(0.9);
}
.post-nav{
display: flex;
justify-content: space-between;
}
.post-footer{
display: flex;
flex-direction: row;
}
.post-footer button{
margin-right: 5px;
margin-left: 5px;
}
.user-card{
list-style: none;
padding: 0 20px 0 20px;
}
.user-card a{
align-items: center;
width: 100%;
padding: 10px;
display: flex;
flex-direction: row;
gap: 20px;
border-radius: 20px;
font-size: 19px;
transition: all 0.3s ease, transform 0.3s ease;
}
.navigation-body ul li a:hover{
background-color: rgba(18, 137, 255, 0.35);
}
.container {
max-width: 1200px;
margin: 0 auto;
@ -21,11 +156,6 @@ body {
}
.post-pics{
max-width: 500px;
height: auto;
}
.post-formular-body, .post, .posts-body, .all-posts-body, .profile-header, .navigation-body{
background-color: #FFFFFF;
@ -33,42 +163,73 @@ body {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
width: 100%;
border-radius: 20px;
margin-bottom: 30px;
}
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 15px;
}
.post-pics{
height: auto;
width: 90%;
max-width: 400px;
margin: 5px;
padding: 5px;
}
.post{
padding: 20px;
}
.post-header {
display: flex;
flex-direction: row;
}
.post-header img{
margin-right: 10px;
}
[class*="col-"] {
padding: 15px;
flex: 0 0 auto;
box-sizing: border-box;
padding: 15px;
box-sizing: border-box;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(6, 1fr);
}
.col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
.col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (max-width: 768px){
[class*="col-"] {
max-width: 70%;
}
.container{
flex-wrap: wrap;
}
.col-3 {
grid-column: span 12;
}
@media (max-width: 456px){
[class*="col-"] {
max-width: 90%;
}
.container{
flex-wrap: wrap;
}
}
.col-9 {
grid-column: span 12;
}
}
@media (max-width: 456px) {
.container {
grid-template-columns: repeat(6, 1fr);
}
.col-3 {
grid-column: span 12;
}
.col-9 {
grid-column: span 12;
}
}

46
FVS-Social/upload-post/upload-post.php
View file

@ -1,30 +1,44 @@
<?php
<?php
include '../db_connect.php';
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST") {
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$user_id = $_SESSION['user_id'];
$text_content = $_POST['text_content'];
$image_path = NULL;
if(!empty($_FILES['image']['name'])){
$upload_dir = "../posts/";
$target_dir = "posts/";
if (!empty($_FILES['image']['name'])) {
$upload_dir = "../posts/"; // Server-Seitiges Upload-Verzeichnis
$target_dir = "posts/"; // Pfad für die Datenbank
$filename = $user_id . "_" . basename($_FILES['image']['name']);
$target_file = $upload_dir . $filename;
function generateUniqueFilename($directory, $filename) {
$fileInfo = pathinfo($filename);
$baseName = $fileInfo['filename'];
$extension = isset($fileInfo['extension']) ? '.' . $fileInfo['extension'] : '';
$counter = 1;
$newFilename = $filename;
if(move_uploaded_file($_FILES['image']['tmp_name'], $target_file)){
$image_path = $target_dir . $filename;
while (file_exists($directory . DIRECTORY_SEPARATOR . $newFilename)) {
$newFilename = $baseName . "_" . $counter . $extension;
$counter++;
}
return $newFilename;
}
// Generiere einzigartigen Dateinamen
$original_filename = $user_id . "_" . basename($_FILES['image']['name']);
$unique_filename = generateUniqueFilename($upload_dir, $original_filename);
$target_file = $upload_dir . $unique_filename;
// Datei hochladen
if (move_uploaded_file($_FILES['image']['tmp_name'], $target_file)) {
$image_path = $target_dir . $unique_filename;
}
}
// Daten in die Datenbank speichern
$stmt = $pdo->prepare("INSERT INTO posts (user_id, text_content, image_path) VALUES (:user_id, :text_content, :image_path)");
$stmt->execute([
':user_id' => $user_id,
@ -32,9 +46,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") {
':image_path' => $image_path
]);
header("Location: ../index.php");
header("Location: ../index.php");
exit();
}
?>