项目：个人相册登陆/展示

项目文件在全栈教程/03_php高级+mvc/6_项目_个人相册

创建数据库

1、创建数据库 php69

2、创建用户数据表 user

3、添加一条用户数据

4、创建相册数据表 photos

创建数据库完整代码

//创建数据库完整代码
//创建相册数据库php68
CREATE DATABASE IF NOT EXISTS `php68` CHARSET utf8;

//创建用户数据表user
CREATE TABLE IF NOT EXISTS `user`(
`id` int not null auto_increment primary key, #用户ID
`username` varchar(20), #用户名，长度为20个字符
`password` char(32) #密码，长度为32个字符
)ENGINE=InnoDB;

//创建相册数据表photos
CREATE TABLE IF NOT EXISTS `photos`(
`id` int not null auto_increment primary key, #相册ID
`title` varchar(20), #照片标题
`imgsrc` varchar(100), #图像路径
`intro` text, #照片简介
`hits` int not null default 0, #访问量
`addate` int(10) #发布时间
)ENGINE=InnoDB;

//往user表中插入一条记录
INSERT INTO `user`(username,password) VALUES('admin','e10adc3949ba59abbe56e057f20f883e');

用户登录功能

1、登录表单页面 login.php

<?php
//开启SESSION会话
session_start();
//产生表单验证随机字符串
$_SESSION['token'] = uniqid();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<style type="text/css">
/*全局样式*/
body,h2,form,a{margin:0px;padding:0px}
body{font-size:14px;color:#444;background-color:#00343f;}
a{text-decoration:none;color:#444;}
a:hover{color:red;} 
/*局部样式*/
.box{width:1000px;margin:0px auto;background-color:white;}
.title{
    text-align:center;
    padding: 10px 0px;
    border-bottom: 2px solid #444;
    background-color:#d0e9ff;
}
.title h2{font-size:36px;padding:10px;}
form{padding:30px;height:400px;}
form td{padding:8px;}
</style>
</head>
<body>
<div class="box">
<!--title-->
<div class="title">
    <h2>用户登录</h2>
    <a href="javascript:void(0)">欢迎光临，请先登录！</a>
</div><!--//title-->
<!--form-->
<form method="post" action="loginSave.php">
<table align="center" width="400">
    <tr>
        <td width="100" align="right">用户名：</td>
        <td><input type="text" name="username"></td>
    </tr>
    <tr>
        <td align="right">密&nbsp;&nbsp;&nbsp;码：</td>
        <td><input type="password" name="password"></td>
    </tr>
    <tr>
        <td align="right">验证码：</td>
        <td>
            <input style="float:left;" type="text" name="verify" size="4" maxlength="4">
            <img style="float:left;margin-left:10px;cursor: pointer;height:22px;" src="./captcha.php" onClick="this.src='./captcha.php?'+Math.random()">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="登录">
            <input type="hidden" name="token" value="<?php echo $_SESSION['token']?>">
            <input type="reset" value="重置">
        </td>
    </tr>
</table>
</form><!--//form-->
</div><!--//box-->
</body>
</html>

2、登录程序处理页面 loginSave.php

<?php
//包含连接数据库的公共文件
require_once("./conn.php");
//开启SESSION会话
session_start();

//判断表单是否合法提交
if(isset($_POST['token']) && $_POST['token']==$_SESSION['token'])
{
    //获取表单提交数据
    $username = $_POST['username']; //用户名
    $password = md5($_POST['password']); //加密字符串
    $verify   = $_POST['verify']; //验证码

    //判断验证码与服务器保存的是否一致：验证码不区分大小写
    if(strtolower($verify) != $_SESSION['captcha'])
    {
        echo "<h2>两次输入的验证码不一致！</h2>";
        header("refresh:3;url=./login.php");
        die();
    }

    //判断用户名和密码与数据库是否一致
    $sql = "SELECT * FROM user WHERE username='$username' and password='$password'";
    $result = mysqli_query($link, $sql); //执行SQL语句，并返回结果集对象
    $records = mysqli_num_rows($result); //取回记录数：0没找到，1找到了
    if(!$records)
    {
        echo "<h2>用户名或密码不正确！</h2>";
        header("refresh:3;url=./login.php");
        die();
    }

    //保存用户信息到SESSION中
    $_SESSION['username'] = $username;

    //跳转到相册首页
    header("location:./index.php");
}else
{
    //直接跳转到login.php
    header("location:./login.php");
}

3、连接数据库公共文件 conn.php

<?php
//(1)数据库配置信息
$db_host = "localhost"; //主机名
$db_user = "root"; //用户名
$db_pass = "root"; //密码
$db_name = "php69"; //数据库名称
$charset = "utf8"; //字符集

//(2)PHP连接MySQL服务器
if(!$link = @mysqli_connect($db_host, $db_user, $db_pass))
{
    echo "<h2>PHP连接MySQL服务器失败！</h2>";
    die(); //中止程序向下运行
}

//(3)选择当前数据库
if(!mysqli_select_db($link, $db_name))
{
    echo "<h2>选择数据库{$db_name}失败！</h2>";
    die();
}

//(4)设置字符集
mysqli_set_charset($link, $charset);

4、创建验证码页面 captcha.php

<?php
/*
    图像验证码：
    (1)产生随机验证码字符串
    (2)创建空画布，并分配颜色
    (3)绘制带填充的矩形
    (4)绘制像素点
    (5)绘制线段
    (6)写入一行TTF字符串
    (7)输出图像，并销毁图像
 */

//(1)产生4位随机验证码字符串
$arr1 = array_merge(range('a','z'),range(0,9),range('A','Z'));
shuffle($arr1);
$arr2 = array_rand($arr1,4);
$str = "";
foreach($arr2 as $index)
{
    $str .= $arr1[$index];
}
//将验证码字符串保存到SESSION中
session_start();
$_SESSION['captcha'] = strtolower($str);

//(2)创建空画布
$width = 70;
$height = 22;
$img = imagecreatetruecolor(70,22);

//(3)绘制带填充的矩形
$color1 = imagecolorallocate($img, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255));
imagefilledrectangle($img,0,0,$width,$height,$color1);

//(4)绘制像素点
for($i=1;$i<=100;$i++)
{
    $color2 = imagecolorallocate($img, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255));
    imagesetpixel($img,mt_rand(0,$width),mt_rand(0,$height),$color2);
}

//(5)绘制线段
for($i=1;$i<=10;$i++)
{
    $color3 = imagecolorallocate($img, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255));
    imageline($img,mt_rand(0,$width),mt_rand(0,$height),mt_rand(0,$width),mt_rand(0,$height),$color3);
}

//(6)绘制一行TTF字符串
$fontfile = "./images/msyh.ttf";
$color4 = imagecolorallocate($img, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255));
imagettftext($img,18,0,5,20,$color4,$fontfile,$str);

//(7)输出图像，并销毁图像
header("content-type:image/png");
imagepng($img);
imagedestroy($img);

5、登录页面添加验证码

显示照片列表

1、读取照片数据 index.php

<?php
//包含连接数据库的公共文件
require_once("./conn.php");

//开启SESSION会话
session_start();
//判断用户是否登录
if(empty($_SESSION['username']))
{
    //如果用户没有登录，则直接跳转到login.php
    header("location:./login.php"); 
    die();
}

//每页显示多少条
$pagesize = 15;
//获取当前页码，并计算开始行号
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$startrow = ($page-1)*$pagesize;
//获取总记录数和计算总页数
$sql = "SELECT * FROM photos";
$result = mysqli_query($link, $sql);
$records = mysqli_num_rows($result);
$pages = ceil($records/$pagesize);

//构建查询的分页的SQL语句
$sql = "SELECT * FROM photos ORDER BY id DESC LIMIT {$startrow},{$pagesize}";
$result = mysqli_query($link, $sql);
$arrs = mysqli_fetch_all($result,MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册首页</title>
<style type="text/css">
/*全局样式*/
body,ul,li,h2,a{margin:0px;padding:0px}
body{font-size:14px;color:#444;background-color:#00343f;}
ul,li{list-style: none;}
a{text-decoration:none;color:#444;}
a:hover{color:red;} 
/*局部样式*/
.box{width:1000px;margin:0px auto;background-color:white;}
.title{
    text-align:center;
    padding: 10px 0px;
    border-bottom: 2px solid #444;
    background-color:#d0e9ff;
}
.title h2{font-size:36px;padding:10px;}
.photos{padding:15px;}
.photos li{
    float:left;
    width:290px;
    padding:8px 5px;
    margin:10px;
    text-align:center;
    border:1px solid red;
}
.photos img{width:280px;height:160px;}
.pagelist{height:40px;line-height:40px;text-align:center;}
.pagelist a{padding:8px 15px;margin:0px 3px;border:1px solid #ccc;}
.pagelist a:hover{border:1px solid #0000ff;}
.pagelist .current{padding:8px 15px;}
</style>
</head>
<body>
<div class="box">
<!--title-->
<div class="title">
    <h2>我的相册</h2>
    <a href="./upload.php">上传照片</a>
    共有个<font color='red'><?php echo $records?></font>照片
</div><!--//title-->
<!--photos-->
<div class="photos">
    <ul>
        <?php
        //循环二维数组
        foreach($arrs as $arr){
        ?>
        <li>
            <a href="./detail.php?id=<?php echo $arr['id']?>"><img src="<?php echo $arr['imgsrc']?>"></a>
            <a href="./detail.php?id=<?php echo $arr['id']?>"><?php echo $arr['title']?></a>
        </li>
        <?php }?>
    </ul>
    <div style="clear:both"></div>
    <div class="pagelist">
        <?php
        //循环起点和终点
        $start = $page-5;
        $end   = $page+4;
        //如果当前页<=6时
        if($page<=6)
        {
            $start = 1;
            $end   = 10;
        }
        //如果$page>=$pages-4
        if($page>=$pages-4)
        {
            $start = $pages-9;
            $end   = $pages;
        }
        //如果$pages<10
        if($pages<10)
        {
            $start = 1;
            $end   = $pages;
        }
        //循环输出所有页码
        for($i=$start;$i<=$end;$i++)
        {
            //当前页不加链接
            if($page==$i)
            {
                echo "<span class='current'>$i</span>";
            }else
            {
                echo "<a href='./index.php?page=$i'>$i</a>";
            }
        }
        ?>
    </div>
</div><!--//photos-->
</div><!--//box-->
</body>
</html>

2、数据分页

添加照片

1、制作添加相册的表单 upload.php

<?php
//开启SESSION会话
session_start();
//判断用户是否登录
if(empty($_SESSION['username']))
{
    //如果用户没有登录，则直接跳转到login.php
    header("location:./login.php"); 
    die();
}
//产生表单验证随机字符串
$_SESSION['token'] = uniqid();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传照片</title>
<style type="text/css">
/*全局样式*/
body,h2,form,a{margin:0px;padding:0px}
body{font-size:14px;color:#444;background-color:#00343f;}
a{text-decoration:none;color:#444;}
a:hover{color:red;} 
/*局部样式*/
.box{width:1000px;margin:0px auto;background-color:white;}
.title{
    text-align:center;
    padding: 10px 0px;
    border-bottom: 2px solid #444;
    background-color:#d0e9ff;
}
.title h2{font-size:36px;padding:10px;}
form{padding:30px;height:400px;}
form td{padding:8px;}
</style>
</head>
<body>
<div class="box">
<!--title-->
<div class="title">
    <h2>上传照片</h2>
    <a href="./index.php">返回首页</a>
</div><!--//title-->
<!--form-->
<form method="post" action="uploadSave.php" enctype="multipart/form-data">
<table align="center" width="600">
    <tr>
        <td width="100" align="right">照片标题：</td>
        <td><input type="text" name="title" size="60"></td>
    </tr>
    <tr>
        <td align="right">上传照片：</td>
        <td><input type="file" name="uploadFile"></td>
    </tr>
    <tr>
        <td align="right">照片描述：</td>
        <td><textarea name="intro" cols="45" rows="5"></textarea></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="提交">
            <input type="hidden" name="token" value="<?php echo $_SESSION['token']?>">
            <input type="reset" value="重置">
        </td>
    </tr>
</table>
</form><!--//form-->
</div><!--//box-->
</body>
</html>

2、表单处理程序 uploadSave.php

<?php
//包含连接数据库的公共文件
require_once("./conn.php");

//开启SESSION会话
session_start();
//判断用户是否登录
if(empty($_SESSION['username']))
{
    //如果用户没有登录，则直接跳转到login.php
    header("location:./login.php"); 
    die();
}

//判断表单的来源是否合法
if(isset($_POST['token']) && $_POST['token']==$_SESSION['token'])
{
    //**********************上传图片*******************************
    //(1)判断上传图片是否有错误发生
    if($_FILES['uploadFile']['error']!=0)
    {
        echo "<h2>上传图片有错误发生！</h2>";
        header("refresh:3;url=./upload.php");
        die();
    }

    //(2)判断上传文件内容类型是不是图片
    $arr1 = array("image/jpeg","image/png","image/gif");
    //创建finfo的资源：获取文件内容类型，与扩展名无关
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    //获取文件内容的原始类型，不会随着扩展名改名而改变
    $mime = finfo_file($finfo,$_FILES['uploadFile']['tmp_name']);
    if(!in_array($mime,$arr1))
    {
        echo "<h2>上传的必须是图像！</h2>";
        header("refresh:3;url=./upload.php");
        die();      
    }

    //(3)判断上传的文件扩展名是不是图片
    $arr2 = array("jpg","gif","png");
    $ext  = pathinfo($_FILES['uploadFile']['name'],PATHINFO_EXTENSION); //文件扩展名
    if(!in_array($ext,$arr2))
    {
        echo "<h2>上传的必须是图像！</h2>";
        header("refresh:3;url=./upload.php");
        die();      
    }

    //(4)移动图片到 images目录中
    $tmp_name = $_FILES['uploadFile']['tmp_name'];
    $dst_name = "./images/".uniqid().".".$ext;
    move_uploaded_file($tmp_name,$dst_name);

    //***********************将表单提交数据保存到数据库****************************
    //(1)获取表单提交数据
    $title  = $_POST['title'];
    $intro  = $_POST['intro'];
    $imgsrc = $dst_name; //将图片路径保存到数据库
    $addate = time();

    //(2)判断记录是否添加成功
    $sql = "INSERT INTO photos VALUES(null,'$title','$imgsrc','$intro',0,$addate)";
    if(mysqli_query($link, $sql))
    {
        echo "<h2>上传照片成功！</h2>";
        header("refresh:3;url=./index.php");
        die();              
    }
}else
{
    //直接跳转到index.php页面
    header("location:./index.php");
}

3、finfo应用

修改php.ini配置文件，开启finfo扩展：

显示照片详细信息

1、首页文件 index.php

<?php
//包含连接数据库的公共文件
require_once("./conn.php");

//开启SESSION会话
session_start();
//判断用户是否登录
if(empty($_SESSION['username']))
{
    //如果用户没有登录，则直接跳转到login.php
    header("location:./login.php"); 
    die();
}

//每页显示多少条
$pagesize = 15;
//获取当前页码，并计算开始行号
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$startrow = ($page-1)*$pagesize;
//获取总记录数和计算总页数
$sql = "SELECT * FROM photos";
$result = mysqli_query($link, $sql);
$records = mysqli_num_rows($result);
$pages = ceil($records/$pagesize);

//构建查询的分页的SQL语句
$sql = "SELECT * FROM photos ORDER BY id DESC LIMIT {$startrow},{$pagesize}";
$result = mysqli_query($link, $sql);
$arrs = mysqli_fetch_all($result,MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册首页</title>
<style type="text/css">
/*全局样式*/
body,ul,li,h2,a{margin:0px;padding:0px}
body{font-size:14px;color:#444;background-color:#00343f;}
ul,li{list-style: none;}
a{text-decoration:none;color:#444;}
a:hover{color:red;} 
/*局部样式*/
.box{width:1000px;margin:0px auto;background-color:white;}
.title{
    text-align:center;
    padding: 10px 0px;
    border-bottom: 2px solid #444;
    background-color:#d0e9ff;
}
.title h2{font-size:36px;padding:10px;}
.photos{padding:15px;}
.photos li{
    float:left;
    width:290px;
    padding:8px 5px;
    margin:10px;
    text-align:center;
    border:1px solid red;
}
.photos img{width:280px;height:160px;}
.pagelist{height:40px;line-height:40px;text-align:center;}
.pagelist a{padding:8px 15px;margin:0px 3px;border:1px solid #ccc;}
.pagelist a:hover{border:1px solid #0000ff;}
.pagelist .current{padding:8px 15px;}
</style>
</head>
<body>
<div class="box">
<!--title-->
<div class="title">
    <h2>我的相册</h2>
    <a href="./upload.php">上传照片</a>
    共有个<font color='red'><?php echo $records?></font>照片
</div><!--//title-->
<!--photos-->
<div class="photos">
    <ul>
        <?php
        //循环二维数组
        foreach($arrs as $arr){
        ?>
        <li>
            <a href="./detail.php?id=<?php echo $arr['id']?>"><img src="<?php echo $arr['imgsrc']?>"></a>
            <a href="./detail.php?id=<?php echo $arr['id']?>"><?php echo $arr['title']?></a>
        </li>
        <?php }?>
    </ul>
    <div style="clear:both"></div>
    <div class="pagelist">
        <?php
        //循环起点和终点
        $start = $page-5;
        $end   = $page+4;
        //如果当前页<=6时
        if($page<=6)
        {
            $start = 1;
            $end   = 10;
        }
        //如果$page>=$pages-4
        if($page>=$pages-4)
        {
            $start = $pages-9;
            $end   = $pages;
        }
        //如果$pages<10
        if($pages<10)
        {
            $start = 1;
            $end   = $pages;
        }
        //循环输出所有页码
        for($i=$start;$i<=$end;$i++)
        {
            //当前页不加链接
            if($page==$i)
            {
                echo "<span class='current'>$i</span>";
            }else
            {
                echo "<a href='./index.php?page=$i'>$i</a>";
            }
        }
        ?>
    </div>
</div><!--//photos-->
</div><!--//box-->
</body>
</html>

2、照片详细信息页面 detail.php

<?php
//包含连接数据库的公共文件
require_once("./conn.php");

//开启SESSION会话
session_start();
//判断用户是否登录
if(empty($_SESSION['username']))
{
    //如果用户没有登录，则直接跳转到login.php
    header("location:./login.php"); 
    die();
}

//获取地址栏传递的id
$id = $_GET['id'];
//更新访问量
$sql = "UPDATE photos SET hits=hits+1 WHERE id=$id";
mysqli_query($link,$sql);

//构建查询的SQL语句
$sql = "SELECT * FROM photos WHERE id=$id";
//执行SQL语句，返回结果集对象
$result = mysqli_query($link, $sql);
//获取一行数据
$arr = mysqli_fetch_assoc($result);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片详细信息</title>
<style type="text/css">
/*全局样式*/
body,ul,li,h2,a{margin:0px;padding:0px}
body{font-size:14px;color:#444;background-color:#00343f;}
ul,li{list-style: none;}
a{text-decoration:none;color:#444;}
a:hover{color:red;} 
/*局部样式*/
.box{width:1000px;margin:0px auto;background-color:white;}
.title{
    text-align:center;
    padding: 10px 0px;
    border-bottom: 2px solid #444;
    background-color:#d0e9ff;
}
.title h2{font-size:36px;padding:10px;}
.detail{padding:15px 100px;}
.detail div{text-align:center;}
.detail img{width:640px;}
.detail p{font-size:16px;text-indent: 36px; font-family: 微软雅黑;line-height: 28px;}
</style>
</head>
<body>
<div class="box">
<!--title-->
<div class="title">
    <h2><?php echo $arr['title']?></h2>
    访问<font color=red><?php echo $arr['hits']?></font>次，
    发布时间 <font color=red><?php echo date("Y-m-d H:i:s",$arr['addate'])?></font>，
    <a href="./index.php">返回首页</a>
</div><!--//title-->
<!--photos-->
<div class="detail">
    <div class="photo"><img align="center" src="<?php echo $arr['imgsrc']?>"></div>
    <p><?php echo $arr['intro']?></p>
</div><!--//photos-->
</div><!--//box-->
</body>
</html>

项目：个人相册登陆/展示

创建数据库

1、创建数据库 php69

2、创建用户数据表 user

3、添加一条用户数据

4、创建相册数据表 photos

创建数据库完整代码

用户登录功能

1、登录表单页面 login.php

2、登录程序处理页面 loginSave.php

3、连接数据库公共文件 conn.php

4、创建验证码页面 captcha.php

5、登录页面添加验证码

显示照片列表

1、读取照片数据 index.php

2、数据分页

添加照片

1、制作添加相册的表单 upload.php

2、表单处理程序 uploadSave.php

3、finfo应用

显示照片详细信息

1、首页文件 index.php

2、照片详细信息页面 detail.php

国强极客

文章作者

推荐文章

项目：个人相册 登陆/展示

创建数据库

1、创建数据库 php69

2、创建用户数据表 user

3、添加一条用户数据

4、创建相册数据表 photos

创建数据库完整代码

用户登录功能

1、登录表单页面 login.php

2、登录程序处理页面 loginSave.php

3、连接数据库公共文件 conn.php

4、创建验证码页面 captcha.php

5、登录页面添加验证码

显示照片列表

1、读取照片数据 index.php

2、数据分页

添加照片

1、制作添加相册的表单 upload.php

2、表单处理程序 uploadSave.php

3、finfo应用

显示照片详细信息

1、首页文件 index.php

2、照片详细信息页面 detail.php

国强极客

文章作者

推荐文章

项目：个人相册登陆/展示