Cách thêm bootstrap vào codeigniter 4

#3

22-09-2019, 07. 43 giờ sáng


Thư viện nội dung của tôi có thể trợ giúp việc này.
https. //github. com/tattersoftware/codeigniter4-assets

Ngay bây giờ, bạn cần thiết lập từng phần, nhưng phiên bản chính tiếp theo sẽ có hỗ trợ tích hợp sẵn cho một số gói phổ biến chính.

nhà soạn nhạc yêu cầu tatter/nội dung
nhà soạn nhạc yêu cầu twbs/bootstrap4

Để biết ví dụ về phiên bản tự động của điều này ngay bây giờ, hãy xem.
https. //github. com/tattersoftware/headquarters

Chú ý đến nhà soạn nhạc. json, sau cập nhật. sh, ứng dụng/Cấu hình/Tài sản. php và ứng dụng/Lượt xem/mẫu/tiêu đề. php

Bootstrap là một khung CSS nguồn mở và miễn phí hướng đến phát triển web giao diện người dùng đầu tiên trên thiết bị di động, đáp ứng. Nó chứa các mẫu thiết kế dựa trên CSS và JavaScript cho kiểu chữ, biểu mẫu, nút, điều hướng và các thành phần giao diện khác

DataTables là một plug-in nâng cao bảng cho thư viện jQuery Javascript, bổ sung khả năng sắp xếp, phân trang và lọc cho các bảng HTML đơn giản với nỗ lực tối thiểu

Các chủ đề sau sẽ được đề cập trong hướng dẫn này

  • Cài đặt Codeigniter với gói soạn thảo
  • Tạo chế độ xem để xử lý các hoạt động CRUD
  • Triển khai Bootstrap 4 trong Codeigniter
  • Triển khai DataTables trong Codeigniter
  • Thêm dữ liệu vào MySQL
  • Lấy dữ liệu từ MySQL
  • Cập nhật dữ liệu từ MySQL
  • Xóa đối tượng người dùng khỏi cơ sở dữ liệu
  • Kích hoạt lỗi Codeigniter

Ví dụ về ứng dụng Codeigniter Bootstrap CRUD

  • Bước 1. Tải xuống hoặc cài đặt Codeigniter 4
  • Bước 2. Kích hoạt lỗi Codeigniter
  • Bước 3. Thiết lập cơ sở dữ liệu
  • Bước 4. Tạo mô hình mới
  • Bước 5. Tạo bộ điều khiển CRUD
  • Bước 6. Tạo tuyến đường
  • Bước 7. Chèn dữ liệu vào cơ sở dữ liệu
  • Bước 8. Hiển thị danh sách dữ liệu và xóa
  • Bước 9. Chỉnh sửa và cập nhật dữ liệu

Tải xuống hoặc cài đặt Codeigniter 4

Gọi bước đầu tiên bằng cách tải xuống ứng dụng Codeigniter 4 mới bằng gói trình soạn thảo

composer create-project codeigniter4/appstarter

Khi dự án đã được tải xuống, hãy đổi tên tên thư mục theo lựa chọn của bạn. Trong trường hợp của chúng tôi, chúng tôi sẽ đặt tên là codeigniter-crud-example. Sau đó, vào bên trong thư mục dự án bằng lệnh bên dưới

cd codeigniter-crud-example

Bạn cũng có thể tải xuống ứng dụng Codeigniter 4 theo cách thủ công để thúc đẩy quá trình phát triển hoạt động CRUD

Kích hoạt lỗi Codeigniter

Bước này là cần thiết. Hãy để tôi nói cho bạn biết lý do tại sao? . Sau khi dành một chút thời gian trên google, tôi biết rằng bạn có thể tăng cường động lực của quá trình phát triển bằng cách bật báo cáo lỗi và có thể hiển thị trên màn hình bằng cách thực hiện theo quy trình bên dưới

Mở ứng dụng/Cấu hình/Khởi động/phát triển. php và đặt

cd codeigniter-crud-example
3 thành 1 thay vì 0. Lặp lại quy trình tương tự trong ứng dụng/Cấu hình/Khởi động/sản xuất. tập tin php

ini_set('display_errors', '1');

Thiết lập cơ sở dữ liệu

Nói chung, bước này diễn giải cách tạo động lực cho công việc liên quan đến cơ sở dữ liệu. Chúng tôi sẽ tạo một cơ sở dữ liệu mới

cd codeigniter-crud-example
4, tạo tên người dùng
cd codeigniter-crud-example
5 trong MySQL và thiết lập kết nối cơ sở dữ liệu

Để duy trì xung đang diễn ra, bạn có thể thực hiện truy vấn SQL từ PHPMyAdmin để tạo bảng người dùng

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => 'root',
        'database' => 'demo',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
	];

CodeIgniter\Database\Exceptions\DatabaseException #8
Không thể kết nối cơ sở dữ liệu. Trình viết mã

Dù sao đi nữa, nếu bạn nhận được Codeigniter – lỗi không thể kết nối với cơ sở dữ liệu MySQL, thì hãy thay đổi giá trị tên máy chủ dựa trên máy chủ cục bộ của bạn e. g MAMP hoặc XAMPP

# MAMPP
public $default = [
  ...
     'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',
  ...
]
# XAMPP
public $default = [
  ...
     'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',
  ...
]

Tạo mô hình mới

Mô hình được sử dụng để xác định lược đồ là nguyên mẫu của các giá trị bảng. Vì vậy, chúng ta phải hiển thị một UserModel mới. php trong thư mục app/Models/. Chèn mã sau vào cùng một tệp để thiết lập Mô hình người dùng

________số 8

Lớp mô hình cung cấp quyền truy cập động lực vào kết nối cơ sở dữ liệu. Nó đồng thời hỗ trợ cơ sở dữ liệu các truy vấn để đẩy dữ liệu chuyển tiếp trong cơ sở dữ liệu

Codeigniter cung cấp nhiều tùy chọn cấu hình để xử lý các giá trị Mô hình và bạn có thể kiểm tra các giá trị đó tại đây

Tạo bộ điều khiển CRUD

Trong phần này của hướng dẫn này, chúng ta sẽ hiển thị một bộ điều khiển mới và đặt tên là UserCrud. php. Bộ điều khiển này sẽ giữ các phương thức CRUD để xử lý các thao tác CRUD như Tạo, Đọc, Cập nhật, Xóa

Chúng ta phải đặt đoạn mã sau bên trong app/Controllers/UserCrud. php và gọi các thao tác CRUD

 
namespace App\Controllers;
use App\Models\UserModel;
use CodeIgniter\Controller;
class UserCrud extends Controller
{
    // show users list
    public function index(){
        $userModel = new UserModel();
        $data['users'] = $userModel->orderBy('id', 'DESC')->findAll();
        return view('user_view', $data);
    }
    // add user form
    public function create(){
        return view('add_user');
    }
 
    // insert data
    public function store() {
        $userModel = new UserModel();
        $data = [
            'name' => $this->request->getVar('name'),
            'email'  => $this->request->getVar('email'),
        ];
        $userModel->insert($data);
        return $this->response->redirect(site_url('/users-list'));
    }
    // show single user
    public function singleUser($id = null){
        $userModel = new UserModel();
        $data['user_obj'] = $userModel->where('id', $id)->first();
        return view('edit_user', $data);
    }
    // update user data
    public function update(){
        $userModel = new UserModel();
        $id = $this->request->getVar('id');
        $data = [
            'name' => $this->request->getVar('name'),
            'email'  => $this->request->getVar('email'),
        ];
        $userModel->update($id, $data);
        return $this->response->redirect(site_url('/users-list'));
    }
 
    // delete user
    public function delete($id = null){
        $userModel = new UserModel();
        $data['user'] = $userModel->where('id', $id)->delete($id);
        return $this->response->redirect(site_url('/users-list'));
    }    
}

Tạo các tuyến đường trong Codeigniter

Bây giờ, chúng ta phải tạo các tuyến để xử lý các hoạt động CRUD. Để biết thêm về cách tạo các tuyến RESTful, bạn có thể xem các tài liệu chính thức tại đây

Để bật các tuyến trong ứng dụng Codeigniter CRUD, hãy đặt đoạn mã sau vào bên trong ứng dụng/Cấu hình/Routes. tập tin php

cd codeigniter-crud-example
0

Codeigniter Chèn dữ liệu vào ví dụ cơ sở dữ liệu

Bây giờ, chúng ta sẽ tìm hiểu cách đẩy dữ liệu vào cơ sở dữ liệu MySQL thông qua Codeigniter. Tạo add_user. php bên trong thư mục ứng dụng/Lượt xem/ rồi kết hợp đoạn mã sau vào cùng một tệp

cd codeigniter-crud-example
1

Chúng tôi đã đề cập đến các chủ đề sau trong đoạn mã trên

  • Chèn dữ liệu vào Cơ sở dữ liệu
  • Tích hợp và sử dụng Bootstrap 4 trong ứng dụng Codeigniter
  • Triển khai xác thực biểu mẫu phía máy khách trong Codeigniter với jquery. xác thực. js

Hiển thị danh sách dữ liệu và xóa

Trong bước này, chúng tôi sẽ tìm nạp dữ liệu từ cơ sở dữ liệu MySQL và hiển thị dữ liệu trong ứng dụng Codeigniter bằng DataTables. Đồng thời, chúng tôi cũng sẽ xem xét cách xóa một người dùng khỏi cơ sở dữ liệu

Nói chung, DataTables là một trình cắm nâng cao bảng dựa trên jQuery (thư viện Javascript), Nó mang lại sự nhất quán trong quá trình phân tích dữ liệu, lý tưởng là cung cấp khả năng thêm, sắp xếp, phân trang và lọc cho các bảng HTML đơn giản với nỗ lực tối thiểu

Tạo ứng dụng/Lượt xem/user_view. php và thêm đoạn mã sau vào bên trong nó

cd codeigniter-crud-example
2

Cách thêm bootstrap vào codeigniter 4

Chỉnh sửa và cập nhật dữ liệu

Chúng ta phải tạo app/Views/edit_view. php và chèn đoạn mã sau vào bên trong nó để cập nhật dữ liệu người dùng trực tiếp trong cơ sở dữ liệu

cd codeigniter-crud-example
0

Bắt đầu ứng dụng

Thực hiện lệnh sau để chạy ứng dụng này

cd codeigniter-crud-example
1

Đây là URL mà bạn phải nhập vào thanh địa chỉ của trình duyệt để bắt đầu ứng dụng CRUD

cd codeigniter-crud-example
2

Điểm mấu chốt

Cuối cùng thì chúng ta đã hoàn thành bài hướng dẫn Codeigniter 4 CRUD Operations. Trong hướng dẫn này, chúng tôi đã sắp xếp mọi thứ vào đúng chỗ ngay từ đầu và xem xét tất cả các mệnh lệnh

Nếu bạn là người mới bắt đầu phát triển Codeigniter, thì hướng dẫn này sẽ phát triển sự nghiệp phát triển của bạn

Động lực để tạo hướng dẫn này đến từ những ngày đầu tiên tôi phát triển Codeigniter. Tôi hy vọng bạn thích những nỗ lực chuyên sâu của tôi và chắc chắn sẽ chia sẻ hướng dẫn này với những người khác

Bạn có thể tải xuống toàn bộ mã của hướng dẫn này từ GitHub, Chúc một ngày tốt lành

Cách thêm bootstrap vào codeigniter 4

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Codeigniter 4 Hướng dẫn về biểu đồ cột và xếp chồng Morris Codeigniter 4 Hướng dẫn tích hợp biểu đồ hình tròn của Google PHP Codeigniter 4 Hướng dẫn về biểu đồ đường và thanh của Google Codeigniter 4 Hướng dẫn tích hợp biểu đồ cột của Google Codeigniter 4 Hướng dẫn tích hợp biểu đồ đường và vùng Morris Codeigniter 4 Hướng dẫn đăng nhập và đăng ký xác thực Codeigniter 4 Hộp tìm kiếm địa chỉ tự động điền của Google

Làm cách nào để triển khai bootstrap trong CodeIgniter?

Hiển thị hoạt động trên bài đăng này. .
Tạo trực tiếp một thư mục (nội dung) trong thư mục gốc Codeigniter (Cùng cấp với thư mục ứng dụng)
Dán các tệp bootstrap của bạn vào thư mục đó
thêm mã liên kết vào tệp xem của bạn Làm cách nào để thêm CSS vào CodeIgniter 4?
Thêm tệp JavaScript và CSS (Cascading Style Sheet) trong CodeIgniter rất đơn giản. Bạn phải tạo thư mục JS và CSS trong thư mục gốc và sao chép tất cả. js trong thư mục JS và. các tệp css trong thư mục CSS như trong hình.

Làm cách nào để tích hợp chủ đề trong CodeIgniter 4?

Tôi sẽ thảo luận về Cách tích hợp chủ đề Bootstrap với Codeigniter 4. .
Tải xuống CodeIgniter 4
Tải xuống chủ đề Bootstrap Chủ đề quản trị Bootstrap
WAMP, XAMPP hoặc Máy chủ trực tiếp
Bật mô-đun mod_rewrite (dành cho Apache)