PHP和mysql+jqueyr建立类twitter站点

作者佚名技术来源 NET编程浏览发布时间 2012-03-16

将代码保存为index.php，我们将向文件中添加一些PHP代码以便显示消息。

接着，我们可以用CSS定义页面的样式。CSS文件命名为style.css：

以下为引用的内容：

body {
    font:0.8em/1.5 "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica;
    color:#333;
    background:#9AE4E8 url(''bg.gif'') no-repeat fixed left top;
}

#title{
margin:20px 0px 10px 380px;
}

#title img {
border:0;
width:150px;
}

#title h2{
margin-top:10px;
font-size:small;
}

#footer {
    text-align:center;
    margin-top: 10px;
    padding-bottom: 4px;
    padding-top: 4px;
}

#arrow {
margin-top: 8px;
padding-left: 420px;
}

#container, #footer {
    background-color:white;
    padding-top: 10px;
    color: #000000;
width:560px;
    margin-left: auto;
    margin-right: auto;
}

#footer {
margin-bottom:30px;
}

#container {
    padding-bottom: 30px;
    width:560px;
    margin-left: auto;
    margin-right: auto;
}

#container form {
margin:10px 0px 10px 50px;
}

legend {
padding:0px 0px 0px 320px;
}
legend span {
font-weight:bold;
}

#footer_a {
    display:inline;
    word-spacing: 2px;
    font-size: 14px;
    padding-left: 10px;
}

fieldset {
    border: none;
}
textarea {
    border: 1px dotted #449F00;
    width: 400px;
    height: 50px;
    padding: 5px;
    font-weight:bold;
    color:green;
}

当然，请不要忘了引用外部CSS文件。

第二步：用mysql创建数据库

mysql是一个非常强大的数据库系统，最重要的是，可以免费使用在我们的例子中，我们将使用mysql保存我们的消息数据。创建一个新表“message”，其字段如下所列：

id: key of this table, integer, auto-increment
message: the text of message, string
date: the message date, data format

该表设计如下：

创建该表的sql脚本如下：

CREATE TABLE `microblog`.`message` (
`id` int(10) unsigned NOT NULL auto_increment,
`message` text NOT NULL,
`date` datetime NOT NULL,
PRIMARY KEY (`id`)
);

第三步：用php配置mysql连接

在本教程中，我们建立一个配置文件用于保存数据库配置信息，例如主机名、用户名、密码、数据库名称，等等。文件config.php如下：

以下为引用的内容：
<?php
// Configuration
$dbhost = ''localhost'';
$dbuser = ''root'';
$dbpass = '''';
$dbname = ''microblog'';

$conn = mysql_connect ($dbhost, $dbuser, $dbpass) or die (''I cannot connect to the database because: '' . mysql_error());
mysql_select_db ($dbname);
?>

在代码中，mysql_connect（）函数用于丽娜接mysql数据库服务器。该函数有三个参数：主机名、用户名和密码。连接数据库后，我们可以用函数mysql_select_db（）查询活动的数据库，mysql_select_db（）需要一个参数，数据库名称。

第四步：实现信息发布功能

发布和显示消息是本教程的核心功能。我们将使用jquery库来实现它。首先我们应在html页面中包含jquery库。

所有jquery代码将被保存在main.js中，也应被包含在html页面：

在main.js中，我们应在编写jquery代码之前定义函数$（document）.ready（）。

$(document).ready(function(){
//Place your codes here
});

实现发布新消息的ajax代码如下：

$(document).ready(function(){
    $.post("backend.php",{
        message: $("#message").val(),
        action: "postmsg"
            }, function(xml) {
                $("#comm").html("The latest Update: ");
                addMessages(xml);
            });
        return false;
    });
});

在代码中，$post（）函数用于通过ajax发布信息到后台逻辑backend.php。返回数据是xml格式。addMessages（）函数用于不刷新页面显示新更新的消息。

function addMessages(xml) {
    message = $("message",xml).get(0);
    $("#comments").prepend("<li><p class=''info''>Added on Today:</p>    <div class=''body''>"
+ $("text",message).text() + "</div></li>");
    $("#message").val("").focus();

}

返回数据是xml格式，从firebug中，我们能看到：

下面是该xml文件的一个例子：

那么，在上面的jquery代码中，$（”text”，message）.text（）用于得到消息。请注意如何使用javascript/jquery得到xml文件节点的值。

第五步：实现backend.php

backend.php文件用于接收前台的ajax请求，并返回xml格式的消息。其内容如下：

以下为引用的内容：
<?php
include("config.php");
header("Content-type: text/xml");
header("Cache-Control: no-cache");

foreach( PHP和mysql+jqueyr建立类twitter站点 - 凌众科技

网站建设|独享带宽服务器|优惠促销机型|付款方式|联系我们

快速业务通道

欢迎光临凌众科技，我们将竭诚为您提供最优质的服务！业务电话：0592-5908028 技术支持电话：0592-5908020

技术文章 > Web编程 > PHP编程 > 正文

文件 -1 text win2 服务域名

PHP和mysql+jqueyr建立类twitter站点

作者佚名技术来源 NET编程浏览发布时间 2012-03-16

content

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: PHP教程:几段值得初学者研究的PHP代码段下一篇: PHP服务端代理页面开发

关于PHP和mysql+jqueyr建立类twitter站点的所有评论

随机推荐

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁）邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号

POST as $key => $value)
{
$key = mysql_real_escape_string($value);
}

if(@$action == "postmsg")
{
// prepare the query string
$query = "INSERT INTO message (message, date) VALUES (''$message'', current_date)";
mysql_query($query) or die(''Error, query failed. '' . mysql_error());
}

echo "<?xml version=\"1.0\"?>\n";
echo "\t<message>\n";
echo "\t\t<text>$message</text>\n";
echo "\t</message>\n";
?>

前台会从backend.php得到xml相应，并解码xml文件显示在页面上。

第六步：用样式显示消息

用户每次载入页面，我们应在页面上显示旧的消息。因此，我们需要查询数据库以便得到旧的消息并显示他们：

以下为引用的内容：
<div id="messagewindow">
<?php
include("config.php");
// prepare the query string
$query = "SELECT id, message, DATE_FORMAT(date, ''%Y-%m-%d'') ".
"FROM message ".
"ORDER BY id DESC ";

// execute the query
$result = mysql_query($query) or die(''Error, query failed. '' . mysql_error());

// if the guestbook is empty show a message
if(mysql_num_rows($result) == 0)
{
echo "<h3 id=''comm''>No updates now.</h3>";
echo "<ul id=''comments''></ul>";
}
else
{
echo "<h3 id=''comm''>The latest Update: </h3>" .
"<ul id=''comments''>";

while($row = mysql_fetch_array($result))
{
list($id, $message, $date) = $row;

$message = htmlspecialchars($message);

$message = nl2br($message);

echo "<li><p class=''info''>Added on $date :</p>";
echo "<div class=''body''><p>" . $message . "</p>";
echo "</div></li>";
}
echo "</ul>";
}
?>
</div>
</div>

这些代码也位于在index.php中，同样，我们应用CSS定义一个漂亮的消息显示：

以下为引用的内容：
#comments, #comments li{
    margin:0;
    padding:0;
    list-style:none;
}
#comments li{
    padding:.5em;
    margin:.5em 0;
    background:#fcfcfc;
    border:1px solid #e1e1e1;
}
#comments li .info{
    padding:.2em 20px;
    background:#f1f1f1 url(images/ico_comments.gif) no-repeat 2px 50%;
    margin:0;
    color:#333;
    font-family:Georgia, "Times New Roman", Times, serif;
}
#comments li .body{
    padding:.5em 20px;
}
#commentForm {
    width: 550px;
}

#messagewindow {
padding: 25px;
overflow: auto;
}

现在，在我们添加一个新的更新后，页面看起来如下：

PHP和mysql+jqueyr建立类twitter站点

第七步：为输入框创建字符计算

在twitter中有个有趣的功能，只允许用户输入最多140个字符，当用户输入时，twitter会告诉用户，他/她还能输入多少字符。如下所示：

在我们的教程中，我们没必要限制用户输入为140个字符，当我们也可以计算用户输入了多少字符，并且能在用户输入时即时显示字符计数。

该功能实现代码如下：

$(document).ready(function(){
    $("#counter").html($("#message").val().length + "");
    $("#message").keyup(function(){
        // get new length of characters
        $("#counter").html($(this).val().length);
    });
});

现在，当用户输入时，字符计数会同时增加，如下所示：