01-09-2011, 05:09 PM
This is the bare Javascript version of my newest script.
http://projectevolution.net76.net/tutorials/webdev/
index.php
post.php
tables.sql
I may make one jsut using jQuery another time.
Enjoy.
- Uses AJAX to submit comments
- Dynamically shows new comments
- Stores all content in database
- Dates and IP logging with the database
- Support for individual 'statuses' (each comment box is its seperate div, meaning no comment from one box will appear on another)
- Unfinished dynamic comment box
http://projectevolution.net76.net/tutorials/webdev/
index.php
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fun st00f</title>
<script type="text/Javascript">
// Can be used to dynamically create comment box - just like facebook
// must be configured/fixed yourself
function showCommentBox(status_id) {
var status = document.getElementById("status");
var boxdiv = document.createElement("div");
var posterbox = document.createElement("input");
var label1 = document.createElement("label");
var label2 = document.createElement("label");
var commentbox = document.createElement("input");
var submit = document.createElement("input");
boxdiv.setAttribute("id", "comment");
posterbox.setAttribute("type", "text");
posterbox.setAttribute("id", "poster");
posterbox.setAttribute("name", "poster");
commentbox.setAttribute("type", "text");
commentbox.setAttribute("id", "reply");
commentbox.setAttribute("name", "reply");
submit.setAttribute("type", "button");
submit.setAttribute("value", "Comment");
submit.setAttribute("onclick", "post("+status_id+")");
label1.setAttribute("for", "poster");
label1.innerHTML = "Name: ";
label1.setAttribute("for", "reply");
label2.innerHTML = "Reply: ";
boxdiv.appendChild(label1);
boxdiv.appendChild(posterbox);
boxdiv.appendChild(document.createElement("br"));
boxdiv.appendChild(label2);
boxdiv.appendChild(commentbox);
boxdiv.appendChild(document.createElement("br"));
boxdiv.appendChild(submit);
status.appendChild(boxdiv);
}
function formatTime(i) {
if (i < 10)
i = "0" + i;
return i;
}
function post(status_id) {
var comment = document.getElementById("reply" + status_id).value;
var poster = document.getElementById("poster" + status_id).value;
if (comment == "" || poster == "") {
alert("You forgot to fill in the fields!");
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("comments" + status_id).innerHTML = xmlhttp.responseText;
}
}
var poster_ip = "<?php echo $_SERVER['REMOTE_ADDR']; ?>";
xmlhttp.open("POST", "post.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("status_id="+status_id+"&poster="+poster+"&reply="+comment+"&posterip="+poster_ip);
}
</script>
<style type="text/css">
#status {
width: 400px;
height: auto;
border: 1px solid gray;
margin-bottom: 20px;
}
#status img {
float: left;
padding: 5px;
}
#status h4 {
float: left;
margin-left: 15px;
}
#status p {
border-top: 1px solid gray;
clear: both;
padding: 5px;
}
#status a {
margin: 10px;
}
#comment_poster {
width: auto;
padding: 5px;
background: rgb(234, 239, 244);
margin-top: 5px;
font-weight: bold;
}
#comment {
width: auto;
padding: 5px;
background: rgb(234, 239, 244);
}
</style>
</head>
<body>
<h1>AJAX powered comment boxes system</h1>
<?php
$conn = mysql_connect('database servername', 'username', 'password');
if (!$conn)
die('Unable to initiate connection! ' . mysql_error());
mysql_select_db('db name');
$query = "SELECT * FROM ajax_statuses";
$result = mysql_query($query);
$input_id = 1;
while($row = mysql_fetch_array($result)) {
echo '
<div id="status">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs466.snc4/49132_100001901520624_8137639_q.jpg" alt ="" />
<h4>' . $row['status_poster'] . '</h4>
<p>' . $row['status'] . '</p>
<div id="comments'.$input_id.'" style="margin: 10px;">';
$query = "SELECT * FROM ajax_replies WHERE reply_id = " . $row['status_id'] . " ORDER BY reply_date ASC";
$result2 = mysql_query($query);
while($row2 = mysql_fetch_array($result2)) {
echo '<div id="comment_poster">' . $row2['reply_name'] . ' posted:</div>
<div id="comment">' . $row2['reply'] . ' - at: ' . $row2['reply_date'] . '</div>';
}
echo '</div>
<div id="comment">
<label for="poster">Name: </label><input type="text" id="poster'.$input_id.'" name="poster'.$input_id.'" /><br />
<label for="reply">Reply: </label><input type="text" id="reply'.$input_id.'" name="reply'.$input_id.'" /><br />
<input type="button" value="Comment" onclick="post(' . $row['status_id'] . ')" />
</div>
</div>';
$input_id++;
// <a href="javascript: showCommentBox(' . $row['status_id'] . ');" title="comment on this whore\'s status">Comment</a>
}
mysql_close($conn);
?>
</body>
</html>
post.php
PHP Code:
<?php
$status_id = $_POST['status_id'];
$poster = htmlspecialchars($_POST['poster']);
$reply = htmlspecialchars($_POST['reply']);
$poster_ip = $_POST['posterip'];
$post_date = date("Y-m-d H:i:s");
$conn = mysql_connect('db servername', 'username', 'password');
if (!$conn)
die('Unable to initiate connection! ' . mysql_error());
mysql_select_db('db name');
$query = "INSERT INTO ajax_replies VALUES ($status_id, '$reply', '$poster', '$poster_ip', '$post_date')";
$result = mysql_query($query);
if (!$result)
die(mysql_error());
$query = "SELECT * FROM ajax_replies WHERE reply_id = " . $status_id . " ORDER BY reply_date ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)) {
echo '<div id="comment_poster">' . $row['reply_name'] . ' posted:</div>
<div id="comment">' . $row['reply'] . ' - at: ' . $row['reply_date'] . '</div>';
}
mysql_close($conn);
?>tables.sql
Code:
CREATE TABLE ajax_statuses (
`status_id` int NOT NULL AUTO_INCREMENT,
`status` text NOT NULL,
`status_poster` text NOT NULL,
PRIMARY KEY (`status_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
CREATE TABLE ajax_replies (
`reply_id` int NOT NULL,
`reply` text NOT NULL,
`reply_name` text NOT NULL,
`reply_ip` text NOT NULL,
`reply_date` datetime NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;I may make one jsut using jQuery another time.
Enjoy.