Explorar o código

Comments for dirs and images (mostly working)

k4be hai 1 ano
pai
achega
c0016a6dcc
Modificáronse 11 ficheiros con 330 adicións e 40 borrados
  1. 1 1
      .gitignore
  2. 72 0
      comment.js
  3. 16 1
      dir.php
  4. 18 0
      getcomments.php
  5. 6 7
      image.js
  6. 17 3
      image.php
  7. 84 0
      include/comment.php
  8. 2 0
      include/db.php
  9. 2 2
      index.php
  10. 67 0
      sendcomment.php
  11. 45 26
      style.css

+ 1 - 1
.gitignore

@@ -3,4 +3,4 @@
 */*.png
 */*.gif
 miniatury/
-
+include/config.php

+ 72 - 0
comment.js

@@ -0,0 +1,72 @@
+
+function commentFormSubmit(e) {
+	e.preventDefault();
+	var nick = $('#comment-nick').val();
+	var email = $('#comment-email').val();
+	var content = $('#comment-content').val();
+	var commentType = $('#comment-type').val();
+	var commentId = $('#comment-id').val();
+	if (!nick) {
+		alert('Nie podano autora komentarza!');
+		return;
+	}
+	if (!content) {
+		alert('Nie można wysłać pustego komentarza!');
+		return;
+	}
+	var formData = {
+		'comment-nick': nick,
+		'comment-email': email,
+		'comment-content': content,
+		'comment-type': commentType,
+		'comment-id': commentId,
+		'mode': 'json'
+	};
+	
+	$.ajax({
+		dataType: 'json',
+		type: 'POST',
+		data: formData,
+		url: scriptUrlPrefix+'sendcomment.php',
+		success: commentSubmitDone,
+		error: commentSubmitFailed,
+	});
+}
+
+function commentSubmitFailed(data) {
+	alert('Nie udało się przesłać komentarza do serwera.');
+}
+
+function commentSubmitDone(data) {
+	if (data.result == 'OK') {
+		alert('Dodano komentarz');
+		refreshComments();
+	} else {
+		alert('Nie udało się dodać komentarza! Komunikat od serwera: ' + data.error);
+	}
+}
+
+function refreshComments() {
+	var commentType = $('#comment-type').val();
+	var commentId = $('#comment-id').val();
+
+	var formData = {
+		'type': commentType,
+		'id': commentId,
+	};
+	
+	$.ajax({
+		dataType: 'html',
+		type: 'GET',
+		data: formData,
+		url: scriptUrlPrefix+'getcomments.php',
+		success: function(data) {
+			$('#comments').html(data);
+		},
+	});
+}
+
+$(document).ready(function() {
+	$('#comment-form').on('submit', commentFormSubmit);
+});
+

+ 16 - 1
dir.php

@@ -1,6 +1,7 @@
 <?php
 require_once('include/config.php');
 require_once('include/db.php');
+require_once('include/comment.php');
 
 $dir = @$_GET['dir'];
 if (empty($dir)) {
@@ -24,17 +25,31 @@ if (!$images || count($images) == 0) {
 
 $dirname = htmlspecialchars($dirinfo['name']);
 
+$comments_data = get_comments($dirinfo['id'], 'dir');
+$comments = generate_comment_field($comments_data, 'dir', $dirinfo['id']);
+
 ?><!DOCTYPE html>
 <html>
 <head>
 <title>Obrazki: <?=$dirname?></title>
-<link rel="stylesheet" href="/obrazki/style.css" type="text/css">
+<link rel="stylesheet" href="style.css?<?=$time?>" type="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<script type="text/javascript">
+const imageUrlPrefix = <?=$config['imagepath']?>;
+const scriptUrlPrefix = <?=$config['basepath']?>;
+</script>
+<script type="text/javascript" src="https://k4be.pl/jquery/jquery-3.6.3.min.js"></script>
+<script type="text/javascript" src="comment.js?<?=$time?>"></script>
 </head>
 <body>
 <h1>Obrazki: <?=$dirname?></h1>
+<div id="image-list">
 <a class="gora" href="."></a><h2>... wybierz dowolny obrazek, najlepiej pierwszy.</h2>
 <?=$content?>
+</div>
+<div id="comments">
+<?=$comments?>
+</div>
 <a class="k4" href="http://k4be.pl/"></a>
 </body>
 </html>

+ 18 - 0
getcomments.php

@@ -0,0 +1,18 @@
+<?php
+require_once('include/config.php');
+require_once('include/db.php');
+require_once('include/comment.php');
+
+$type = @$_GET['type'];
+$id = @$_GET['id'];
+
+if (empty($type) || empty($id)){
+	die('Nieprawidłowe żądanie');
+}
+
+$comments_data = get_comments($id, $type);
+$comments = generate_comment_field($comments_data, $type, $id);
+
+echo $comments;
+
+?>

+ 6 - 7
obrazki.js → image.js

@@ -3,7 +3,6 @@ var imglist = null;
 var dirname = null;
 var filename = null;
 var currId = 0;
-const urlPrefix = '/obrazki/';
 
 function setLinks(e) {
 	var doPush = false;
@@ -18,13 +17,13 @@ function setLinks(e) {
 	/* replace the content */
 	filename = imglist[currId].name;
 	if (currId > 0) {
-		$('#poprz').attr('href', urlPrefix + 'image.php?dir=' + dirname + '&file=' + imglist[currId-1].name);
+		$('#poprz').attr('href', scriptUrlPrefix + 'image.php?dir=' + dirname + '&file=' + imglist[currId-1].name);
 		$('#poprz').show();
 	} else {
 		$('#poprz').hide();
 	}
 	if (currId < imglist.length - 1) {
-		var url = urlPrefix + 'image.php?dir=' + dirname + '&file=' + imglist[currId+1].name;
+		var url = scriptUrlPrefix + 'image.php?dir=' + dirname + '&file=' + imglist[currId+1].name;
 		$('#nast').attr('href', url);
 		$('#imagelink').attr('href', url);
 		$('#nast').show();
@@ -35,13 +34,13 @@ function setLinks(e) {
     var image = $("#image");
  //   image.fadeTo('fast', 0.2, function () {
  	image.css('opacity', '0.2');
-        image.attr('src', urlPrefix + dirname + '/' + filename);
+        image.attr('src', imageUrlPrefix + dirname + '/' + filename);
 		image.on('load', function() {
 //		    image.fadeTo('fast', 1);
 			image.css('opacity', '1');
 		});
         if (doPush)
-		window.history.pushState(currId, '', urlPrefix + 'image.php?dir=' + dirname + '&file=' + filename);
+		window.history.pushState(currId, '', scriptUrlPrefix + 'image.php?dir=' + dirname + '&file=' + filename);
 //    });
 }
 
@@ -81,7 +80,7 @@ function imglistReceived(data) {
 	$('#imagelink').click(nextImage);
 	$('#nast').click(nextImage);
 	window.onpopstate = setLinks;
-	window.history.replaceState(currId, '', urlPrefix + 'image.php?dir=' + dirname + '&file=' + filename);
+	window.history.replaceState(currId, '', scriptUrlPrefix + 'image.php?dir=' + dirname + '&file=' + filename);
 }
 
 function getImgList() {
@@ -96,7 +95,7 @@ function getImgList() {
 	var args = 'dir=' + dirname;
 	$.ajax({
 		dataType: 'json',
-		url: urlPrefix+'dirlist.php?'+args,
+		url: scriptUrlPrefix+'dirlist.php?'+args,
 		success: imglistReceived
 	});
 }

+ 17 - 3
image.php

@@ -1,6 +1,7 @@
 <?php
 require_once('include/config.php');
 require_once('include/db.php');
+require_once('include/comment.php');
 
 $dir = @$_GET['dir'];
 $file = @$_GET['file'];
@@ -40,7 +41,7 @@ if (!$fileinfo) {
 $dirhtml = urlencode($dirinfo['path']);
 $filehtml = urlencode($fileinfo['path']);
 
-$content = '<div><a class="gora" href="dir.php?dir='.$dirhtml.'"></a><a id="poprz" ';
+$content = '<div class="full-image-div"><a class="gora" href="dir.php?dir='.$dirhtml.'"></a><a id="poprz" ';
 if ($prev) {
 	$prevhtml = urlencode($prev['path']);
 	$content .= 'href="image.php?file='.$prevhtml.'&amp;dir='.$dirhtml.'"';
@@ -63,18 +64,31 @@ $content .= '></a>';
 
 $dirname = htmlspecialchars($dirinfo['name']);
 
+$comments_data = get_comments($fileinfo['id'], 'image');
+$comments = generate_comment_field($comments_data, 'image', $fileinfo['id']);
+
 ?><!DOCTYPE html>
 <html>
 <head>
 <title>Obrazki: <?=$dirname?></title>
-<link rel="stylesheet" href="/obrazki/style.css" type="text/css">
+<link rel="stylesheet" href="style.css?<?=$time?>" type="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<script type="text/javascript">
+const imageUrlPrefix = <?=$config['imagepath']?>;
+const scriptUrlPrefix = <?=$config['basepath']?>;
+</script>
 <script type="text/javascript" src="https://k4be.pl/jquery/jquery-3.6.3.min.js"></script>
-<script type="text/javascript" src="obrazki.js"></script>
+<script type="text/javascript" src="image.js?<?=$time?>"></script>
+<script type="text/javascript" src="comment.js?<?=$time?>"></script>
 </head>
 <body>
 <h1>Obrazki: <?=$dirname?></h1>
+<div id="image-frame">
 <?=$content?>
+</div>
+<div id="comments">
+<?=$comments?>
+</div>
 <a class="k4" href="http://k4be.pl/"></a>
 </body>
 </html>

+ 84 - 0
include/comment.php

@@ -0,0 +1,84 @@
+<?php
+
+function get_field_name($type) {
+	switch ($type) {
+		case 'dir':
+			return 'dir';
+		case 'image':
+			return 'image';
+		default:
+			throw new Exception('Invalid $type');
+	}
+}
+
+function get_comments($id, $type) {
+	global $pdo;
+
+	$sql = 'SELECT * FROM comments WHERE ' . get_field_name($type) . ' = :id';
+	$values = array(
+		':id' => $id,
+	);
+	try {
+		$res = $pdo->prepare($sql);
+		$res->execute($values);
+	} catch (PDOException $e) {
+		echo 'Query error: ' . $e->getMessage();
+		die();
+	}
+	$comments = [];
+	while($row = $res->fetch(PDO::FETCH_ASSOC)) {
+		$comments[] = $row;
+	}
+	return $comments;
+}
+
+function db_store_comment($nick, $email, $type, $id, $content) {
+	global $pdo;
+
+	$sql = 'INSERT INTO comments (ip, ' . get_field_name($type) . ', email, author, date, content) VALUES (:ip, :id, :email, :nick, :date, :content)';
+	$values = array (
+		':ip' => $_SERVER['REMOTE_ADDR'],
+		':id' => $id,
+		':email' => $email,
+		':nick' => $nick,
+		':date' => time(),
+		':content' => $content,
+	);
+    try {
+            $res = $pdo->prepare($sql);
+            $res->execute($values);
+    } catch (PDOException $e) {
+            echo 'Query error: ' . $e->getMessage();
+            die();
+    }
+}
+
+function generate_comment_field($comments, $type, $id) {
+	$emptytexts = array(
+		'dir' => 'Brak komentarzy do tego katalogu, możesz być pierwszy!',
+		'image' => 'Brak komentarzy do tego obrazka, możesz być pierwszy!',
+	);
+
+	$headertexts = array(
+		'dir' => 'Komentarze do katalogu',
+		'image' => 'Komentarze do obrazka',
+	);
+
+	if (count($comments) == 0) {
+        $output = '<h2>' . $emptytexts[$type] . '</h2>';
+	} else {
+		$output = '<h2>' . $headertexts[$type] . '</h2>';
+	}
+	foreach ($comments as $comment) {
+        	$output .= '<div class="comment-block"><div class="comment-author">Autor: ' . htmlspecialchars($comment['author']) . ', data: ' . date('j.m.Y G:i:s', $comment['date']) . '</div><div class="comment-text">' . htmlspecialchars($comment['content']) . '</div></div>';
+	}
+
+	$output .= '<h2>Dodaj nowy komentarz</h2><form id="comment-form" method="post" action="sendcomment.php"><table id="comment-form-table"><tr><td class="form-caption">Autor:</td><td><input type="text" name="comment-nick" id="comment-nick"></td></tr>';
+	$output .= '<tr><td class="form-caption">E-mail (nie pokażę go nikomu):</td><td><input type="text" name="comment-email" id="comment-email"></td></tr>';
+	$output .= '<tr><td colspan="2"><textarea id="comment-content" name="comment-content"></textarea></td></tr></table>';
+	$output .= '<input type="submit" value="Wyślij">';
+	$output .= '<input type="hidden" name="comment-type" id="comment-type" value="' . $type . '"><input type="hidden" name="comment-id" id="comment-id" value="' . $id . '"></form>';
+	return $output;
+}
+
+?>

+ 2 - 0
include/db.php

@@ -1,6 +1,8 @@
 <?php
 $pdo = null;
 $dsn = 'mysql:host=' . $config['host'] . ';dbname=' . $config['db'];
+$time = time();
+
 try { 
 	/* PDO object creation */
 	$pdo = new PDO($dsn, $config['user'], $config['passwd']);

+ 2 - 2
index.php

@@ -14,13 +14,13 @@ foreach ($dirs as $dir) {
 <html>
 <head>
 <title>Obrazki</title>
-<link rel="stylesheet" href="/obrazki/style.css" type="text/css">
+<link rel="stylesheet" href="/obrazki/style.css?<?=$time?>" type="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <h1>Dostępne katalogi z obrazkami</h1>
 Uwaga, nowy skrypt. Zgłoś problemy administratorowi.
-<table><tr><th>Nazwa</th><th>Obrazków</th><th>Utworzono</th></tr>
+<table id="dirlist"><tr><th>Nazwa</th><th>Obrazków</th><th>Utworzono</th></tr>
 <?=$dirs_html?>
 </table>
 <a class="k4" href="http://k4be.pl/"></a>

+ 67 - 0
sendcomment.php

@@ -0,0 +1,67 @@
+<?php
+require_once('include/config.php');
+require_once('include/db.php');
+require_once('include/comment.php');
+
+switch (@$_POST['mode']) {
+	case 'json':
+		$mode = 'json';
+		break;
+	default:
+		$mode = 'html';
+		break;
+}
+
+function store_comment() {
+	$nick = @$_POST['comment-nick'];
+	$email = @$_POST['comment-email'];
+	$type = @$_POST['comment-type'];
+	$id = @$_POST['comment-id'];
+	$content = @$_POST['comment-content'];
+
+	if (empty($nick) || strlen($nick) === 0) {
+		throw new Exception('Nie podano nicka');
+	}
+	if (empty($type) || strlen($type) === 0 || empty($id) || strlen($id) === 0) {
+		throw new Exception('Niepoprawne żądanie');
+	}
+	if (empty($content) || strlen($content) === 0) {
+		throw new Exception('Nie wpisano treści');
+	}
+
+	db_store_comment($nick, $email, $type, $id, $content);
+	return 'OK';
+}
+
+try {
+	$res = store_comment();
+	if ($mode == 'html') {
+		$output = $res;
+	} else {
+		$output = array('result' => $res);
+	}
+} catch (Exception $e) {
+	if ($mode == 'html') {
+		$output = 'Błąd: ' . $e->getMessage();
+	} else {
+		$output = array('result' => 'error', 'error' => $e->getMessage()); 
+	}
+}
+
+if ($mode == 'json') {
+	header('Content-Type: application/json; charset=utf-8');
+	echo json_encode($output);
+	die();
+}
+?><!DOCTYPE html>
+<html>
+<head>
+<title>Obrazki: komentarz</title>
+<link rel="stylesheet" href="style.css?<?=$time?>" type="text/css">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+</head>
+<body>
+<?=$output?><br>
+<a href="javascript:history.back()">Powrót</a>
+</body>
+</html>

+ 45 - 26
style.css

@@ -18,78 +18,97 @@ img.pelny {
 }
 
 #poprz,#nast,.k4,.gora {
-width : 160px;
-height : 100px;
-display: block;
-margin: 3em;
-background-repeat: no-repeat;
+	width : 160px;
+	height : 100px;
+	display: block;
+	margin: 3em;
+	background-repeat: no-repeat;
 }
 
 #poprz {
-float:left;
-clear: both;
-background-image : url(poprz.png);
+	float:left;
+	clear: both;
+	background-image : url(poprz.png);
 }
 
 #poprz:hover {
-background-image : url(poprzh.png);
+	background-image : url(poprzh.png);
 } 
 
 #nast {
 	margin-top: 17em;
-float:right;
-margin-right: 0;
-background-image : url(nast.png);
+	float:right;
+	margin-right: 0;
+	background-image : url(nast.png);
 }
 
 #nast:hover {
-background-image : url(nasth.png);
+	background-image : url(nasth.png);
 } 
 
 .k4 {
-width: 210px;
-height : 130px;
-clear: both;
-background-image : url(k4.png);
+	width: 210px;
+	height : 130px;
+	clear: both;
+	background-image : url(k4.png);
 }
 
 .k4:hover {
-background-image : url(k4h.png);
+	background-image : url(k4h.png);
 } 
 
 .gora {
-float: left;
-background-image : url(gora.png);
+	float: left;
+	background-image : url(gora.png);
 }
 
 .gora:hover {
-background-image : url(gorah.png);
+	background-image : url(gorah.png);
 } 
 
-div {
+#full-image-div {
 	float: left;
 	width: 200px;
 }
 
-td,th {
+#dirlist td,th {
 	border-color: black;
 	border-style: solid;
 	border-width: 3px;
 	text-align: center;
 }
 
-th {
+#dirlist th {
 	border-width: 1px;
 	padding: 3px;
 }
 
-td a {
+#dirlist td a {
 	display: block;
 	padding: 5px;
 	font-weight: bolder;
 }
 
-td a:hover {
+.dirlist td a:hover {
 	background-color: #ddf;
 }
 
+#comments {
+	clear: both;
+}
+
+#comment-form-table tr td.form-caption {
+	text-align: right;
+}
+
+#comment-form-table textarea {
+	width: 98%;
+	height: 5em;
+}
+
+.comment-block {
+	border: 1px solid gray;
+	margin-bottom: .8em;
+}
+
+