Kết quả 1 đến 3 của 3
  1. #1
    Moderator anh_saker's Avatar
    Ngày tham gia
    29-05-2013
    Bài viết
    5
    Cảm ơn
    4
    Được cảm ơn 4 trong 2 bài viết

    Asset - Thư viện asset đơn giản cho CI

    Thiếu thư viện quản lý tập tin js, css... có lẽ là 1 thiếu sót lớn của CI. Cộng với chuyện View của CI hơi nghèo nàn khi thiếu vài phần như cơn bản layout, theme... Cơ mà chuyện đó cũng đã giải quyết đc khi có khá nhiều thư viện bổ sung cho nó.
    Về phần quản lý js, css (assets) cũng đã có khá nhiều thư viện cho nó. Cơ mà đc cái lọ thì mất cái chai, chẳng cái nào đc cả 2. Nhiều cái tốt cơ mà có hơi nhiều tính năng cho nó hệ thống có vẻ chậm đi và nhiều thứ mình ko cần dùng.


    Vì thế mà bữa nọ ngồi lạch cạch viết cái thư viện Asset, đơn giản với mục đích của mình dùng. Rất đơn giản thôi, nó chỉ có nghiệm vụ nhận những file js, css từ controller và đến phần view thì nó show ra trong các tag <script>, <link>.
    Và nếu thiết đặt cho nó sử dụng minify thì tên file lúc xuất ra sẽ có tiền tố .min ở cuối file. VD: jquery.js -> jquery.min.js
    Hay nếu thiết đặt gộp tất cả file làm 1 thì nó sẽ chỉ xuất ra với 1 file có tên đặt sẵn.

    Điều này có nghĩa bạn sẽ phải dùng tay để quản lý các tập tin js, css của mình. Nói là dùng tay vất vả chứ với sự ra đời của node với 1 đống module của nó việc minify file với gộp file là chuyện nhỏ :)


    Cách sử dụng.


    Rất đơn giản các bạn cần download thư viện ở link dưới.
    https://github.com/anhsaker/ci-asset
    Sau khi tải về ném tất cả tập tin trong thư mục tương ứng vào ứng dụng của bạn.
    Tại Controller bạn sẽ phải load thư viện để dùng.
    $this->load->library('asset');
    Các phương thức đc viết theo kiểu static nên bạn có thể gọi trực tiếp nó mà ko cần dùng $this.
    VD: Asset::render();

    Cấu hình

    Tập tin cấu hình gồm như sau:
    PHP Code:
    $config['asset_dir'] = 'assets/'// Tên thư mục đặt các thư mục js, css, img...
    $config['asset_url'] = ''// Tên đường link dẫn đến thư mục asset. (Để trống hoặc nếu bạn sử dụng CDN thì điền vào)

    // ------------------------------------------------------------------------

    $config['combine'] = FALSE// Cho phép gộp tất cả các file lại. (Thực chất chỉ là show ra 1 file đc thiết lập bên dưới :) ) 
    $config['minify']  = FALSE// Cho phép nén các tập tin. (Đơn giản chi thêm tiền tố .min vào trc đuôi tập tin css, js)

    // ------------------------------------------------------------------------

    $config['combine_js']  = 'functions.js'// Tên file js khi sử dụng combine
    $config['combine_css'] = 'styles.css'// Tên file css khi sử dụng combine

    // Cấu trúc thư mục sẽ là:
    // assets/
    //        js/
    //        css/
    //        img/ 
    Các phương thức hỗ trợ.

    PHP Code:
    // Cấu hình (Các phương thức này sẽ ghi đè với config ở trên)
    Asset::set_dir(string $dir_name]) // Thiết đặt thư mục assets
    Asset::set_urlstring $url]) // THiết đặt URL của asset
    Asset::set_option(string $key, [string $value='']) // Thiết lập các tùy chọn (combine, minify, combine_js, combine_css).
    // Sử dụng: Asset::set_option('combine', TRUE); hoặc Asset::set_option( array('combine' => TRUE, 'minify' => TRUE) );

    // Sử dụng bên View

    // Add js, css
    Asset::pre_js( array|string $js_name [, $...]] ) // Thêm ở đầu kết quả trả về 1 hoặc nhiều file js
    Asset::pre_css( array|string $css_name [, $...] ) // Thêm ở đầu kết quả trả về 1 hoặc nhiều file css
    Asset::add_js( array|string $js_name [, $...] ) // Add 1 hoặc nhiều file js vào cuối kết quả trả về
    Asset::add_css( array|string $css_name [, $...] ) // Add 1 hoặc nhiều file css vào cuối kết quả trả về

    // Các phương thức trên chấp nhận nhiều đối số truyền vào. Hoặc đối số đầu tiên là 1 mảng
    // VD để thêm css sử dụng bằng 2 cách sau là như nhau
    // Asset::add_css('style.css', 'main.css', 'home.css')
    // Asset::add_css(array(''style.css', 'main.css', 'home.css''))

    Asset::render() // Đơn giản là gọi lại 2 phương thức render_css và render_js ở dưới
    Asset::render_js() // Truy xuất tất cả file js được gọi trong tag <script>
    Asset::render_css() // Truy xuất tất cả file css đc gọi trong tag <link>

    Asset::urlstring [$file_url '']) // Trả về url hiện tại của thư mục assets
    Asset::path() // Trả về đường dẫn tuyệt đối của thư mục assets

    Asset::jsstring $file_url // Đơn giản hiển thị thẻ <script> gọi đến file js là tham số thứ nhất.
    Asset::css (string $file_url // Đơn giản hiển thị thẻ <link> gọi đến file css là tham số đầu.
    Asset::imgstring $image, [$alt ''], [$attr '']) // Helper trả về thẻ <img>

    Asset::jquery(string $version// Helper hỗ trợ load jquery. (Sẽ load jquery từ CDN của google. Nếu ko có mạng sẽ load từ asset của hệ thống)
    Asset::google_analytics(string $account_key// Helper hỗ trợ load google analytics 

    Ví dụ cơ bản

    Tạo file controllers/home.php như sau:
    PHP Code:
    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    class 
    Home extends CI_Controller {

        public function 
    __construct()
        {
            
    parent::__construct();

            
    // Load thu vien asset
            
    $this->load->library('asset');

        }

        public function 
    index()
        {
            
    // Add assets
            
    Asset::add_js('home.js');
            
    Asset::add_css('home.css');

            
    // Load view
            
    $this->load->view('home_index');
        }

    }

    /* End of file home.php */
    /* Location: ./application/controllers/home.php */
    Tạo file view/home_index.php như sau:
    PHP Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Home Title</title>

        <meta name="description" content="">
        <meta name="author" content="">

        <?php echo Asset::pre_css('font-awesome.css' ,'bootstrap.css'?>

        <!-- Place CSS -->
        <?php echo Asset::render_css() ?>

        <!-- jQuery -->
        <?php echo Asset::jquery('1.9.1'?>

        <!-- Place All CSS + JS -->
        <!--
        <?php echo Asset::render() ?>
        -->

    </head>
    <body>

        <h1>Hello Word</h1>

        <!-- Place JS -->
        <?php echo Asset::render_js() ?>

    </body>
    </html>
    Kết quả nhận được:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Home Title</title>
    
        <meta name="description" content="">
        <meta name="author" content="">
    
        
        <!-- Place CSS -->
        <link rel="stylesheet" type="text/css" href="http://localhost/CodeIgniter/public/assets/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="http://localhost/CodeIgniter/public/assets/css/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="http://localhost/CodeIgniter/public/assets/css/home.css">
    
        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://localhost/CodeIgniter/public/assets/js/jquery-1.9.1.min.js"><\/script>')</script>
    
        <!-- Place All CSS + JS -->
        <!--
            <link rel="stylesheet" type="text/css" href="http://localhost/CodeIgniter/public/assets/css/bootstrap.css">
            <link rel="stylesheet" type="text/css" href="http://localhost/CodeIgniter/public/assets/css/font-awesome.css">
            <link rel="stylesheet" type="text/css" href="http://localhost/CodeIgniter/public/assets/css/home.css">
            <script type="text/javascript" src="http://localhost/CodeIgniter/public/assets/js/home.js"></script>
        -->
    
    </head>
    <body>
    
        <h1>Hello Word</h1>
    
        <!-- Place JS -->
        <script type="text/javascript" src="http://localhost/CodeIgniter/public/assets/js/home.js"></script>
    
    </body>
    </html>

  2. The Following 3 Users Say Thank You to anh_saker For This Useful Post:

    2webvn.com (30-05-2013),dzung.tt (30-05-2013),tinhphaistc (30-05-2013)

  3. #2
    Moderator 2webvn.com's Avatar
    Ngày tham gia
    27-03-2013
    Bài viết
    203
    Cảm ơn
    24
    Được cảm ơn 119 trong 81 bài viết
    Cảm ơn bài viết của bạn. bạn đã dùng minify rồi phải không? bạn có thể viết 1 bài ngắn gọn hướng dẫn về nó được không? lúc trc mình có load minify-2.1.5 nhưng mình không dùng vì mình không hiểu cách dùng nó cho lắm. với lại nó cũng có nhiều chức năng khác mình không hiểu.
    Cảm ơn bài viết của bạn.
    Sửa lần cuối bởi 2webvn.com; 31-05-2013 lúc 01:32 PM.

  4. The Following User Says Thank You to 2webvn.com For This Useful Post:

    anh_saker (30-05-2013)

  5. #3
    Moderator anh_saker's Avatar
    Ngày tham gia
    29-05-2013
    Bài viết
    5
    Cảm ơn
    4
    Được cảm ơn 4 trong 2 bài viết
    Trích dẫn Gửi bởi 2webvn.com Xem bài viết
    Cảm ơn bài viết của bạn. bạn đã dùng minify rồi phải không? bạn có thể viết 1 bài ngắn gọn hướng dẫn về nó được không? lúc trc mình có load minify-2.1.5 nhưng mình không dùng vì mình không hiểu cách dùng nó cho lắm. với lại nó cũng có nhiều chức năng khác mình không hiểu.
    Cảm ơn bài viết của bạn.
    Cái minify-2.1.5 của bạn nó chỉ là thư viện php thôi chứ ko viết cho CI. Nếu bạn đơn giản muốn minify file css, js thì có thể dùng thư viện này:
    https://github.com/jenssegers/CodeIgniter-Minify

Chia sẽ và Bình Luận chủ đề Asset - Thư viện asset đơn giản cho CI trên facebook

Các từ khóa xuất hiện trên google của chủ đề

cách sử dụng các assest

asset k dẫn đến public

Tag của Chủ đề này - Hãy Thêm Tags Để bài viết nhanh lên top google

Quyền viết bài

  • Bạn không thể đăng chủ đề mới
  • Bạn không thể gửi trả lời
  • Bạn không thể gửi đính kèm
  • Bạn không thể sửa bài
  •