Trình mã hóa bảng Bootstrap

Làm cách nào để tìm nạp dữ liệu từ cơ sở dữ liệu trong codeigniter? . Sử dụng Twitter Bootstrap với CodeIgniter giúp tiết kiệm rắc rối khi viết Biểu định kiểu CSS cho ứng dụng của bạn và cho phép bạn tập trung vào phát triển. Sau này, bạn có thể tùy chỉnh các kiểu bootstrap cho phù hợp với nhu cầu của mình. Đó là phần tốt nhất của việc sử dụng mẫu MVC vì bản trình bày (chế độ xem) là riêng biệt, bạn có thể thay đổi giao diện của ứng dụng bất kỳ lúc nào mà không làm ảnh hưởng đến phần còn lại của nó

mã hóa đơn giản. com có ​​rất nhiều hướng dẫn khởi động twitter về cách tùy chỉnh bootstrap 3 và tôi khuyên bạn nên xem qua phần hướng dẫn khởi động của chúng tôi

Tìm nạp dữ liệu từ cơ sở dữ liệu trong CodeIgniter

Bây giờ chúng ta sẽ xem cách đọc dữ liệu từ Cơ sở dữ liệu MySQL và hiển thị nó ở định dạng bảng gọn gàng với Bootstrap. Vì chúng tôi sẽ sử dụng bootstrap, chúng tôi không muốn viết bất kỳ biểu định kiểu tùy chỉnh nào để định dạng màn hình. Nếu bạn chưa quen với việc sử dụng Bootstrap với CodeIgniter, thì bạn phải đọc hướng dẫn này về Cách tích hợp Bootstrap với CodeIgniter

Trong hướng dẫn CodeIgniter này, tôi sẽ đọc dữ liệu từ cơ sở dữ liệu MySQL và hiển thị nó ở định dạng bảng gọn gàng bằng Bootstrap3. Ví dụ: giả sử chúng ta có một DB được gọi là nhân viên có hai bảng dưới đây

tbl_dept (int_id. var_dept_name. int_hod)
tbl_emp (int_id. var_emp_name. int_dept_id)

Bây giờ tôi muốn hiển thị danh sách toàn bộ phòng ban cùng với tên nhân viên trưởng phòng

1. Đầu tiên tạo model với tên department_model. php trong thư mục system/application/models. Sau đó thêm chức năng đọc danh sách phòng ban từ DB

Tệp mô hình (department_model. php)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class department_model extends CI_Model{
     function __construct()
     {
          // Call the Model constructor
          parent::__construct();
     }

     //read the department list from db
     function get_department_list()
     {
          $sql = 'select var_dept_name, var_emp_name from tbl_dept, tbl_emp where tbl_dept.int_hod = tbl_emp.int_id';
          $query = $this->db->query($sql);
          $result = $query->result();
          return $result;
     }
}

2. Tiếp theo tạo tệp điều khiển với tên bộ phận. php trong thư mục hệ thống/ứng dụng/bộ điều khiển. Trong bộ điều khiển này, gọi chức năng mô hình để lấy danh sách bộ phận và chuyển nó vào tệp xem để trình bày

Tệp điều khiển (bộ phận. php)

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 class department extends CI_Controller {
     public function __construct()
     {
          parent::__construct();
          $this->load->helper('url');
          $this->load->database();
     }

     public function index()
     {
          //load the department_model
          $this->load->model('department_model');  
          //call the model function to get the department data
          $deptresult = $this->department_model->get_department_list();           
          $data['deptlist'] = $deptresult;
          //load the department_view
          $this->load->view('department_view',$data);
     }
}

3. Cuối cùng tạo file view với tên department_view. php trong thư mục system/application/views. Bây giờ hãy phân tích từng dữ liệu nhận được từ bộ điều khiển và hiển thị nó. Để hiển thị danh sách bộ phận ở định dạng bảng gọn gàng, hãy sử dụng bảng các lớp tích hợp bootstrap, table-striped & table-hover

Tệp Xem (department_view. php)

<html>
     <head>
          <title>Department Master</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <!--link the bootstrap css file-->
          <link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
     </head>
     <body>
          <div class="container">
          <div class="row">
          <div class="col-lg-12 col-sm-12">
               <table class="table table-striped table-hover">
                    <thead>
                         <tr>
                              <th>#</th>
                              <th>Department Name</th>
                              <th>Head of Department</th>
                         </tr>
                    </thead>
                    <tbody>
                         <?php for ($i = 0; $i < count($deptlist); ++$i) { ?>
                              <tr>
                                   <td><?php echo ($i+1); ?></td>
                                   <td><?php echo $deptlist[$i]->var_dept_name; ?></td>
                                   <td><?php echo $deptlist[$i]->var_emp_name; ?></td>
                              </tr>
                         <?php } ?>
                    </tbody>
               </table>
          </div>
          </div>
          </div>
     </body>
</html>

Có liên quan. Phân trang CodeIgniter bằng Twitter Bootstrap CSS

Đây là chế độ xem bảng của ví dụ trên

Trình mã hóa bảng Bootstrap

Như tôi đã nói trước đó trong hướng dẫn này, chúng tôi chưa viết bất kỳ kiểu CSS nào của riêng mình, nhưng chúng tôi có được một danh sách bảng được định dạng gọn gàng bằng cách sử dụng các lớp bootstrap (Thật tuyệt phải không?)

Đọc
  • Cơ sở dữ liệu CodeIgniter CRUD - Chèn
  • Cơ sở dữ liệu CodeIgniter CRUD - Cập nhật
  • Cơ sở dữ liệu CodeIgniter CRUD - Xóa

Điều đó giải thích về việc tìm nạp dữ liệu từ cơ sở dữ liệu trong codeigniter và hiển thị nó trong bảng html bằng cách sử dụng bootstrap