Home Verkennen Help
Registreren Inloggen
k4be
/
obrazki
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Comments for dirs and images (mostly working)

k4be 1 jaar geleden
bovenliggende
96e73ab11e
commit
c0016a6dcc
11 gewijzigde bestanden met toevoegingen van 330 en 40 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  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
Bestand weergeven 

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

+ 72 - 0
comment.js
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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
Bestand weergeven 

@@ -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;
 
+}
 
+
 
+