使用PHP开发HR系统（4）

本节我们讲述如何引入页面框架来建立漂亮的主页。

=========================================================================================

打开https://www.js-css.cn/divcss/admin/metro/index.html网站，看到如下页面：

这里有很多漂亮的控件可以使用，页面风格也比较统一，可以用这个来快速构建我们自己的页面；

1 添加文件

1）在HRMS工程下新建assets文件夹，把我们需要的文件分别添加进去，如下图；

这里对不同类型的文件做了分门别类的放置，看起来更规整一些；

2、修改main_list.php文件

由上面的配置文件我们可以看出，我们需要名称为main的控制器，打开application->controllers文件夹，看到目录下

有一个Welcome.php的文件，这个就是系统默认调用的文件；

1）在application->controllers目录下新建Main.php文件，输入以下代码：

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

?><!DOCTYPE html>

<head>

<title>HR Manage System</title>

</head>

</div>

<img src="<?php echo base_url('assets/img/logo.png')?>" alt="Metro Lab" />

</a>

<!-- <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">

</a>-->

</div>

</a>

</li>

</a>

</li>

</a>

<li>

<a href="#">Swing</a></li>

<li>

</ul>

</li>

</ul>

</div>

</form>

</div>

</a>

</li>

<span>人力资源规划</span>

</a>

<li><a class="" href="general.html">人力资源规划</a></li>

</ul>

</li>

<span>招聘与配置</span>

</a>

</ul>

</li>

<span>培训与开发</span>

</a>

</li>

</a>

<li><a class="" href="editable_table.html">可编辑表格</a></li>

</ul>

</li>

<span>薪酬福利管理</span>

</a>

<li><a class="" href="font_awesome.html">FontAwesome图标</a></li>

<li><a class="" href="glyphfa fas.html">Glyphicons图标</a></li>

</ul>

</li>

<span>劳动关系管理</span>

</a>

</li>

</a>

</ul>

</li>

</a>

</ul>

</li>

</div>

控制台

</h3>

<li>

</li>

人力资源总览

</li>

</div>

</form>

</li>

</ul>

</div>

<div class="status">在职人员总数</div>

</a>

</div>

<div class="status">待招聘人数</div>

</a>

</div>

<div class="status">本月入职人数</div>

</a>

</div>

<div class="status">本月离职人数</div>

</a>

</div>

<div class="status">本月待招聘人数</div>

</a>

</div>

<div class="status">本年薪酬福利</div>

</a>

</div>

<div class="status">本月薪酬福利</div>

</a>

</div>

</div>

</div>

</div>

</div>

<!--[if lt IE 9]>

<![endif]-->

<?php switch($page){

case "users":?>

</div>

jQuery(document).ready(function() {

EditableTable.init();

});

</script>

<?php break; ?>

<?php } ?>

</body>

</html>

2）修改配置文件application->config->config.php文件

配置节

$config['base_url'] = '';

修改为：

$config['base_url'] = 'http://localhost/HRMS/';

3 运行测试

运行发现主页如下；

总结：

本节我们利用成熟的页面框架建立了我们漂亮的主页，其中assets目录下各文件夹的含义如下：

目录	含义	官方网站
bootstrap	Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的。	https://getbootstrap.com/ https://www.bootcss.com/
chart-master	图表绘制工具库，其中Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库；
css	本程序自定义CSS库
data-tables	数据表格相关的工具	https://www.datatables.net/
font-awesome	为Bootstrap而设计的图标库	https://fontawesome.com/
fullcalendar	日历控件
img	本程序用到的图片
jquery-easy-pie-chart	EASY PIE CHART是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素
jquery-slimscroll	slimscroll是一个4.6kb的jQuery插件，把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间，它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值	https://github.com/rochal/jQuery-slimScroll/releases
Uniform	jQuery表单美化插件
js	本程序用到的js插件

====================================The End==========================

posted @ 2019-07-12 10:53 ChristineZ 阅读(618) 评论(2) 编辑收藏举报

刷新页面返回顶部

使用PHP开发HR系统（4）

公告