[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统二
2011-04-16 23:03
1026 查看
接着上文 [原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统一 连载
上文给大家展示了实现的效果,本篇文章将详细给大家讲一下如何实现用户登陆及登陆成功提醒页面
注意,以下例子也你下载后无法正常运行属于正常,因为部分CSS文件和js文件还没有上传,我承诺一定会在该实例连载的最后一篇文章中上传本例所有的源代码~请大家支持我的原创论坛[3gput.com/3G开发者联盟]。
首先,实现用户的登陆很简单,我以前做过讲解,主要是用户登陆的时候将用户名和用户id放入到session中
具体代码如下:
用户登陆页面:
Code:
<html>
<head>
<title>未标题-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
body, p,td{
background-image: url(../images/Ml_BG.gif);
font-size: 9pt;
line-height: 16px;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #f5f5f5;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
r:{color: #d20404;}
.r:a:link {
color: #d20404;
text-decoration: underline;
}
.r:a:visited {
color: #f5f5f5;
text-decoration: none;
}
.r:a:hover {
color: #d20404;
text-decoration: none;
}
.input-border{
border:1px solid #b8b8b8;
width:100px;
line-height:23px;
font-size:14px;
height:24px;
padding-left: 2px;
}
.input-border1{
border:1px solid #b8b8b8;
width:173px;
line-height:23px;
font-size:14px;
height:24px;
padding-left: 2px;
}
w:{color: #507ea4;}
.w:a:link {
color: #507ea4;
text-decoration: underline;
}
.w:a:visited {
color: #044275;
text-decoration: none;
}
.w:a:hover {
color: #507ea4;
text-decoration: none;
}
.login-b, .login-b2, .login-b3{
background-image: url(../images/b2.gif);
background-position: 0px 0px;
float: left;
height: 32px;
width: 82px;
display: block;
border:0;
margin-top: 7px;
*margin-top: 9px;
background-repeat: no-repeat;
margin-left: 23px;
cursor:pointer!important;
cursor:hand;
}
.login-b2{
background-image: url(../images/b2.gif);
background-position: 0px -33px;
}
.login-b3{
background-image: url(../images/b2.gif);
background-position: 0px -66px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form method="post" action="logincheck.php" name="form1">
<table width="854" height="48" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td background="../images/ml_01.gif" style="text-indent:620px; color:#FFFFFF"><a href="">设为首页</a> | <a href="">加入收藏</a> | <a href="">3G开发者联盟</a></td>
</tr>
</table>
<table width="854" height="381" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="288" height="112" style="background-image:url(../images/ml_02.gif)"></td>
<td width="291" height="112" style="background-image:url(../images/ml_03.gif)"></td>
<td width="275" height="112" style="background-image:url(../images/ml_04.gif)"></td>
</tr>
<tr>
<td width="288" height="39" style="background-image:url(../images/ml_05.gif)"></td>
<td style="background-image:url(../images/ml_06.gif);" width="291" height="39"> <input type="text" name="user" maxlength="20" class="input-border" /></td>
<td width="275" height="39" style="background-image:url(../images/ml_07.gif)"></td>
</tr>
<tr>
<td width="288" height="39" style="background-image:url(../images/ml_08.gif)"></td>
<td width="291" height="39" style="background-image:url(../images/ml_09.gif)"> <input type="password" name="password" maxlength="20" class="input-border1"> <a href="" class="w">忘记密码?</a></td>
<td width="275" height="39" style="background-image:url(../images/ml_10.gif)"></td>
</tr>
<tr>
<td width="288" height="25" style="background-image:url(../images/ml_11.gif)"></td>
<td valign="middle" width="291" height="25" style="background-image:url(../images/ml_12.gif);color:#666"> <input type="checkbox" id="showsaveUser" name="showsaveUser"></td>
<td width="275" height="25" style="background-image:url(../images/ml_13.gif)"></td>
</tr>
<tr>
<td width="288" height="41" style="background-image:url(../images/ml_14.gif)"></td>
<td width="291" height="41" style="background-image:url(../images/ml_15.gif);"><input type="submit" value="" class="login-b" onMouseOver="this.className='login-b2'" onMouseDown="this.className='login-b3'" onMouseOut="this.className='login-b'"/></td>
<td width="275" height="41" style="background-image:url(../images/ml_16.gif)"></td>
</tr>
<tr>
<td width="288" height="19" style="background-image:url(../images/ml_17.gif)"></td>
<td><img src="../images/ml_18.gif" width="291" height="19" alt=""></td>
<td width="275" height="19" style="background-image:url(../images/ml_19.gif)"></td>
</tr>
<tr>
<td width="288" height="27" style="background-image:url(../images/ml_20.gif)"></td>
<td width="291" height="27" style="background-image:url(../images/ml_21.gif); color:#666">您还没有<font face="Arial">CSDN</font>的帐号吗? <a href="" class="r">请立即注册</a></td>
<td width="275" height="27" style="background-image:url(../images/ml_22.gif)"></td>
</tr>
<tr>
<td width="288" height="79" style="background-image:url(../images/ml_23.gif)"></td>
<td width="291" height="79" style="background-image:url(../images/ml_24.gif)"></td>
<td width="275" height="79" style="background-image:url(../images/ml_25.gif)"></td>
</tr>
</table>
<table width="854" height="151" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="../images/ml_26.gif" width="854" height="151" alt=""></td>
</tr>
</table>
</form>
</body>
</html>
登陆处理逻辑页面logincheck.php
Code:
<?php
session_start();
include '../include/dbconn.php';
//定义sql
$sql="select id,username from member where username='{$_POST['user']}' and password='{$_POST['password']}'";
//执行查询
$rs=mysql_query($sql);
//取出结果集的个数
$result=mysql_num_rows($rs);
//判断是否查询成功
if($result){
//将查询数据存放到session中
$rows=mysql_fetch_assoc($rs);
$_SESSION['username']=$rows['username'];
$_SESSION['uid']=$rows['id'];
//登陆成功跳转到首页
header('location:./success.php?forward=./index.php&info=1');
}else{
//登陆失败,返回登陆页
header('location:./login.html');
}
?>
最为关键的是,当用户登陆后提示用户登陆成功信息,这里我做了一个通用的页面 success.php,这个页面接受用户的请求,并且进行重定位url,同时接受提示消息的编号值,根据编号值使用switch case 语句定义要显示的内容,最后显示出来,具体代码如下:
Code:
<?php
//接收用户的去向(forward)
$forward=$_GET['forward'];
//接受信息提示内容编号
$info=$_GET['info'];
switch($info){
case 1:$str="登陆成功!";break;
case 2:$str="插入成功!";break;
case 3:$str="删除成功!";break;
case 4:$str="更新成功!<br>本次操作影响了 {$_GET['num']} 条记录";break;
case 5:$str="信息发送成功!";break;
case 6:$str="收件人不存在!";break;
case 7:$str="当前用户已成功注销";break;
case 8:$str="请登录后操作!";break;
default:$str="操作成功!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../css/style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="../script/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
/**********弹出层效果开始*************/
//获得整个浏览器的宽度
var bwidth=$(window).width();
//获得整个浏览器的高度
var bheight=$(window).height();
//获得上下滚动条滚动的高度
var sTop=$(window).scrollTop();
//获得左右滚动条滚动的宽度
var sLeft=$(window).scrollLeft();
//获得窗口的宽度
var winwidth=$("#center").width();
//获得整个窗口的高度
var winheight=$("#center").height();
//计算弹出窗口的坐标
var left1=sLeft+(bwidth-winwidth)/2;
var top1=sTop+(bheight-winheight)/2;
//设置窗口的样式,并显示出窗口出来
$("#center").css("left",left1).css("top",top1);
//设置窗口显示方式为show
$("#center").show("slow");
$(".title img").click(function(){
$(this).parent().parent().hide("slow");
});
});
</script>
<title>成功提示</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function forward1(){
location='<?php echo $forward;?>';
}
setTimeout("forward1()",3000);
</script>
<div class="window" id="center">
<div class="title"><img src="../../images/close.jpg" />信息提示</div>
<div class="content"><br><br><font color="#FF0000"><b><?php echo $str;?></b></font><br>三秒钟以后页面自动跳转</div>
</div>
</body>
</html>
[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统(三) 主要讲解如何使用jQuery实现分页、已读/未读标记等功能,敬请留意查阅,请支持本人原创论坛,原创地址见下面。
[原创地址] [源码下载] [更多原创,多多支持多]
上文给大家展示了实现的效果,本篇文章将详细给大家讲一下如何实现用户登陆及登陆成功提醒页面
注意,以下例子也你下载后无法正常运行属于正常,因为部分CSS文件和js文件还没有上传,我承诺一定会在该实例连载的最后一篇文章中上传本例所有的源代码~请大家支持我的原创论坛[3gput.com/3G开发者联盟]。
首先,实现用户的登陆很简单,我以前做过讲解,主要是用户登陆的时候将用户名和用户id放入到session中
具体代码如下:
用户登陆页面:
Code:
<html>
<head>
<title>未标题-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
body, p,td{
background-image: url(../images/Ml_BG.gif);
font-size: 9pt;
line-height: 16px;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #f5f5f5;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
r:{color: #d20404;}
.r:a:link {
color: #d20404;
text-decoration: underline;
}
.r:a:visited {
color: #f5f5f5;
text-decoration: none;
}
.r:a:hover {
color: #d20404;
text-decoration: none;
}
.input-border{
border:1px solid #b8b8b8;
width:100px;
line-height:23px;
font-size:14px;
height:24px;
padding-left: 2px;
}
.input-border1{
border:1px solid #b8b8b8;
width:173px;
line-height:23px;
font-size:14px;
height:24px;
padding-left: 2px;
}
w:{color: #507ea4;}
.w:a:link {
color: #507ea4;
text-decoration: underline;
}
.w:a:visited {
color: #044275;
text-decoration: none;
}
.w:a:hover {
color: #507ea4;
text-decoration: none;
}
.login-b, .login-b2, .login-b3{
background-image: url(../images/b2.gif);
background-position: 0px 0px;
float: left;
height: 32px;
width: 82px;
display: block;
border:0;
margin-top: 7px;
*margin-top: 9px;
background-repeat: no-repeat;
margin-left: 23px;
cursor:pointer!important;
cursor:hand;
}
.login-b2{
background-image: url(../images/b2.gif);
background-position: 0px -33px;
}
.login-b3{
background-image: url(../images/b2.gif);
background-position: 0px -66px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form method="post" action="logincheck.php" name="form1">
<table width="854" height="48" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td background="../images/ml_01.gif" style="text-indent:620px; color:#FFFFFF"><a href="">设为首页</a> | <a href="">加入收藏</a> | <a href="">3G开发者联盟</a></td>
</tr>
</table>
<table width="854" height="381" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="288" height="112" style="background-image:url(../images/ml_02.gif)"></td>
<td width="291" height="112" style="background-image:url(../images/ml_03.gif)"></td>
<td width="275" height="112" style="background-image:url(../images/ml_04.gif)"></td>
</tr>
<tr>
<td width="288" height="39" style="background-image:url(../images/ml_05.gif)"></td>
<td style="background-image:url(../images/ml_06.gif);" width="291" height="39"> <input type="text" name="user" maxlength="20" class="input-border" /></td>
<td width="275" height="39" style="background-image:url(../images/ml_07.gif)"></td>
</tr>
<tr>
<td width="288" height="39" style="background-image:url(../images/ml_08.gif)"></td>
<td width="291" height="39" style="background-image:url(../images/ml_09.gif)"> <input type="password" name="password" maxlength="20" class="input-border1"> <a href="" class="w">忘记密码?</a></td>
<td width="275" height="39" style="background-image:url(../images/ml_10.gif)"></td>
</tr>
<tr>
<td width="288" height="25" style="background-image:url(../images/ml_11.gif)"></td>
<td valign="middle" width="291" height="25" style="background-image:url(../images/ml_12.gif);color:#666"> <input type="checkbox" id="showsaveUser" name="showsaveUser"></td>
<td width="275" height="25" style="background-image:url(../images/ml_13.gif)"></td>
</tr>
<tr>
<td width="288" height="41" style="background-image:url(../images/ml_14.gif)"></td>
<td width="291" height="41" style="background-image:url(../images/ml_15.gif);"><input type="submit" value="" class="login-b" onMouseOver="this.className='login-b2'" onMouseDown="this.className='login-b3'" onMouseOut="this.className='login-b'"/></td>
<td width="275" height="41" style="background-image:url(../images/ml_16.gif)"></td>
</tr>
<tr>
<td width="288" height="19" style="background-image:url(../images/ml_17.gif)"></td>
<td><img src="../images/ml_18.gif" width="291" height="19" alt=""></td>
<td width="275" height="19" style="background-image:url(../images/ml_19.gif)"></td>
</tr>
<tr>
<td width="288" height="27" style="background-image:url(../images/ml_20.gif)"></td>
<td width="291" height="27" style="background-image:url(../images/ml_21.gif); color:#666">您还没有<font face="Arial">CSDN</font>的帐号吗? <a href="" class="r">请立即注册</a></td>
<td width="275" height="27" style="background-image:url(../images/ml_22.gif)"></td>
</tr>
<tr>
<td width="288" height="79" style="background-image:url(../images/ml_23.gif)"></td>
<td width="291" height="79" style="background-image:url(../images/ml_24.gif)"></td>
<td width="275" height="79" style="background-image:url(../images/ml_25.gif)"></td>
</tr>
</table>
<table width="854" height="151" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="../images/ml_26.gif" width="854" height="151" alt=""></td>
</tr>
</table>
</form>
</body>
</html>
登陆处理逻辑页面logincheck.php
Code:
<?php
session_start();
include '../include/dbconn.php';
//定义sql
$sql="select id,username from member where username='{$_POST['user']}' and password='{$_POST['password']}'";
//执行查询
$rs=mysql_query($sql);
//取出结果集的个数
$result=mysql_num_rows($rs);
//判断是否查询成功
if($result){
//将查询数据存放到session中
$rows=mysql_fetch_assoc($rs);
$_SESSION['username']=$rows['username'];
$_SESSION['uid']=$rows['id'];
//登陆成功跳转到首页
header('location:./success.php?forward=./index.php&info=1');
}else{
//登陆失败,返回登陆页
header('location:./login.html');
}
?>
最为关键的是,当用户登陆后提示用户登陆成功信息,这里我做了一个通用的页面 success.php,这个页面接受用户的请求,并且进行重定位url,同时接受提示消息的编号值,根据编号值使用switch case 语句定义要显示的内容,最后显示出来,具体代码如下:
Code:
<?php
//接收用户的去向(forward)
$forward=$_GET['forward'];
//接受信息提示内容编号
$info=$_GET['info'];
switch($info){
case 1:$str="登陆成功!";break;
case 2:$str="插入成功!";break;
case 3:$str="删除成功!";break;
case 4:$str="更新成功!<br>本次操作影响了 {$_GET['num']} 条记录";break;
case 5:$str="信息发送成功!";break;
case 6:$str="收件人不存在!";break;
case 7:$str="当前用户已成功注销";break;
case 8:$str="请登录后操作!";break;
default:$str="操作成功!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../css/style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="../script/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
/**********弹出层效果开始*************/
//获得整个浏览器的宽度
var bwidth=$(window).width();
//获得整个浏览器的高度
var bheight=$(window).height();
//获得上下滚动条滚动的高度
var sTop=$(window).scrollTop();
//获得左右滚动条滚动的宽度
var sLeft=$(window).scrollLeft();
//获得窗口的宽度
var winwidth=$("#center").width();
//获得整个窗口的高度
var winheight=$("#center").height();
//计算弹出窗口的坐标
var left1=sLeft+(bwidth-winwidth)/2;
var top1=sTop+(bheight-winheight)/2;
//设置窗口的样式,并显示出窗口出来
$("#center").css("left",left1).css("top",top1);
//设置窗口显示方式为show
$("#center").show("slow");
$(".title img").click(function(){
$(this).parent().parent().hide("slow");
});
});
</script>
<title>成功提示</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function forward1(){
location='<?php echo $forward;?>';
}
setTimeout("forward1()",3000);
</script>
<div class="window" id="center">
<div class="title"><img src="../../images/close.jpg" />信息提示</div>
<div class="content"><br><br><font color="#FF0000"><b><?php echo $str;?></b></font><br>三秒钟以后页面自动跳转</div>
</div>
</body>
</html>
[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统(三) 主要讲解如何使用jQuery实现分页、已读/未读标记等功能,敬请留意查阅,请支持本人原创论坛,原创地址见下面。
[原创地址] [源码下载] [更多原创,多多支持多]
相关文章推荐
- [原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统一
- [原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统三
- [原创+源码]绝对强悍:jQuery实现可编辑表格的用户管理系统 (二)
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- [原创+源码]绝对强悍:jQuery实现可编辑表格的用户管理系统(一)
- 九款酷炫基于jquery实现的应用及源码
- php+jQuery+Ajax实现点赞效果的方法(附源码下载)
- [原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造(二)
- PHP实现发送邮件的方法(基于简单邮件发送类)
- php 调用现成类实现163邮箱邮件发送
- 实现基于虚拟用户的邮件系统架构
- phpQuery—基于jQuery的PHP实现(转)
- “基于关键字匹配的文本过滤系统”配置文件的设计和实现(C/C++源码)
- 阅读PHP内核系统Zend引擎源码手记(原创)
- phpQuery—基于jQuery的PHP实现
- 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
- [原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造(一)
- php基于socket实现SMTP发送邮件的方法