⽹站系统（附H5系统源码开源版）
开源⽹站系统是指在互联⽹上通过发送者和接收者之间实时传输⽂本信息的任何⼀种通信⽅式，这是⼀个使⽤PHP/MySQLi和AJAX/jQuery系统源码创建的系统。
源码演⽰及下载：p
PHP系统是⼀个交互式⼯具，它可以快速缩⼩您的选择范围，并联系多个供应商、客户等。此外，它还可以给您的业务带来对⽤户体验的重⼤影响。在本⽂中，我们将使⽤PHP和jQuery创建⼀个简单的基于web的系统。
我们今天将要构建的系统将⾮常简单，它将包括登录和注销系统、ajax风格的特性以及对多个⽤户的⽀持。
步骤1:HTML标记
我们将从创建第⼀个名为index.php的⽂件开始本教程。
<! DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< title >Tuts+ Chat Application</ title >
< meta name = "description" content = "Tuts+ Chat Application" />
< link rel = "stylesheet" href = "style.css" />
</ head >
< body >
< div id = "wrapper" >
< div id = "menu" >
< p class = "welcome" >Welcome, < b ></ b ></ p >
< p class = "logout" >< a id = "exit" href = "#" >Exit Chat</ a ></ p >
</ div >
< div id = "chatbox" ></ div >
< form name = "message" action = "" >
< input name = "usermsg" type = "text" id = "usermsg" />
< input name = "submitmsg" type = "submit" id = "submitmsg" value = "Send" />
</ form >
</ div >
< script type = "text/javascript" >
// jQuery Document
$(document).ready(function () {});
</ script >
</ body >
</ html >
jquery在线库 我们从常见的DOCTYPE、HTML、head和body标签开始我们的HTML。在head标签中，我们添加标题并链接到CSS样式表(style.css)。
在body标签内部，我们在#包装我们将有三个主要的块:⼀个简单的菜单、我们的聊天框和我们的消息输⼊，每个都有各⾃的div和id。
的#菜单Div将由两个段落元素组成。第⼀个将是⽤户欢迎的，将在左边，第⼆个将是⼀个退出链接，
将在右边。我们使⽤flexbox来进⾏布局，⽽不是使⽤浮动元素。
的# chatboxDiv将包含我们的聊天⽇志。我们将使⽤jQuery从外部⽂件加载我们的⽇志ajax请求。
我们的最后⼀项#包装Div将是我们的表单，它将包含⽤于⽤户消息的⽂本输⼊和⼀个提交按钮。
我们最后添加脚本以更快地加载页⾯。我们将⾸先链接到Cloudflare jQuery CDN，因为我们将在本教程中使⽤jQuery库。第⼆个脚本标记是我们将要处理的。我们将在⽂档就绪后加载所有代码。
步骤2:CSS样式
现在，我们将添加⼀些CSS，使我们的聊天应⽤程序看起来⽐使⽤默认浏览器样式更好。下⾯的代码将被添加到我们的style.css⽂件中。
* {
margin : 0 ;
padding : 0 ;
}
body {
margin : 20px auto ;
font-family : "Lato" ;
font-weight : 300 ;
}
form {
padding : 15px 25px ;
display : flex;
gap: 10px ;
justify- content : center ;
}
form label {
font-size : 1.5 rem;
font-weight : bold ;
}
input {
font-family : "Lato" ;
}
a {
color : #0000ff ;
text-decoration : none ;
}
a:hover {
text-decoration : underline ;
}
#wrapper,
#loginform {
margin : 0 auto ;
padding-bottom : 25px ;
background : #eee ;
width : 600px ;
max-width : 100% ;
border : 2px solid #212121 ;
border-radius: 4px ;
}
#loginform {
padding-top : 18px ;
text-align : center ;
}
#loginform p {
padding : 15px 25px ;
font-size : 1.4 rem;
font-weight : bold ;
}
#chatbox {
text-align : left ;
margin : 0 auto ;
margin-bottom : 25px ;
padding : 10px ;
background : #fff ;
height : 300px ;
width : 530px ;
border : 1px solid #a7a7a7 ;
overflow : auto ;
border-radius: 4px ;
border-bottom : 4px solid #a7a7a7 ;
}
#usermsg {
flex: 1 ;
border-radius: 4px ;
border : 1px solid #ff9800 ;
}
#name {
border-radius: 4px ;
border : 1px solid #ff9800 ;
padding : 2px 8px ;
}
#submitmsg,
#enter{
background : #ff9800 ;
border : 2px solid #e65100 ;
color : white ;
padding : 4px 10px ;
font-weight : bold ;
border-radius: 4px ;
}
.error {
color : #ff0000 ;
}
#menu {
padding : 15px 25px ;
display : flex;
}
#menu p.welcome {
flex: 1 ;
}
a#exit {
color : white ;
background : #c62828 ;
padding : 4px 8px ;
border-radius: 4px ;
font-weight : bold ;
}
.msgln {
margin : 0 0 5px 0 ;
}
.msgln span.left-info {
color : orangered;
}
.msgln span.chat-time {
color : #666 ;
font-size : 60% ;
vertical-align : super ;
}
.msgln b.user-name, .msgln b.user-name- left {
font-weight : bold ;
background : #546e7a ;
color : white ;
padding : 2px 4px ;
font-size : 90% ;
border-radius: 4px ;
margin : 0 5px 0 0 ;
}
.msgln b.user-name- left {
background : orangered;
}
上⾯的CSS没有什么特别之处，除了⼀些我们已经设置了样式的id或类将稍后添加。 TutsPlus Chat App Interface
正如您在上⾯看到的，我们已经完成了聊天⽤户界⾯的构建。
步骤3：使⽤PHP创建登录表单
现在，我们将实现⼀个简单的表单，该表单将在进⼀步继续之前询问⽤户的姓名。
<?php
session_start();
if (isset( $_POST [ 'enter' ])){
if ( $_POST [ 'name' ] != "" ){
$_SESSION [ 'name' ] = stripslashes (htmlspecialchars( $_POST [ 'name' ]));
}
else {
echo '<span class="error">Please type in a name</span>' ;
}
}
function loginForm(){
echo '
<div id= "loginform" >
<p>Please enter your name to continue !</p>
<form action= "index.php" method= "post" >
<label for = "name" >Name —</label>
<input type= "text" name= "name" id= "name" />
<input type= "submit" name= "enter" id= "enter" value= "Enter" />
</form>
</div>
';
}
?>
我们创建的loginForm()函数由⼀个简单的登录表单组成，该表单向⽤户询问他/她的姓名。然后，我们使⽤if和else语句来验证这个⼈是否输⼊了名字。如果这个⼈输⼊了⼀个名字，我们将这个名字设置为$_SESSION['name']。因为我们使⽤基于cookie的会话来存储名称，所以必须在将任何内容输出到浏览器之前调⽤session_start()。
您可能需要密切注意的⼀件事是，我们使⽤了htmlspecialchars()函数，它将特殊字符转换为HTML实体，从⽽保护name变量免受跨站点脚本编写(XSS)的影响。稍后，我们还将把这个函数添加到将发布到聊天⽇志的⽂本变量中。
显⽰登⼊表格
为了在⽤户没有登录(因此没有创建会话)的情况下显⽰登录表单，我们在原始代码中的#wrapper div和script标记周围使⽤了另⼀个if和else语句。在相反的情况下，如果⽤户已经登录并创建了会话，这将隐藏登录表单并显⽰聊天框。
<?php
if (!isset( $_SESSION [ 'name' ])){
loginForm();
}
else {
?>
<div id= "wrapper" >
<div id= "menu" >
<p class = "welcome" >Welcome, <b><?php echo$_SESSION [ 'name' ]; ?></b></p>
<p class = "logout" ><a id= "exit" href= "#" > Exit Chat</a></p>
</div>
<div id= "chatbox" >
<?php
if ( file_exists ( "log.html" ) && filesize ( "log.html" ) > 0){
$contents = file_get_contents ( "log.html" );
echo$contents ;
}
?>
</div>
<form name= "message" action= "" >
<input name= "usermsg" type= "text" id= "usermsg" />
<input name= "submitmsg" type= "submit" id= "submitmsg" value= "Send" />
</form>
</div>
<script type= "text/javascript" >
// jQuery Document
$(document).ready( function (){
});
</script>
<?php
}
?>
欢迎和注销菜单
我们还没有完成为这个聊天应⽤程序创建登录系统。我们仍然需要允许⽤户注销并结束聊天会话。如果您还记得的话，我们最初的HTML标记包括⼀个简单的菜单。让我们返回并添加⼀些PHP代码，为菜单提供更多的功能。
⾸先，让我们将⽤户名添加到欢迎消息中。我们通过输出⽤户名的会话来做到这⼀点。
<p class = "welcome" >Welcome, <b><?php echo$_SESSION [ 'name' ]; ?></b></p>
为了允许⽤户退出并结束会话，我们将跳过前⾯的步骤，简单地使⽤jQuery。
<script type= "text/javascript" >
// jQuery Document
$(document).ready( function (){
//If user wants to end session
$( "#exit" ).click( function (){
var exit = confirm( "Are you sure you want to end the session?" );
if (exit== true ){window.location = 'index.php?logout=true' ;}
});
});
</script>
如果⽤户单击#exit链接，上⾯的jQuery代码将显⽰⼀个确认警告。如果⽤户确认退出，因此决定结束会话，那么我们将它们发送到index.php?logout=true。这只是创建⼀个名为logout的变量，其值为true。我们需要⽤PHP捕获这个变量:
if (isset( $_GET [ 'logout' ])){
//Simple exit message
$logout_message = "<div class='msgln'><span class='left-info'>User <b class='user-name-left'>" . $_SESSION [ 'name' ] . "</b> has left the chat session.</span><br></div>" ;
file_put_contents ( "log.html" , $logout_message , FILE_APPEND | LOCK_EX);
session_destroy();
header( "Location: index.php" ); //Redirect the user
}
现在我们使⽤isset()函数来查看是否存在⼀个名为'logout'的get变量。如果变量是通过URL传递的，⽐如上⾯提到的链接，那么我们将继续结束⽤户名的会话。
在使⽤session_destroy()函数销毁⽤户名会话之前，我们希望在聊天⽇志中写⼊⼀条简单的退出消息。它会说⽤户已经离开了聊天会话。我们通过使⽤file_put_contents()函数来操作我们的log.html⽂件来做到这⼀点，我们将在后⾯看到，这个⽂件将被创建为我们的聊天⽇志。file_put_contents()函数是将数据写⼊⽂本⽂件的⼀种⽅便⽅法，⽽不是每次都使⽤fopen()、fwrite()和fclose()。只要确保传递适当的标志(如FILE_APPEND)，将数据追加到⽂件的末尾即可。否则，新的$logout_message将覆盖⽂件以前的内容。请注意，我们已经向div添加了⼀个msgln类。我们已经为这个div定义了CSS样式。
在此之后，我们销毁会话并将⽤户重定向到登录表单将出现的页⾯。
步骤4：处理⽤户输⼊
⽤户提交表单后，我们希望获取他们的输⼊并将其写⼊聊天⽇志。为了做到这⼀点，我们必须使⽤jQuery和PHP在客户端和服务器端同步⼯作。
jQuery
我们使⽤jQuery处理数据的⼏乎所有操作都将围绕jQuery post请求进⾏。
//If user submits the form
$( "#submitmsg" ).click( function () {
var clientmsg = $( "#usermsg" ).val();
$.post( "post.php" , { text: clientmsg });
$( "#usermsg" ).val( "" );
return false ;
});
在我们做任何事情之前，我们必须获取⽤户的输⼊，或者⽤户已经输⼊到# submitmsg输⼊。这可以通过⽡尔()函数，它获取表单字段中的值集。我们现在将这个值存储在clientmsg变量。
下⾯是我们最重要的部分:jQuery post请求。将⼀个POST请求发送到post.php我们马上要创建的⽂件。它提交客户机的输⼊，或者保存到clientmsg变量。
最后，我们清理# usermsg通过将value属性设置为空进⾏输⼊。
请注意，上⾯的代码将放⼊我们的script标记中，我们在这⾥放置了jQuery注销代码。
PHP: post.php⽂件
⽬前，每次⽤户提交表单并发送新消息时，我们都会将POST数据发送到POST .php⽂件。我们现在的⽬标是获取这些数据并将其写⼊聊天⽇志。
<?
session_start();
if (isset( $_SESSION [ 'name' ])){
$text = $_POST [ 'text' ];
$text_message = "<div class='msgln'><span class='chat-time'>" . date ( "g:i A" ). "</span> <b class='user-name'>" . $_SESSION [ 'name' ]. "</b> " . stripslashes (htmlspecialchars( $text )). "<br></div>" ;
file_put_contents ( "log.html" , $text_message , FILE_APPEND | LOCK_EX);
}
?>
在执⾏任何操作之前，必须使⽤session_start()函数启动post.php⽂件，因为我们将在该⽂件中使⽤⽤户名的会话。
使⽤isset布尔值，我们在执⾏其他操作之前检查会话是否存在'name'。我们现在获取由jQuery发送到这个⽂件的POST数据。我们将该数据存储到$text变量中。与所有总体⽤户输⼊数据⼀样，该数据将存储在log.html⽂件中。我们只需使⽤file_put_contents()函数将所有数据写⼊⽂件。
我们将要编写的消息将被封装在.msgln div中。它将包含date()函数⽣成的⽇期和时间，⽤户名的会话，以及⽂本，⽂本也被htmlspecialchars()函数包围，以防⽌XSS。
步骤5：显⽰聊天⽇志内容
⽤户发布的所有内容都使⽤jQuery进⾏处理和发布；它被写⼊PHP聊天⽇志。剩下要做的唯⼀⼀件事是⽤log.php向⽤户显⽰更新后的聊天⽇志。
为了节省我们⾃⼰的时间，我们将预加载聊天⽇志到#chatbox div，如果它有任何内容。
<div id= "chatbox" ><?php
if ( file_exists ( "log.html" ) && filesize ( "log.html" ) > 0){
$contents = file_get_contents ( "log.html" );
echo$contents ;
}
?></div>
我们使⽤了与post.php⽂件中使⽤的类似的例程，只不过这⼀次我们只读取和输出⽂件的内容。
的jQuery.ajax请求
AJAX请求是我们所做的⼀切的核⼼。这个请求不仅允许我们在不刷新页⾯的情况下通过表单发送和接收数据，⽽且还允许我们处理所请求的数据。
//Load the file containing the chat log
function loadLog(){
$.ajax({
url: "log.html" ,
cache: false ,
success: function (html){
$( "#chatbox" ).html(html); //Insert chat log into the #chatbox div
},
});
}
我们将AJAX请求封装在函数中。你马上就会明⽩为什么。正如您在上⾯看到的，我们将只使⽤三个jQuery AJAX请求对象。
url：请求的url字符串。我们将使⽤聊天⽇志的⽂件名log.html。
cache：这将阻⽌我们的⽂件被缓存。它将确保我们每次发送请求时都得到⼀个更新的聊天⽇志。
success：这将允许我们附加⼀个函数来传递我们请求的数据。
如您所见，然后我们将请求的HTML数据移动到#chatbox div中。
Auto-Scrolling
正如您在其他聊天应⽤程序中看到的，如果聊天⽇志容器(#chatbox)溢出，内容会⾃动向下滚动。我们将实现⼀个简单⽽相似的特性，它将⽐较在执⾏AJAX请求之前和之后容器的滚动⾼度。如果在请求后滚动⾼度更⼤，我们将使⽤jQuery的动画效果来滚动#chatbox div。
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $( "#chatbox" )[0].scrollHeight - 20; //Scroll height before the request
$.ajax({
url: "log.html" ,
cache: false ,
success: function (html){
$( "#chatbox" ).html(html); //Insert chat log into the #chatbox div
//Auto-scroll
var newscrollHeight = $( "#chatbox" )[0].scrollHeight - 20; //Scroll height after the request
if (newscrollHeight > oldscrollHeight){
$( "#chatbox" ).animate({ scrollTop: newscrollHeight }, 'normal' ); //Autoscroll to bottom of div
}
},
});
}
在发出请求之前，我们⾸先将#chatbox div的滚动⾼度存储到oldscrollHeight变量中。请求成功返回后，我们将#chatbox div的滚动⾼度存储到newscrollHeight变量中。
然后，我们使⽤if语句⽐较两个滚动⾼度变量。如果newscrollHeight⼤于oldscrollHeight，我们使⽤动画效果来滚动#chatbox div。
持续更新聊天记录
现在可能会出现⼀个问题：我们如何不断更新在⽤户之间来回发送的新数据?或者换句话说，我们将如何不断发送请求来更新数据?
setInterval (loadLog, 2500); //Reload file every 2500 ms or x ms if you wish to change the second parameter
我们的问题的答案在于setInterval函数。这个函数将每2.5秒运⾏⼀次loadLog()函数，loadLog函数将请求更新后的⽂件并⾃动滚动div。
Tutsplus Chat App Network
完整的代码
如果正确的代码没有按正确的顺序放置在正确的⽂件中，聊天应⽤程序可能⽆法正常⼯作。为了避免混淆，我将把整个代码放在两个单独的⽂件index.php和post.php中。
以下是index.php的代码:
<?php
session_start();
if (isset( $_GET [ 'logout' ])){
//Simple exit message
$logout_message = "<div class='msgln'><span class='left-info'>User <b class='user-name-left'>" . $_SESSION [ 'name' ] . "</b> has left the chat session.</span><br></div>" ;
file_put_contents ( "log.html" , $logout_message , FILE_APPEND | LOCK_EX);
session_destroy();
header( "Location: index.php" ); //Redirect the user
}
if (isset( $_POST [ 'enter' ])){
if ( $_POST [ 'name' ] != "" ){
$_SESSION [ 'name' ] = stripslashes (htmlspecialchars( $_POST [ 'name' ]));
}
else {
echo '<span class="error">Please type in a name</span>' ;
}
}
function loginForm(){
echo
'<div id= "loginform" >
<p>Please enter your name to continue !</p>
<form action= "index.php" method= "post" >
<label for = "name" >Name —</label>
<input type= "text" name= "name" id= "name" />
<input type= "submit" name= "enter" id= "enter" value= "Enter" />
</form>
</div>';
}
?>
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" />
<title>Tuts+ Chat Application</title>
<meta name= "description" content= "Tuts+ Chat Application" />
<link rel= "stylesheet" href= "style.css" />
</head>
<body>
<?php
if (!isset( $_SESSION [ 'name' ])){
loginForm();
}
else {
?>
<div id= "wrapper" >
<div id= "menu" >
<p class = "welcome" >Welcome, <b><?php echo$_SESSION [ 'name' ]; ?></b></p>
<p class = "logout" ><a id= "exit" href= "#" > Exit Chat</a></p>
</div>
<div id= "chatbox" >
<?php
if ( file_exists ( "log.html" ) && filesize ( "log.html" ) > 0){
$contents = file_get_contents ( "log.html" );
echo$contents ;
}
?>
</div>
<form name= "message" action= "" >
<input name= "usermsg" type= "text" id= "usermsg" />
<input name= "submitmsg" type= "submit" id= "submitmsg" value= "Send" />
</form>
</div>
<script type= "text/javascript" >
// jQuery Document
$(document).ready( function () {
$( "#submitmsg" ).click( function () {
var clientmsg = $( "#usermsg" ).val();
$.post( "post.php" , { text: clientmsg });
$( "#usermsg" ).val( "" );
return false;
});
function loadLog() {
var oldscrollHeight = $( "#chatbox" )[0].scrollHeight - 20; //Scroll height before the request
$.ajax({
url: "log.html" ,
cache: false,
success: function (html) {
$( "#chatbox" ).html(html); //Insert chat log into the #chatbox div
//Auto-scroll
var newscrollHeight = $( "#chatbox" )[0].scrollHeight - 20; //Scroll height after the request
if (newscrollHeight > oldscrollHeight){
$( "#chatbox" ).animate({ scrollTop: newscrollHeight }, 'normal' ); //Autoscroll to bottom of div
}
}
});
}
setInterval (loadLog, 2500);
$( "#exit" ).click( function () {
var exit = confirm( "Are you sure you want to end the session?" );
if ( exit == true) {
window.location = "index.php?logout=true" ;
}
});
});
</script>
</body>
</html>
<?php
}
?>
下⾯是post.php的代码:
<?php
session_start();
if (isset( $_SESSION [ 'name' ])){
$text = $_POST [ 'text' ];
$text_message = "<div class='msgln'><span class='chat-time'>" . date ( "g:i A" ). "</span> <b class='user-name'>" . $_SESSION [ 'name' ]. "</b> " . stripslashes (htmlspecialchars( $text )). "<br></div>" ;
file_put_contents ( "log.html" , $text_message , FILE_APPEND | LOCK_EX);
}
?>
css中的代码已经在教程的第2步中可⽤了。
如果您的代码似乎不能⼯作，请确保它与这⾥提供的代码匹配。请注意，所有这三个⽂件(index.php、post.php和style.css)都位于同⼀个⽬录中。
系统源码是基于web的应⽤程序，是建⽴在PHP MySQL Ajax。对于系统的后端，使⽤SQL服务器，以便以后检索它。它就像⼀个⽤户可以与其他⽤户聊天的信使。此外，多个⽤户也可以在⼀组聊天。系统也会⾃动更新聊天记录。
该⽹站客服系统系统供有共同兴趣交换消息的⽤户使⽤。这对那些与更多的⼈分享信息的⽤户也有帮助。系统由Admin和users两部分组成。系统的⽤户是普通⼈，他们可以登录到系统，相反，它们将被允许在彼此之间交换信息。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论