使用PHP開發HR系統（4）

時間 2019-12-07

標籤使用 php 開發系統欄目 PHP 简体版

原文原文鏈接

本節咱們講述如何引入頁面框架來創建漂亮的主頁。 javascript

================================================================================================== php

打開https://www.js-css.cn/divcss/admin/metro/index.html網站，看到以下頁面： css

這裏有不少漂亮的控件能夠使用，頁面風格也比較統一，能夠用這個來快速構建咱們本身的頁面； html

1 添加文件 前端

1）在HRMS工程下新建assets文件夾，把咱們須要的文件分別添加進去，以下圖； html5

這裏對不一樣類型的文件作了分門別類的放置，看起來更規整一些； java

2、修改main_list.php文件 jquery

由上面的配置文件咱們能夠看出，咱們須要名稱爲main的控制器，打開application->controllers文件夾，看到目錄下 git

有一個Welcome.php的文件，這個就是系統默認調用的文件； github

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插件