Halaman Awal Dinamis di Codeiniter 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 )
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 Halaman Awal Dinamis di Codeiniter
-
- Buatlah sebuah file model di direktori application/models/ namai dan simpan model tersebut dengan nama MWeb.php
- 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'); } }
View Halaman Frontend Dinamis Codeiniter
-
-
- Buatlah sebuah file view di direktori application/views/ namai dan simpan view tersebut dengan nama template_public.php
- 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]><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fassets%2Fjs%2Fie8-responsive-file-warning.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fassets%2Fjs%2Fie-emulation-modes-warning.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.2%2Fhtml5shiv.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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="https://koderumit.com/" target="_blank">Kode Rumit</a> © <?php echo $web->tahun_web; ?> </div> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url('assets%2Fjs%2Fjquery.min.js')%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url('assets%2Fjs%2Fbootstrap.min.js')%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url('assets%2Fjs%2Fie10-viewport-bug-workaround.js')%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html> - Masukan script di bawah ini kedalam file konten_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]><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fassets%2Fjs%2Fie8-responsive-file-warning.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fassets%2Fjs%2Fie-emulation-modes-warning.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.2%2Fhtml5shiv.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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="https://koderumit.com/" target="_blank">Kode Rumit</a> © <?php echo $web->tahun_web; ?> </div> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url('assets%2Fjs%2Fjquery.min.js')%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url('assets%2Fjs%2Fbootstrap.min.js')%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%3C%3Fphp%20echo%20base_url('assets%2Fjs%2Fie10-viewport-bug-workaround.js')%3B%20%3F%3E%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html> -
Pembuatan Controller Halaman Awal Frontend di Codeiniter
-
-
- Buatlah sebuah file controller di direktori application/controllers/ namai dan simpan model tersebut dengan nama Beranda.php
- 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 :
- Pembuatan Database Aplikasi PPDB Online menggunakan MySQL di PhpMyAdmin
- Pembuatan Direktori Web Codeigniter di XAMPP
- Konfigurasi Koneksi Database MySQL dan Codeigniter
- Menghilangkan index.php pada Codeigniter
- Konfigurasi Base URL pada Codeigniter
- Membuat Assets Template Bootstrap pada Codeigniter
- Membuat Halaman Awal Dinamis di Codeiniter
- Membuat Halaman Register / Pendaftaran di Codeigniter
- Login Multi User Codeigniter
- Membuat Logout di Codeigniter
- Membuat Halaman Admin / Dashboard Codeigniter
- Membuat (CRUD) Create, Read, Update, Delete Data pada Codeigniter
- Membuat Alert Boostrap pada Codeigniter
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.
mau download program gimana?
untuk download silahkan bisa menghubungi admin di halaman berikut : http://www.koderumit.com/contact
eror sepertin ini apanya lagi yaa ???
Severity: Notice
Message: Undefined property: Beranda::$MWeb
Filename: controllers/Beranda.php
Line Number: 8
Backtrace:
File: C:xampphtdocsppdbapplicationcontrollersBeranda.php
Line: 8
Function: _error_handler
File: C:xampphtdocsppdbindex.php
Line: 315
Function: require_once
An uncaught Exception was encountered
Type: Error
Message: Call to a member function tampil() on null
Filename: C:xampphtdocsppdbapplicationcontrollersBeranda.php
Line Number: 8
Backtrace:
File: C:xampphtdocsppdbindex.php
Line: 315
Function: require_once
silahkan di cek lagi gan, mungkin ada script yang salah
gan, file "konten_public.php" ada dimana direktorinya
didalam application/views/
ini kyk'e error tdk bs load model MWeb. hrs ada $this->load->model('MWeb');