PHP 结合 Bootstrap 实现学生列表以及添加学生功能实现继上篇登录及注册功能之后

本人是一位学生,正在学习当中,可能BUG众多,请见谅并指正,谢谢!!!

 

 

学生列表实现

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生信息</title>
    <link rel="stylesheet" type="text/css" href="css/Bootstrap.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="display-4 text-center">学生信息管理中心</h1>
        <div class="row mt-3">
            <a class="btn btn-info col-sm-2" style="margin-right: 88px; margin-left: 15px;" href="add_student.php">添加学生</a>
            <input type="text" class="form-control col-sm-6 ml-5" placeholder="请输入关键词">
              <button type="submit" class="btn btn-info col-sm-2 ml-4">点击搜索</button>
        </div>
        <table class="table table-hover table-bordered mt-3">
            <thead class="thead-inverse">
                <tr>
                    <th class="text-center align-middle">学号</th>
                    <th class="text-center align-middle">学院/系</th>
                    <th class="text-center align-middle">班级</th>
                    <th class="text-center align-middle">姓名</th>
                    <th class="text-center align-middle">性别</th>
                    <th class="text-center align-middle">年龄</th>
                    <th class="text-center align-middle">照片</th>
                    <th class="text-center align-middle">操作</th>
                </tr>
            </thead>
            <tbody class="text-center">
            <?php while ($student = mysqli_fetch_assoc($query)): ?>
                <tr>
                    <td class="align-middle"><?php echo $student['num']; ?></td>
                    <td class="align-middle"><?php echo $student['system']; ?></td>
                    <td class="align-middle"><?php echo $student['class']; ?></td>
                    <td class="align-middle"><?php echo $student['name']; ?></td>
                    <td class="align-middle"><?php echo $student['gender'] === 1 ? '♂' : '♀'; ?></td>
                    <td class="align-middle"><?php echo date('Y') - substr($student['birthday'], 0, 4); ?></td>
                    <td class="align-middle"><img src="<?php echo $student['photo']; ?>" width="100" height="70"></td>
                    <td class="align-middle"><a class="btn btn-info mr-2" href="edit.php?num=<?php echo $student['num']; ?>">编辑</a><a class="btn btn-danger ml-2" href="delete.php?num=<?php echo $student['num']; ?>">删除</a></td>
                </tr>
            <?php endwhile ?>
            </tbody>
        </table>
    </div>
</body>
</html>

PHP:

// 这里:
// 第一个参数:本地网络地址
// 第二个参数:数据库账号
// 第三个参数:数据库密码
// 第四个参数:数据库名称
$connection
= mysqli_connect('localhost', 'root', '密码', 'students_info_system'); if (!$connection) { exit('<h1>连接数据库失败</h1>'); } $query = mysqli_query($connection, 'select * from students'); if (!$query) { exit('<h1>学生数据查询失败</h1>'); } $administrator_query = mysqli_query($connection, 'select * from students');

添加学生实现

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加学生</title>
    <link rel="stylesheet" type="text/css" href="css/Bootstrap.css">
</head>
<body>
    <div class="container mt-3">
        <h1 class="display-4 text-center">添加学生</h1>
        <?php if (isset($error_msg)): ?>
        <div class="alert alert-danger"><?php echo $error_msg; ?></div>
        <?php endif ?>
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" autocomplete="off">
            <div class="form-group">
                <input type="number" name="num" class="form-control" placeholder="学号" value="<?php echo isset($_POST['num']) ? $_POST['num']: ''; ?>">
            </div>
            <div class="form-group">
                <select class="form-control" name="system">
                    <option>请选择学院/系</option>
                    <option>电气工程学院</option>
                    <option>信息工程与艺术学院</option>
                    <option>国际教育学院</option>
                    <option>水利水电工程学院</option>
                    <option>测绘与市政工程学院</option>
                    <option>马克思主义学院</option>
                    <option>建筑工程学院</option>
                    <option>经济与管理学院</option>
                </select>
            </div>
            <div class="form-group">
                <input type="text" name="class" class="form-control" placeholder="班级" value="<?php echo isset($_POST['class']) ? $_POST['class'] : ''; ?>">
            </div>
            <div class="form-group">
                <input type="text" name="name" class="form-control" placeholder="姓名" value="<?php echo isset($_POST['name']) ? $_POST['name'] : ''; ?>">
            </div>
            <div class="form-group">
                <select class="form-control" name="gender">
                    <option value="-1">请选择性别</option>
                    <option <?php echo isset($_POST['gender']) && $_POST['gender'] === '1' ? 'selected' : ''; ?> value="1">男</option>
                    <option <?php echo isset($_POST['gender']) && $_POST['gender'] === '0' ? 'selected' : ''; ?> value="0">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="birthday">出生日期</label>
                <input type="date" name="birthday" class="form-control" id="birthday" value="<?php echo isset($_POST['birthday']) ? $_POST['birthday'] : ''; ?>">
            </div>
            <div class="form-group">
                <label for="photo">照片</label>
                <input type="file" name="photo" class="form-control">
            </div>
            <button class="btn btn-info btn-block">确认添加</button>
        </form>
    </div>
</body>
</html>

PHP:

function add_student () {

   $connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system'); if (!$connection) { $GLOBALS['error_msg'] = '连接数据库失败'; return; } $query = mysqli_query($connection, 'select * from students'); if (!$query) { $GLOBALS['error_msg'] = '数据查询失败'; return; } // 查询已有学生 while ($student = mysqli_fetch_assoc($query)) { // var_dump($student); $students_num[] = $student['num']; } // var_dump($_FILES['photo']); // var_dump($_POST['gender']); if (empty($_POST['num'])) { $GLOBALS['error_msg'] = '请输入学号'; return; } // 判断该学号是否已经被添加(即列表中已存在该学生)========= if (in_array($_POST['num'], $students_num)) { $GLOBALS['error_msg'] = '该学生已存在'; return; } if (empty($_POST['system']) || $_POST['system'] === '请选择学院/系') { $GLOBALS['error_msg'] = '请选择学院/系'; return; } if (empty($_POST['class'])) { $GLOBALS['error_msg'] = '请输入班级'; return; } if (empty($_POST['name'])) { $GLOBALS['error_msg'] = '请输入姓名'; return; } if (!(isset($_POST['gender']) && $_POST['gender'] !== '-1')) { $GLOBALS['error_msg'] = '请选择性别'; return; } if (empty($_POST['birthday'])) { $GLOBALS['error_msg'] = '请输入出生日期'; return; } // 以下处理文件域======================================================= if (empty($_FILES['photo'])) { $GLOBALS['error_msg'] = '请上传照片'; return; } if ($_FILES['photo']['error'] !== UPLOAD_ERR_OK) { $GLOBALS['error_msg'] = '上传照片失败'; return; } // 验证上传文件的类型(只允许图片) if (strpos($_FILES['photo']['type'], 'image/') !== 0) { $GLOBALS['error_msg'] = '这不是支持的文件格式类型,请重新上传'; return; } // 文件上传到了服务端开辟的一个临时地址,需要转移到本地 $image_target = 'images/' . $_FILES['photo']['name']; if (!move_uploaded_file($_FILES['photo']['tmp_name'], $image_target)) { $GLOBALS['error_msg'] = '图片上传失败'; return; } // 接收学生信息 $num = (string)$_POST['num']; $system = (string)$_POST['system']; $class = (string)$_POST['class']; $name = (string)$_POST['name']; $gender = (int)$_POST['gender']; $birthday = (string)$_POST['birthday']; $photo = (string)$image_target; // 将数据存放到数据库 $insert_query = mysqli_query($connection, "insert into students values ('{$num}', '{$system}', '{$class}', '{$name}', {$gender}, '{$birthday}', '{$photo}')"); if (!$insert_query) { $GLOBALS['error_msg'] = '数据查询失败'; return; } $affected_rows = mysqli_affected_rows($connection); if ($affected_rows !== 1) { $GLOBALS['error_msg'] = '添加失败'; return; } // 延迟2秒 time_sleep_until(time() + 2);
  // 跳回到学生信息页面 header("Location: student_info.php"); } if ($_SERVER['REQUEST_METHOD'] === 'POST') { add_student(); }

 

原文地址:https://www.cnblogs.com/duxiu-fang/p/10886998.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e