使用PHP开发HR系统（4）

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

　　1添加文件

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

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

　　2、修改main_list.php文件

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

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

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

　　<?php

　　defined('BASEPATH')ORexit('Nodirectscriptaccessallowed');

　　?><!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="utf-8">

　　<title>HRManageSystem</title>

　　<metacontent="width=device-width,initial-scale=1.0"name="viewport"/>

　　<metacontent=""name="description"/>

　　<metacontent="Mosaddek"name="author"/>

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/font-awesome/css/font-awesome.min')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/bootstrap/css/bootstrap.min.css')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/bootstrap/css/bootstrap-responsive.min.css')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/bootstrap/css/bootstrap-fileupload.css')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/css/style.css')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/css/style-responsive.css')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/css/style-default.css')?>">

　　<linkrel="stylesheet"type="text/css"href="<?phpechobase_url('assets/uniform/css/uniform.default.css')?>">

　　<linkrel="stylesheet"href="<?phpechobase_url('assets/data-tables/DT_bootstrap.css')?>">

　　</head>

　　<bodyclass="fixed-top">

　　<divid="header"class="navbarnavbar-inversenavbar-fixed-top">

　　<divclass="navbar-inner">

　　<divclass="sidebar-toggle-boxhidden-phone">

　　<divclass="fafa-reordertooltips"data-placement="right"data-original-title="ToggleNavigation"></div>

　　</div>

　　<aclass="brand"href="<?phpechosite_url('Main/display/main');?>">

　　<imgsrc="<?phpechobase_url('assets/img/logo.png')?>"alt="MetroLab"/>

　　</a>

<!--<aclass="btnbtn-navbarcollapsed"id="main_menu_trigger"data-toggle="collapse"data-target=".nav-collapse">

　　<spanclass="fafa-bar"></span>

　　<spanclass="arrow"></span>

　　</a>-->

　　<divid="top_menu"class="navnotify-row">

　　</div>

　　<divclass="top-nav">

　　<ulclass="navpull-righttop-menu">

　　<liclass="dropdownmtop5">

　　<aclass="dropdown-toggleelement"data-placement="bottom"data-toggle="tooltip"href="#"data-original-title="Chat">

　　<iclass="fafa-comments-o"></i>

　　</a>

　　</li>

　　<liclass="dropdownmtop5">

　　<aclass="dropdown-toggleelement"data-placement="bottom"data-toggle="tooltip"href="#"data-original-title="Help">

　　<iclass="fafa-headphones"></i>

　　</a>

　　</li>

　　<liclass="dropdown">

　　<ahref="#"class="dropdown-toggle"data-toggle="dropdown">

　　<imgsrc="<?phpechobase_url('assets/img/avatar1_small.jpg')?>"alt="">

　　<spanclass="username">JhonDoe</span>

　　<bclass="caret"></b>

　　</a>

　　<ulclass="dropdown-menuextendedlogout">

　　<li>

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

　　<li>

　　</ul>

　　</li>

　　</ul>

　　</div>

　　<divid="container"class="row-fluid">

　　<divclass="sidebar-scroll"style="overflow:hidden;"tabindex="5000">

　　<divid="sidebar"class="nav-collapsecollapse">

　　<divclass="navbar-inverse">

　　<formclass="navbar-searchvisible-phone">

　　<inputclass="search-query"placeholder="Search"type="text">

　　</form>

　　</div>

　　<ulclass="sidebar-menu">

　　<liclass="sub-menuactive">

　　<aclass=""href="index.php">

　　<iclass="fafa-dashboard"></i>

　　</a>

　　</li>

　　<liclass="sub-menu">

　　<ahref="javascript:;"class="">

　　<iclass="fafa-book"></i>

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

　　<spanclass="arrow"></span>

　　</a>

　　<ulclass="sub">

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

　　</ul>

　　</li>

　　<liclass="sub-menu">

　　<ahref="javascript:;"class="">

　　<iclass="fafa-cogs"></i>

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

　　<spanclass="arrow"></span>

　　</a>

　　<ulclass="sub">

　　</ul>

　　</li>

　　<liclass="sub-menu">

　　<ahref="javascript:;"class="">

　　<iclass="fafa-tasks"></i>

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

　　<spanclass="arrow"></span>

　　</a>

　　</li>

　　<liclass="sub-menu">

　　<ahref="javascript:;"class="">

　　<iclass="fafa-th"></i>

　　<spanclass="arrow"></span>

　　</a>

　　<ulclass="sub">

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

　　</ul>

　　</li>

　　<liclass="sub-menu">

　　<ahref="javascript:;"class="">

　　<iclass="fafa-fire"></i>

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

　　<spanclass="arrow"></span>

　　</a>

　　<ulclass="sub">

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

　　<li><aclass=""href="glyphfafas.html">Glyphicons图标</a></li>

　　</ul>

　　</li>

　　<liclass="sub-menu">

　　<aclass=""href="javascript:;">

　　<iclass="fafa-trophy"></i>

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

　　<spanclass="arrow"></span>

　　</a>

　　</li>

　　<liclass="sub-menu">

　　<aclass=""href="javascript:;">

　　<iclass="fafa-map-marker"></i>

　　<spanclass="arrow"></span>

　　</a>

　　<ulclass="sub">

　　</ul>

　　</li>

　　<liclass="sub-menu">

　　<ahref="javascript:;"class="">

　　<iclass="fafa-file-alt"></i>

　　<spanclass="arrow"></span>

　　</a>

　　<ulclass="sub">

　　</ul>

　　</li>

　　</div>

　　<divid="main-content">

　　<divclass="container-fluid">

　　<divclass="row-fluid">

　　<divclass="span12">

　　<h3class="page-title">

　　控制台

　　</h3>

　　<ulclass="breadcrumb">

　　<li>

　　<ahref="home.php">首页</a>

　　<spanclass="divider">/</span>

　　</li>

　　<liclass="active">

　　人力资源总览

　　</li>

　　<liclass="pull-rightsearch-wrap">

　　<formaction="search_result.html"class="hidden-phone">

　　<divclass="input-appendsearch-input-area">

　　<inputclass=""id="appendedInputButton"type="text">

　　<buttonclass="btn"type="button"><iclass="fafa-search"></i></button>

　　</div>

　　</form>

　　</li>

　　</ul>

　　</div>

　　<divclass="row-fluid">

　　<divclass="metro-nav">

　　<divclass="metro-nav-blocknav-block-orange">

　　<adata-original-title=""href="#">

　　<iclass="fafa-user"></i>

　　<divclass="info">7048</div>

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

　　</a>

　　</div>

　　<divclass="metro-nav-blocknav-olive">

　　<adata-original-title=""href="#">

　　<iclass="fafa-tags"></i>

　　<divclass="info">1023</div>

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

　　</a>

　　</div>

　　<divclass="metro-nav-blocknav-block-yellow">

　　<adata-original-title=""href="#">

　　<iclass="fafa-comments-alt"></i>

　　<divclass="info">490</div>

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

　　</a>

　　</div>

　　<divclass="metro-nav-blocknav-block-greendouble">

　　<adata-original-title=""href="#">

　　<iclass="fafa-eye-open"></i>

　　<divclass="info">288</div>

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

　　</a>

　　</div>

　　<divclass="metro-nav-blocknav-block-red">

　　<adata-original-title=""href="#">

　　<iclass="fafa-bar-chart"></i>

　　<divclass="info">255</div>

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

　　</a>

　　</div>

　　<divclass="metro-nav">

　　<divclass="metro-nav-blocknav-light-purpledouble">

　　<adata-original-title=""href="#">

　　<iclass="fafa-shopping-cart"></i>

　　<divclass="info">$8979322442</div>

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

　　</a>

　　</div>

　　<divclass="metro-nav-blocknav-light-bluedouble">

　　<adata-original-title=""href="#">

　　<iclass="fafa-tasks"></i>

　　<divclass="info">$37624</div>

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

　　</a>

　　</div>

　　<divclass="space10"></div>

　　</div>

　　</div>

　　</div>

　　<divid="footer">

　　</div>

　　<scriptsrc="<?phpechobase_url('assets/js/jquery-3.2.1.min.js')?>"></script>

　　<scripttype="text/javascript"src="<?phpechobase_url('assets/js/jquery.nicescroll.js')?>"></script>

　　<scripttype="text/javascript"src="<?phpechobase_url('assets/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js')?>"></script>

　　<scripttype="text/javascript"src="<?phpechobase_url('assets/jquery-slimscroll/jquery.slimscroll.min.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/fullcalendar/fullcalendar.min.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/bootstrap/js/bootstrap.min.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/jquery.blockui.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/uniform/jquery.uniform.min.js')?>"></script>

<!--[ifltIE9]>

　　<scriptsrc="js/excanvas.js"></script>

　　<scriptsrc="js/respond.js"></script>

　　<![endif]-->

　　<scripttype="text/javascript"src="<?phpechobase_url('assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js')?>"></script>

　　<scripttype="text/javascript"src="<?phpechobase_url('assets/js/jquery.sparkline.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/chart-master/Chart.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/jquery.scrollTo.min.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/common-scripts.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/easy-pie-chart.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/sparkline-chart.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/home-page-calender.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/js/home-chartjs.js')?>"></script>

　　<?phpswitch($page){

　　case"users":?>

　　<divid="footer">

　　</div>

　　<scriptsrc="<?phpechobase_url('assets/js/editable-table.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/data-tables/jquery.dataTables.js')?>"></script>

　　<scriptsrc="<?phpechobase_url('assets/data-tables/DT_bootstrap.js')?>"></script>

　　jQuery(document).ready(function(){

　　EditableTable.init();

　　});

　　</script>

　　<?phpbreak;?>

　　<?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

　　EASYPIECHART是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素

　　jquery-slimscroll

　　slimscroll是一个4.6kb的jQuery插件，把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间，它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值

　　https://github.com/rochal/jQuery-slimScroll/releases

　　Uniform

　　jQuery表单美化插件

　　本程序用到的js插件

　　====================================TheEnd==========================

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54575.shtml