Monday, July 10, 2017

Membuat Halaman Awal Dinamis di Codeiniter

Halaman awal atau disebut halaman beranda merupakan halaman awal suatu web yang pertama kali ditampilkan oleh suatu web site, halaman awal ini bisa saja memuat informasi suatu web sehingga ketika pengunjung masuk ke web tersebut dapat mendapatkan suatu informasi.

Untuk mendesign sebuah halaman awal pada Aplikasi PPDB Online ini saya gunakan Framework Bootstrap dan Framework Codeigniter dengan Database MYSQL.

Tutorial ini merupakan tutorial berkelanjutan, untuk melihat daftar isi silahkan baca artikel : Tutorial Pembuatan Apliakasi PPDB Online Berbasis Web Lihat Artikel )
Membuat Halaman Awal Dinamis di Codeiniter
Membuat Halaman Awal Dinamis di Codeiniter

Dalam pembuatan halaman awal / beranda menggunakan codeigniter nantinya kita akan menggunakan sebuah model, view dan controller.
ketiga cara itu sering kita kenal dengan nam MVC yakni Model-View-Controller, fitur ini tersedia di framework codeigniter

Langsung saja untuk tahapan pembuatan halaman awal suatu web pada codeigniter, simak tutorial tutorial berikut :

  • Pembuatan Model
    1. Buatlah sebuah file model di direktori application/models/ namai dan simpan model tersebut dengan nama MWeb.php 
    2. Masukan script di bawah ini kedalam file MWeb.php lalu simpan
       <?php
      defined('BASEPATH') OR exit('No direct script access allowed');
      
      class MWeb extends CI_Model {
      
       public function tampil()
       {
        return $this->db->get('tb_web');
       } 
      
      } 
  • Pembuatan View
    1. Buatlah sebuah file view di direktori application/views/ namai dan simpan view tersebut dengan nama template_public.php
    2. Masukan script di bawah ini kedalam file template_public.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 $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') == 'beranda') {echo 'active';} ?>">
                    <a href="<?php echo base_url('beranda'); ?>">Beranda</a>
                  </li>
                  <li class="<?php if ($this->uri->segment('1') == 'daftar') {echo 'active';} ?>">
                    <a href="<?php echo base_url('daftar'); ?>">Daftar</a>
                  </li>
                  <li><a href="<?php echo base_url('login'); ?>">Login</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_public); ?>
      
            <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_public.php lalu simpan
      <div class="jumbotron">
       <img src="<?php echo base_url('assets/image/Aplikasi PPDB Online.png'); ?>" width="100%" alt="<?php echo $web->nama_web; ?> - <?php echo $web->slogan_web; ?>">
          <h2>Selamat Datang di Aplikasi <?php echo $web->nama_web; ?></h2>
          <p><?php echo $web->slogan_web; ?></p>
      </div>
      <div class="row">
       <div class="col-lg-4">
            <h2>Alamat</h2>
            <p><?php echo $web->alamat_web; ?></p>
          </div>
          <div class="col-lg-4">
            <h2>Kontak</h2>
            <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">
            <h2>Tentang <?php echo $web->nama_web; ?></h2>
            <p><?php echo $web->deskripsi_web; ?></p>
          </div>
      </div> 
  • Pembuatan Controller
    1. Buatlah sebuah file controller di direktori application/controllers/ namai dan simpan model tersebut dengan nama Beranda.php 
    2. Masukan script di bawah ini kedalam file Beranda.php lalu simpan
      <?php
      defined('BASEPATH') OR exit('No direct script access allowed');
      
      class Beranda extends CI_Controller {
      
       public function index()
       {
        $data['web'] = $this->MWeb->tampil()->row();
        $data['konten_public'] = "konten_public";
        $this->load->view('template_public', $data);
       }
      
      } 

Baca juga artikel terkait :
Demikian tutorial Pemembuatan Halaman Awal Dinamis 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. mau download program gimana?

    ReplyDelete
    Replies
    1. untuk download silahkan bisa menghubungi admin di halaman berikut : http://www.koderumit.com/p/contact.html

      Delete
  2. eror sepertin ini apanya lagi yaa ???





    Severity: Notice

    Message: Undefined property: Beranda::$MWeb

    Filename: controllers/Beranda.php

    Line Number: 8

    Backtrace:

    File: C:\xampp\htdocs\ppdb\application\controllers\Beranda.php
    Line: 8
    Function: _error_handler

    File: C:\xampp\htdocs\ppdb\index.php
    Line: 315
    Function: require_once
    An uncaught Exception was encountered

    Type: Error

    Message: Call to a member function tampil() on null

    Filename: C:\xampp\htdocs\ppdb\application\controllers\Beranda.php

    Line Number: 8

    Backtrace:

    File: C:\xampp\htdocs\ppdb\index.php
    Line: 315
    Function: require_once

    ReplyDelete
    Replies
    1. silahkan di cek lagi gan, mungkin ada script yang salah

      Delete
  3. gan, file "konten_public.php" ada dimana direktorinya

    ReplyDelete


EmoticonEmoticon