Tuesday, July 11, 2017

Membuat Halaman Admin / Dashboard Codeigniter

Halaman Admin adalah merupakan pengendali dari sebuah sistem dalam menjalankan prosedur tertentu. Admin mempunyai tugas untuk mengatur semua jalannnya proses sistem yang ada. Agar admin dapat menjalankan itu semua, dibutuhkan sebuah manajemen sistem yaitu halaman admin. Halaman admin adalah tempat dimana admin dapat mengatur, mengontrol dan memanajemen proses yang ada pada suatu sistem.

Tutorial ini merupakan tutorial berkelanjutan, untuk melihat daftar isi silahkan baca artikel : Tutorial Pembuatan Apliakasi PPDB Online Berbasis Web Lihat Artikel )


Dalam tutorial kali ini saya menggunakan framework codeigniter, dengan bahasa pemrograman php. serta untuk databasenya sendiri saya menggunakan mysql. dan untuk layout dari halaman login saya menggunakan bootstrap.

Langsung saja untuk tahapan pembuatan halaman admin suatu web pada codeigniter, simak tutorial tutorial berikut :
  • Pembuatan View
    1. Buatlah sebuah file view di direktori application/views/ namai dan simpan view tersebut dengan nama template.php
    2. Masukan script di bawah ini kedalam file template.php lalu simpan
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
          <meta name="description" content="">
          <meta name="author" content="">
          <link rel="icon" href="../../favicon.ico">
      
          <title><?php echo $web->nama_web; ?></title>
      
          <!-- Bootstrap core CSS -->
          <link href="<?php echo base_url('assets/css/bootstrap.min.css') ; ?>" rel="stylesheet">
      
          <!-- Custom styles for this template -->
          <link href="<?php echo base_url('assets/css/navbar-fixed-top.css') ; ?>" rel="stylesheet">
      
          <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
          <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
          <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
      
          <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
          <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
        </head>
      
        <body>
      
          <!-- Fixed navbar -->
          <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="<?php echo base_url('dashboard'); ?>"><?php echo $web->nama_web; ?></a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li class="<?php if ($this->uri->segment('1') == 'dashboard') {echo 'active';} ?>">
                    <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
                  </li>
                  <li class="<?php if ($this->uri->segment('1') == 'pendaftar') {echo 'active';} ?>">
                    <a href="<?php echo base_url('pendaftar'); ?>">Pendaftar</a>
                  </li>
                  <li><a href="<?php echo base_url('logout'); ?>">Logout</a></li>
                </ul>
              </div><!--/.nav-collapse -->
            </div>
          </nav>
      
          <div class="container">
      
            <!-- Main component for a primary marketing message or call to action -->
            <?php $this->load->view($konten); ?>
            <hr>
            <div class="footer">
              <a href="http://www.koderumit.com/" target="_blank">Kode Rumit</a> &copy; <?php echo $web->tahun_web; ?> 
            </div>
          </div> <!-- /container -->
      
      
          <!-- Bootstrap core JavaScript
          ================================================== -->
          <!-- Placed at the end of the document so the pages load faster -->
          <script src="<?php echo base_url('assets/js/jquery.min.js'); ?>">
          </script>
          <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>">
          </script>
          <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
          <script src="<?php echo base_url('assets/js/ie10-viewport-bug-workaround.js'); ?>">
          </script>
        </body>
      </html>
      
       
    3. Masukan script di bawah ini kedalam file konten.php lalu simpan
      <div class="jumbotron">
       <?php
       $id_login   = $this->session->userdata("id_user");
          $datalogin  = $this->db->get_where("tb_user", array('id_user'=> $id_login))->row();
       ?>
          <h2>Selamat Datang <?php echo $datalogin->nama; ?></h2>
          <p><?php echo $web->slogan_web; ?></p>
      </div>
      <div class="row">
       <div class="col-lg-4">
            <h3>Alamat</h3>
            <p><?php echo $web->alamat_web; ?></p>
          </div>
          <div class="col-lg-4">
            <h3>Kontak</h3>
            <p>Telepon : <?php echo $web->telp_web; ?> <br> Fax : <?php echo $web->fax_web; ?> <br> Email : <?php echo $web->email_web; ?></p>
         </div>
          <div class="col-lg-4">
            <h3>Tentang <?php echo $web->nama_web; ?></h3>
            <p><?php echo $web->deskripsi_web; ?></p>
          </div>
      </div> 
    1. Pembuatan Controller
      1. Buatlah sebuah file controller di direktori application/controllers/ namai dan simpan model tersebut dengan nama Dashboard.php 
      2. Masukan script di bawah ini kedalam file Dashboard.php lalu simpan
        <?php
        class Dashboard extends CI_Controller {
        
         public function __construct()
         {
          parent::__construct();
          $this->load->model('MLogin');
          if ($this->session->userdata('status') != 'login') {
           redirect(base_url('login'));
          }
         }
        
            public function index()
            {
             $data['konten'] = "konten";
             $data['web'] = $this->MWeb->tampil()->row();
             $id_login = $this->session->userdata("id_user");
             $data['login'] = $this->db->get_where("tb_user", array('id_user'=> $id_login))->row();
                $this->load->view('template', $data);
            }
        } 

      Baca juga artikel terkait :
      Demikian tutorial Pemembuatan Halaman Admin di Codeiniter jika anda mengalami kendala atau error anda bisa bertanya di kolom komentar. Semoga tutorial ini bermanfaat bagi anda yang sedang belajar pemrograman php khususnya Framework Codeigniter, dan apabila anda menyukai tutorial ini, silahkan untuk berlangganan artikel secara gratis dan anda dapat membagikan artikel ini di akun sosial media milik anda.

      6 comments

      1. Replies
        1. ada kok, coba baca tutorialnya di https://www.koderumit.com/2017/06/pembuatan-database-aplikasi-ppdb-online.html

          Delete
      2. Mantab sudah ane coba sampe tahap ini, semoga codingnya lancar

        ReplyDelete


      EmoticonEmoticon