Login

kenlyle · 09-16-2018, 08:30 AM

I know there are several GitHub projects with AdminLTE added to CI, but they tend to go out of date.

It seems like the AdminLTE site points to the existence of these projects as evidence that the two can be integrated, so doesn't feel the need to give instructions.

I have seen some videos where it looks like the action is to drop all the ALTE files into one of the CI folders, and then make some config changes that I couldn't follow.

The problem is that I have a partly functioning CRUD setup with an ALTE menu generated by CrudIgniter, but am missing some features like sortable headers, and Search, and want to make sure that I have the full ALTE package installed before I go trying to add some JS manually to the pages.

Overall, it seems confusing.

Can someone provide or point me to clear written instructions for adding ALTE to a new CI project? Preferably without one of those pre-integrations, and without Composer.

TIA.

***jreklund*** · 09-16-2018, 09:58 AM

It's based on css/javascript so it needs to be in your public_html folder.
I made a "vendor" folder that includes:
adminlte (this is the dist folder if you download the .zip file)
bootstrap
ckeditor
font-awesome
jquery
jquery-slimscroll

After that you can use it in your application/views template files. I have an header (that includes menu and sidebar code) and a footer for alla JavaScript.

PHP Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?php echo lang('program_name'); ?> | <?php echo lang('program_desc'); ?></title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/vendor/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/vendor/adminlte/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="<?php echo $body_class; ?>">
<div class="wrapper">
<?php $this->load->view('template/menu'); ?>
<?php $this->load->view('template/sidebar'); ?>

PHP Code:
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
        reserved.
    </footer>
</div>
<!-- ./wrapper -->
    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/vendor/adminlte/js/adminlte.min.js"></script>
</body>
</html> 

And I tell Codeigniter to load a master that, that includes the header and footer.

PHP Code:
<?php $this->load->view('template/header'); ?>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Fixed Layout
                <small>Blank example to the fixed layout</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Layout</a></li>
                <li class="active">Fixed</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="callout callout-info">
                <h4>Tip!</h4>

                <p>Add the fixed class to the body tag to get this layout. The fixed layout is your best option if your sidebar
                    is bigger than your content because it prevents extra unwanted scrolling.</p>
            </div>
            <!-- Default box -->
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Title</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                            <i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    Start creating your amazing application!
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    Footer
                </div>
                <!-- /.box-footer-->
            </div>
            <!-- /.box -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
<?php $this->load->view('template/footer'); ?>

kenlyle · 09-16-2018, 11:33 AM

Nice reply! Thanks.