1.add.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入样式 --> <link rel="stylesheet" href="./css/form.css"> </head> <body> <form action="./php/add.php" method="post" enctype="multipart/form-data"> 姓名:<input type="text" name="username"> 昵称:<input type="text" name="nickname"> 年龄:<input type="text" name="age"> 电话:<input type="text" name="tel"> 性别: <input type="radio" name="sex" value="m" checked>男 <input type="radio" name="sex" value="f">女 <br> 班级: <select name="class"> <option value="1">105班</option> <option value="2">106班</option> <option value="3">104班</option> <option value="4">101班</option> </select> 头像: <input type="file" name="photo"> <input type="submit" value="添加信息"> </form> </body> </html>
2.1 form.css
*{
margin: 0;
padding: 0;
}
body{
background:#ccc;
}
h1,h2,h3,h4,h5,h6{
text-align: center;
}
form{
width: 400px;
margin:50px auto;
padding:20px;
border: 1px solid #eee;
border-radius: 10px;
background:#fff;
}
input[type='text'],
input[type='select'],
input[type='password'],
input[type='submit'],
input[type='password'],
input[type='file'],
select{
width: 100%;
display: block;
height: 24px;
margin-bottom:15px;
border-radius: 3px;
border:1px solid #aaa;
}
input[type='submit']{
height: 40px;
background:rgb(209, 92, 92);
border:none;
color:#fff;
font-size: 24px;;
}
input[type='radio'],
input[type='checkbox']{
height: 20px;
width:20px;
/* display: inline; */
margin:10px;
}
input[type='file']{
border:none;
}
2.2 list.css
*{ margin: 0; padding: 0; } body{ background:#f1f1f1; } h1,h2,h3,h4,h5,h6{ text-align: center; font-weight: normal; font-size: 30px; margin-top:30px; } body>a{ float:right; } table{ margin:50px auto; border-collapse: collapse; border: 1px solid #ccc; width: 70%; text-align: center; } th, td{ border: 1px solid #ccc; line-height: 30px; height: 30px; } tr{ background:rgb(223, 216, 217); } tr:nth-child(odd){ background: #fff; } img{ height: 30px; display: inline; margin-top:5px; }
2.3 table.css
*{ margin: 0; padding: 0; } body{ background:#f1f1f1; } h1,h2,h3,h4,h5,h6{ text-align: center; font-weight: normal; font-size: 30px; margin-top:30px; } body>a{ float:right; } table{ margin:20px auto; border-collapse: collapse; border: 1px solid #ccc; width: 50%; text-align: center; } th, td{ border: 1px solid #ccc; line-height: 30px; height: 30px; padding:5px 0; } tr{ background:rgb(223, 216, 217); } tr:nth-child(odd){ background: #fff; } img{ height: 200px; } a{ text-decoration: none; display: inline-block; width: 200px; height: 50px; border-radius: 5px; background:#bb6767; color:#fff; font-size: 24px; line-height: 50px; }
3.公用的封装好的php与数据库的链接代码
<?php header('content-type:text/html;charset=utf-8'); define('HOST','127.0.0.1'); define('USERNAME','root'); define('PWD','root'); define('DB','z_stumanage'); define('PORT',3306); function wxc_mysqli($sql){ $link = @ mysqli_connect(HOST,USERNAME,PWD,DB,PORT); if(!$link){ echo '连接失败'; return false; } if(mysqli_query($link,$sql)){ // echo '执行成功'; mysqli_close($link); return true; }else{ // echo '执行成功'; mysqli_close($link); mysqli_error($link); return false; } } function wxc_select($sql){ $link = @ mysqli_connect(HOST,USERNAME,PWD,DB,PORT); if(!$link){ echo '连接失败'; return false; } $res = mysqli_query($link,$sql); if(!$res){ echo '连接失败'; echo mysqli_error($link); mysqli_close($link); return false; }else{ $arr = []; while($row = mysqli_fetch_assoc($res)){ $arr[] = $row; } mysqli_close($link); return $arr; } } ?>
4.增加学生信息php add.php
<?php header('content-type:text/html;charset=utf-8'); include('./common.php'); $username = $_POST['username']; $nickname = $_POST['nickname']; $age = $_POST['age']; $tel = $_POST['tel']; $sex = $_POST['sex']; $class = $_POST['class']; $photo = ""; $file = $_FILES['photo']; echo '<pre>'; print_r($file); echo '</pre>'; if( $file['error']===0){ $tmp = $file['tmp_name']; $ext = strrchr($file['name'],'.'); $newPath = time().rand(1000,9999).$ext; move_uploaded_file($tmp,'../uploads/'.$newPath); $photo = '../uploads/'.$newPath; } // echo $photo; $sql = "insert into stu (name,nickname,age,tel,sex,photo,classid) values('$username','$nickname',$age,'$tel', '$sex','$photo','$class')"; if(wxc_mysqli($sql)){ echo '添加成功'; }else{ echo '添加失败'; } header('location:list.php'); // echo $sql; ?>
5.删除 记录 delete.php
<?php header('content-type:text/html;charset=utf-8'); include 'common.php'; echo '<pre>'; print_r($_GET); $id = $_GET['id']; echo '</pre>'; echo $id; $sql = "delete from stu where id= $id "; echo $sql; if(wxc_mysqli($sql)){ echo '删除成功'; header('location:list.php'); } else{ echo '删除失败'; } ?>
6. 数据渲染 list.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../css/list.css"> <title>Document</title> </head> <?php header('content-type:text/html;charset=utf-8'); include './common.php'; $sql = "select * from stu"; $arr = wxc_select($sql); ?> <body> <h4>用户信息列表 <a href="../add.html">添加数据</a></h4> <table> <tr> <th>用户名</th> <th>昵称</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>头像</th> <th>操作</th> </tr> <?php foreach($arr as $k => $v){?> <tr> <td><?php echo $v['name']?></td> <td><?php echo $v['nickname']?></td> <td><?php echo $v['age']?></td> <td><?php echo $v['tel']?></td> <td><?php echo $v['sex']==='m'?'男':'女'; ?></td> <td><img src="<?php echo $v['photo']?>"></td> <td> <a href="delete.php?id=<?php echo $v['id']?>">删除</a> <a href="detail.php?id=<?php echo $v['id']?>">详情</a> <a href="edit.php?id=<?php echo $v['id']?>">编辑</a> </td> </tr>
<?php } ?>
</table>
</body>
</html>
7.个人详情detail.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../css/table.css"> </head> <body> <?php header('content-type:text/html;charset=utf-8'); include './common.php'; $id = $_GET['id']; $sql = "select stu.*,class.classname from stu join class on stu.classid = class.id where stu.id = $id "; $arr = wxc_select($sql); // echo '<pre>'; // print_r($arr); // echo '</pre>'; ?> <table> <?php foreach($arr as $k=>$v){?> <tr><th>序号</th><td><?php echo $v['id'] ?></td></tr> <tr><th>姓名</th><td><?php echo $v['name'] ?></td></tr> <tr><th>昵称</th><td><?php echo $v['nickname'] ?></td></tr> <tr><th>年龄</th><td><?php echo $v['age'] ?></td></tr> <tr><th>电话</th><td><?php echo $v['tel'] ?></td></tr> <tr><th>性别</th><td><?php echo $v['sex']==='m'?'男':'女' ?></td></tr> <tr><th>班级</th><td><?php echo $v['classname'] ?></td></tr> <tr><th>图像</th><td><img src="<?php echo $v['photo'] ?>" style="width:80px;height:80px;"></td></tr> <tr><th></th><td><a href="list.php">返回</a></td></tr> <?php }?> </table> </body> </html>