Using PHP to develop HR system (5)

Time:2019-10-21

   

This section describes how to split pages and usejqueryandajaxLocal refresh

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

From our page, the menu on the left is unchanged, and the content area on the right changes according to different menus, so we wonder whether we can only focus on

For local refresh on the right, you can use ajaxTechnology to complete.

   

1 split home page

 

We divide the page structure into four areas: 1, top of pageTopRegion;2, left side of pageMenuRegion;3, middle area of the page;4, bottom of pagefooterRegion;

According to this division, we put main_The list is divided into top, menu and footer, and the page head is also separated. See the following steps for details:

1) in viewCreate under directorycontainer.phpreplacemain_List.php file

<?php

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

?>


<!–

load->view(‘templates/header’); ?>

load->view(‘templates/top’); ?>

load->view(‘templates/menu’); ?>

load->view(‘main’); ?>        

        

load->view(‘templates/footer’); ?>

Through the transformation, our homepage code looks very simple, including several files:

i)header.php(view->Templates) to store pagesheadBlock code:

   

Software Service Manager System

   

<!–        –>

<!–        –>

   

        

   

        

          

        

ii)top.php(view->Templates) to store pagestopContents of the area:

‘); ?>”>

Metro Lab

   

<!–

–>

  •    

  • Jhon Doe

  •         Swing

  • My information
  • My settings
  • Sign out
  •                 

    iii)menu.php(view->Templates) to store pagesmenuBlock code:

            

    iV)footer.php(view->Templates) to store pagesfooterBlock code:

       

    <!–        –>

       

       

    V)main.php(viewDirectory) to store the content area code of the main page of the page:

    7048

    Total number of employees

    1023

    Number of people to be recruited

    490

    Number of employees in this month

    288

    Number of employees leaving this month

    255

    Number of people to be recruited this month

    $8979322442

    Salary and benefits of the year

    $37624

    Salary and benefits of this month

       

       

    2)At present, our engineering structure is as follows

       

    2. Modify the controllers – > main.php file

    <?php

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

       

    class Main extends CI_Controller {

       

    public function __construct(){

    parent::__construct();

    $this->load->helper(‘url_helper’);                

    }

     

    public function index()

    {

    $this->load->view(‘container’);

    }

    }

    3 ajaxApplication

    In order to achieve local refresh, we introduce Ajax to realize it.

    1) at footerAdd the following to the. PHP file

                            

    Among them, sub1 corresponds to the “employee information” menu in menu.php.

    3 running test

    The operation homepage is as follows:

    Click “employee information” menu, the page is as follows

       

    Conclusion:

    In this paper, we first split the home page to make the module more independent and the page code clearer. At the same time, we use ajax.Technology, to achieve the local refresh of the page;

       

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

       

       

       

     

       

       

       

       

       

       

       

       

       

       

       

       

     

    Recommended Today

    Single and multiple buttons are styled with pictures

    I’ve always seen people asking how to style and enlarge the buttons of radio buttons and multi buttons? Let’s share an example I did. 1. First make the button into a picture  2.html page Copy code The code is as follows: <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script type=”text/javascript” src=”jquery-1.10.2.min.js”></script> <script type=”text/javascript”> […]