Modul Pemrograman WEB 2 (TM5)

MODUL PERKULIAHAN
Pemrograman Web 2
Mengetahui dan memahami Konsep

MVC: View
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
05
Fakultas Ilmu Teknik Informatika W151700013 Wawan Gunawan, S.Kom., M.T.
Komputer
Abstract Kompetensi
Membuat halaman HTML sederhana Mahasiswa mampu membuat halaman
sederhana dengan berbagai macam
tag
Pembahasan
View digunakan hanya untuk menampilkan halaman web atau fragmen halaman, seperti
header, footer, sidebar, dan lain-lain. View tidak pernah ditampilkan secara langsung namun
harus melalui controller. Ingat bahwa dalam kerangka MVC, controller berperan sebagai
polisi sehingga bertanggung jawab untuk menampilkan view tertentu.
Membuat View
Buatlah program dengan script di bawah ini untuk menampilkan view bernama hello.php
<!DOCTYPE html>
<html>
<head>
<title>Hallo World</title>
</head>
<body>
<p>View pertama saya</p>
</body>
</html>
Kemudian simpan file tersebut dalam folder application/views/
Loading View
Untuk memuat file view tertentu dapat menggunakan fungsi sebagai berikut $this-
>load->view('hello');
Selanjutnya kita buka file controller yang kita buat sebelumnya pada file hello.php lalu ubah
script menjadi seperti di bawah ini
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Hello extends CI_Controller {

public function index()
{
$this->load->view('hello');
}
2019 Pemrograman Web 2

2 Wawan Gunawan, S.Kom., M.T.
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
Lalu jalankan URL seperti http://localhost/PW2/ sehingga akan tampil seperti gambar di
bawah ini
Gambar III.1 Tampilan view pertama
Menambahkan Dynamic Data ke View
Data yang akan ditampilkan ke views melalui controllers dengan cara array dalam parameter
dapat dilakukan seperti script di bawah ini. Selanjutnya kita ketikkan script di bawah ini pada
text editor dan simpan file tersebut dengan nama file layout.php pada folder
application\controllers\
class Layout extends CI_Controller {

{
$data = array(
'title' => "Hallo World",
'pos' => "Posting",
'message' => "Pesan saya adalah"
);
$this->load->view('layout',$data);
}

atau
class Layout extends CI_Controller {

{
$data['title']= "Hallo World";
$data['pos']= "Posting";
$data['message']="Pesan saya adalah";
$this->load->view('layout',$data);
}
Selanjutnya kita tambahkan file view dengan nama layout.php pada application/views/ untuk
memanggil data dari controller seperti script di bawah ini
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
</head>
<body>
<?php
echo $pos;
echo $message;
?>
</body>
</html>
Sebelum kita jalankan hasil script tersebut, maka kita harus melakukan perubahan data pada
application/config/routes.php seperti berikut ini
| Examples: my-controller/index -> my_controller/index

| my-controller/my-method -> my_controller/my_method
*/
$route['default_controller'] = 'layout';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Kemudian buka halaman tersebut dengan menjalankan URL seperti berikut
http://localhost/PW2/ dan akan tampil hasil seperti gambar di bawah ini
Gambar III.2 Tampilan view mengambil data dari controller
Membuat Loops
Kita dapat melakukan array multi-dimensi yang dapat diulang (loops) beberapa baris. Sebagai
contoh jika kita menggunakan database, maka untuk menampilkan datanya dapat
menggunakan array multi-dimensi. Berikut adalah contoh sederhana untuk array multi-
dimensi.
Buat controllers dengan nama looping.php dan simpan pada application\controllers\ dengan
script seperti di bawah ini
class Looping extends CI_Controller {

{
$data['title']= "Hallo World";
$data['nama_buah']= array("Semangka","Mangga","Jeruk","Melon");
$data['message']="Pesan saya adalah";
$this->load->view('looping',$data);
}

Berikutnya kita buat file untuk views dengan nama file looping.php simpan pada
application/views/ dengan script seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
</head>
<body>
<?php
foreach ($nama_buah as $buah) {
echo $buah."<br>";
}
echo $message." ".$buah;
?>
</body>
</html>
Sebelum kita jalankan hasil script tersebut, maka kita harus melakukan perubahan data pada
application/config/routes.php seperti berikut ini
| Examples: my-controller/index -> my_controller/index

| my-controller/my-method -> my_controller/my_method
*/
$route['default_controller'] = 'looping';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
Kemudian buka halaman tersebut dengan menjalankan URL seperti berikut

http://localhost/PW2/ dan akan tampil hasil seperti gambar di bawah ini
Gambar III.3 Tampilan data dari controller menggunakan loops array

Berikut ini aturan yang dapat digunakan untuk merancang view.
1) View harus berisi kode kode yang bersifat presentasional, biasanya berupa kode
HTML. View juga dapat berisi perintah perintah PHP sederhana yang masih berkaitan
dengan proses pembuatan tampilna, misalnya untuk menampilkan data yang dihasilkan
oleh model tertentu.
2) View seharusnya tidak berisi kode PHP yang melakukan akses data secara
langsung ke database. Pekerjaan semacam ini sebaiknya dilakukan oleh model.
3) View seharunsnya menghindari kode PHP yang mengakses secara langsung
permintaan dari user (tidak berisi $_GET maupun $_POST). Tugas ini sebaiknya
didelegasikan ke controller
Membuat Layout untuk aplikasi
Implementasi yang akan kita gunakan menggunakan template ace-master yang dapat diunduh pada
laman https://github.com/bopoda/ace dan template tersebut telah menggunakan bootsrap.
Pembahasan ini kita akan mencoba membuat tampilan utama dalam aplikasi. Tampilan ini
berupa bagaimana mempersiapkan lokasi untuk menampilkan header, footer, sidebar, dan
juga content dari aplikasi. Rancangan pada layout ini dapat dijabarkan sebagai berikut:
1. Header digunakan untuk menampilkan logo perusahaan atau identitas perusahaan, dan
juga untuk menampilkan siapa yang sedang aktif pada aplikasi bisnis tersebut dan juga
tautan untuk keluar dari aplikasi (logout).
2. Footer digunakan untuk menampilkan siapa pemilik dari aplikasi bisnis yang akan kita
kembangkan termasuk kapan kepemilikan dari aplikasi bisnis tersebut.
3. Sidebar untuk sisi kiri digunakan untuk mempersiapkan menu-menu apa saja yang ada
pada aplikasi bisnis yang akan kita kembangkan, termasuk akan kita persipkan untuk hak
akses dari aplikasi bisnis tersebut.
4. Sidebar untuk sisi kanan kita siapkan untuk tampilan form dari menu yang kita pilih
4.1. Controller Layout

Setelah pembahasan di atas, selanjutnya kita akan persiapkan pembuatan program dengan
nama file layout.php pada lokasi application/controller/ sesuai dengan
$route['default_controller'] yang sebelumnya sudah kita persiapkan. File layout.php
tersebut yang akan dieksekusi kali pertama ketika aplikasi dijalankan. Pastikan nama file

yang kita buat sama dengan nama class yang terdapat di dalam file tersebut, seperti yang
terlihat dalam gambar.
<?php if(! defined('BASEPATH'))exit('No direct script access allowed');
class layout extends CI_Controller {

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

{
$this->load->view('layout');
}
}
Keterangan script:
a. Script class layout extends CI_Controller {merupakan nama class

layout yang diambil dari nama file layout.php
b. Pada function index() terdapat$this->load->view('layout');yang akan
melakukan eksekusi file layout.php pada folder application\views yang merupakan
tampilan awal dari aplikasi.
4.2. Views Layout

Setelah file layout.php pada controller selesai kita buat, selanjutnya kita buat untuk tampilan
program pada folder application/views/layout.php dengan tampilan yang akan kita buat
seperti pada gambar di bawah ini
Gambar IV.4 Tampilan layout yang diharapkan

Untuk membuat tampilan seperti gambar di atas, maka kita akan membuat script seperti di
bawah ini dan simpan pada folder views dengan nama layout.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pemrograman Web 2</title>
<link rel="stylesheet" type="text/css" href="<?php echo

base_url('assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/font-
awesome/4.5.0/css/font-awesome.min.css');?>">
base_url('assets/css/fonts.googleapis.com.css');?>">
base_url('assets/css/ace.min.css');?>" class="ace-main-stylesheet" id="main-ace-
style" />
base_url('assets/css/ace-skins.min.css');?>">
base_url('assets/css/ace-rtl.min.css');?>">
<script type="text/javascript" src="<?php echo base_url('assets/js/ace-
extra.min.jss');?>"></script>
</head>
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state">
<div class="navbar-container ace-save-state" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left"
id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">

<a href="" class="navbar-brand">
<small>
<i class="fa fa-leaf"></i>
Ace Admin
</small>
</a>
</div>
<div class="navbar-buttons navbar-header pull-right"

role="navigation">
<ul class="nav ace-nav">
<li class="light-blue dropdown-modal">
<a data-toggle="dropdown" href="#" class="dropdown-
toggle">
<img class="nav-user-photo" src="<?php echo
base_url('assets/images/avatars/user.jpg'); ?>" alt="Jason's Photo" />
<span class="user-info">
<small>Selamat datang,</small>
Admin
</span>
<i class="ace-icon fa fa-caret-down"></i>

</a>
<ul class="user-menu dropdown-menu-right dropdown-menu

dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="#">
<i class="ace-icon fa fa-cog"></i>
Ubah Password
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<i class="ace-icon fa fa-power-off"></i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-container ace-save-state" id="main-container">

<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div id="sidebar" class="sidebar responsive

ace-save-state">
try{ace.settings.loadState('sidebar')}catch(e){}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">

<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-
large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">

<i class="ace-icon fa fa-pencil"></i>
</button>
<button class="btn btn-warning">

<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">

<i class="ace-icon fa fa-cogs"></i>
</button>
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">

<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>

</div>
</div>
<ul class="nav nav-list">

<li class="active">
<a href="#">

<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> Dashboard </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
Menu 1
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<ul class="submenu">
<li class="">
<a href="#">
<i class="menu-icon fa fa-caret-right"></i>
Sub Menu 1.1
</a>
</li>
<li class="">
<a href="#">
Sub Menu 1.2
</a>
</li>
</ul>
</li>
<li class="">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> Menu 2 </span>
</a>
<li class="">
<a href="#">
Sub Menu 2.1
</a>
</li>
<li class="">
<a href="#">
Sub Menu 2.2
</a>
</li>
</ul>
</li>
<li class="">
<i class="menu-icon fa fa-pencil-square-o"></i>
<span class="menu-text"> Menu 3 </span>
</a>

<li class="">
<a href="#">
Sub Menu 3.1
</a>
</li>
<li class="">
<a href="#">
Sub Menu 3.2
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">Home</a>
</li>
<li class="active">Dashboard</li>
</ul>
</div>
<div class="page-content">
<div class="page-header">
<h1>
Dashboard
<small>
<i class="ace-icon fa fa-angle-double-
right"></i>
overview & stats
</small>
</h1>
</div>
<div class="row">
<div class="col-xs-12">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-
dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
Selamat datang
<strong class="green">
<b>Admin</b>
</strong>,<br><br>
Berusaha dan berdoa
</div>
<div class="widget-header widget-header-flat
widget-header-small">
<h5 class="widget-title">
<i class="ace-icon fa fa-signal"></i>
Kelola Halaman Web
</h5>
</div>
<br>
<div class="widget-body">
<div class="infobox infobox-green ">
<div class="infobox-icon">

<i class="ace-icon fa fa-
comments"></i>
</div>
<div class="infobox-data">
<span class="infobox-data-
number">0</span>
<div class="infobox-
content">Komentar
+
<span class="label label-info
arrowed-right arrowed-in">New</span>
</div>
</div>
<div class="stat stat-
success">4</div>
</div>
<div class="infobox infobox-red">
<i class="ace-icon fa fa-flask"></i>
</div>
number">0</span>
content">Testimoni
+
<span class="label label-info
arrowed-right arrowed-in">New</span>
</div>
</div>
<div class="stat stat-
success">5</div>
</div>
<div class="infobox infobox-orange2">
download"></i>
</div>
number">100</span>
content"><i>pageviews</i></div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-inner">
<div class="footer-content">
<span class="bigger-120">
<span class="blue bolder">Wawan Gunawan, S.Kom.,
M.T.</span>
Application © 2018
</span>

<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-twitter-square light-blue
bigger-150"></i>
</a>

<a href="#">
<i class="ace-icon fa fa-facebook-square text-
primary bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-rss-square orange bigger-
150"></i>
</a>
</span>
</div>
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-

inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div>
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-

2.1.4.min.js');?>"></script>
if('ontouchstart' in document.documentElement) document.write("<script
src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript" src="<?php echo
base_url('assets/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-

ui.custom.min.js');?>"></script>
base_url('assets/js/jquery.ui.touch-punch.min.js');?>"></script>
base_url('assets/js/jquery.easypiechart.min.js');?>"></script>
base_url('assets/js/jquery.sparkline.index.min.js');?>"></script>
base_url('assets/js/jquery.flot.min.js');?>"></script>
base_url('assets/js/jquery.flot.pie.min.js');?>"></script>
base_url('assets/js/jquery.flot.resize.min.js');?>"></script>


<script type="text/javascript" src="<?php echo base_url('assets/js/ace-
elements.min.js');?>"></script>
base_url('assets/js/ace.min.js');?>"></script>
</body>
</html>
Pada script di atas, pembuatan header, footer, sidebar, dan content dilakukan pada file yang
sama. Kondisi tersebut akan sangat memberatkan programmer jika aplikasi bisnis yang
dikembangkan memiliki banyak menu. Oleh karena itu untuk mempermudah dalam
pembuatan program, maka kita lakukan pembuatan header, footer, sidebar, dan content

dengan metode MVC dengan melakukan perubahan script yang telah dibuat di atas seperti
pada ilustrasi di bawah ini.
File header.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pemrograman Web 2</title>

base_url('assets/css/bootstrap.min.css');?>">
base_url('assets/font-awesome/4.5.0/css/font-awesome.min.css');?>">
base_url('assets/css/fonts.googleapis.com.css');?>">
base_url('assets/css/ace.min.css');?>" class="ace-main-stylesheet" id="main-
ace-style" />
base_url('assets/css/ace-skins.min.css');?>">
base_url('assets/css/ace-rtl.min.css');?>">
base_url('assets/js/ace-extra.min.jss');?>"></script>
</head>
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-
state">
<div class="navbar-container ace-save-state" id="navbar-
container">
<button type="button" class="navbar-toggle menu-
toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
</button>
<div class="navbar-header pull-left">

<a href="" class="navbar-brand">
<small>
<i class="fa fa-leaf"></i>
Ace Admin
</small>
</a>
</div>
<div class="navbar-buttons navbar-header pull-right"

role="navigation">
<ul class="nav ace-nav">
<li class="light-blue dropdown-modal">
<a data-toggle="dropdown" href="#"

class="dropdown-toggle">
<img class="nav-user-photo"
src="<?php echo base_url('assets/images/avatars/user.jpg'); ?>" alt="Jason's
Photo" />
<span class="user-info">
<small>Selamat
datang,</small>
Admin
</span>

caret-down"></i>
</a>
<ul class="user-menu dropdown-

menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="#">
<i class="ace-
icon fa fa-cog"></i>
Ubah Password
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<i class="ace-
icon fa fa-power-off"></i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
File footer.php
<div class="footer">
<div class="footer-inner">
<div class="footer-content">
<span class="bigger-120">
<span class="blue bolder">Wawan
Gunawan, S.Kom., M.T.</span>
Application © 2018
</span>

<span class="action-buttons">
<a href="#">
twitter-square light-blue bigger-150"></i>
</a>

<a href="#">
facebook-square text-primary bigger-150"></i>
</a>
<a href="#">
rss-square orange bigger-150"></i>
</a>
</span>
</div>
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn

btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only
bigger-110"></i>
</a>
</div>

base_url('assets/js/jquery-2.1.4.min.js');?>"></script>
if('ontouchstart' in document.documentElement)
document.write("<script
src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
base_url('assets/js/bootstrap.min.js');?>"></script>

base_url('assets/js/jquery-ui.custom.min.js');?>"></script>
base_url('assets/js/jquery.ui.touch-punch.min.js');?>"></script>
base_url('assets/js/jquery.easypiechart.min.js');?>"></script>
base_url('assets/js/jquery.sparkline.index.min.js');?>"></script>
base_url('assets/js/jquery.flot.min.js');?>"></script>
base_url('assets/js/jquery.flot.pie.min.js');?>"></script>
base_url('assets/js/jquery.flot.resize.min.js');?>"></script>


base_url('assets/js/ace-elements.min.js');?>"></script>
base_url('assets/js/ace.min.js');?>"></script>
</body>
</html>
File menu.php

<div class="main-container ace-save-state" id="main-container">
try{ace.settings.loadState('main-
container')}catch(e){}
</script>
<div id="sidebar" class="sidebar responsive ace-save-

state">
try{ace.settings.loadState('sidebar')}catch(e)
{}
</script>
<div class="sidebar-shortcuts" id="sidebar-

shortcuts">
<div class="sidebar-shortcuts-large"
id="sidebar-shortcuts-large">
<button class="btn btn-success">
signal"></i>
</button>
<button class="btn btn-info">

pencil"></i>
</button>
<button class="btn btn-warning">

users"></i>
</button>
<button class="btn btn-danger">

cogs"></i>
</button>
</div>
<div class="sidebar-shortcuts-mini"
id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>

</div>
</div>
<ul class="nav nav-list">

<li class="active">
<a href="#">
<i class="menu-icon fa fa-
tachometer"></i>
<span class="menu-text"> Dashboard
</span>
</a>

</li>
<li class="">
desktop"></i>
<span class="menu-text">
Menu 1
</span>
<b class="arrow fa fa-angle-
down"></b>
</a>
<li class="">
<a href="#">
<i class="menu-icon fa
fa-caret-right"></i>
Sub Menu 1.1
</a>
</li>
<li class="">
<a href="#">
Sub Menu 1.2
</a>
</li>
</ul>
</li>
<li class="">
list"></i>
<span class="menu-text"> Menu 2
</span>
down"></b>
</a>
<li class="">
<a href="#">
Sub Menu 2.1
</a>
</li>
<li class="">
<a href="#">
Sub Menu 2.2
</a>
</li>

</ul>
</li>
<li class="">
<i class="menu-icon fa fa-pencil-
square-o"></i>
<span class="menu-text"> Menu 3
</span>
down"></b>
</a>
<li class="">
<a href="#">
Sub Menu 3.1
</a>
</li>
<li class="">
<a href="#">
Sub Menu 3.2
</a>
</li>
</ul>
</li>
</ul>
</div>
File home.php yang akan kita gunakan sebagi content dari web yang akan kita kembgnakan.
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state"
id="breadcrumbs">
<ul class="breadcrumb">
<li>
home home-icon"></i>
<a href="#">Home</a>
</li>
<li class="active">Dashboard</li>
</ul>
</div>
<div class="page-content">
<div class="page-header">
<h1>
Dashboard
<small>

<i class="ace-icon fa
fa-angle-double-right"></i>
overview & stats
</small>
</h1>
</div>
<div class="row">
<div class="col-xs-12">
<div class="alert
alert-block alert-info">
<button
type="button" class="close" data-dismiss="alert">
<i
class="ace-icon fa fa-times"></i>
</button>
<i class="ace-
icon fa fa-check green"></i>
Selamat datang
<strong
class="green">
<b>Admin</b>
</strong>,<br><br>
Berusaha dan
berdoa
</div>
<div class="widget-
header widget-header-flat widget-header-small">
<h5
class="widget-title">
<i
class="ace-icon fa fa-signal"></i>
Kelola
Halaman Web
</h5>
</div>
<br>
<div class="widget-
body">
<div
class="infobox infobox-green ">
<div
class="infobox-icon">
<i
class="ace-icon fa fa-comments"></i>
</div>
<div
class="infobox-data">
<span class="infobox-data-number">0</span>
<div
class="infobox-content">Komentar
+
<span class="label label-info arrowed-right arrowed-in">New</span>
</div>
</div>
<div

class="stat stat-success">4</div>
</div>
<div
class="infobox infobox-red">
<div
<i
class="ace-icon fa fa-flask"></i>
</div>
<div
<div
class="infobox-content">Testimoni
+
<span class="label label-info arrowed-right arrowed-in">New</span>
</div>
</div>
<div
class="stat stat-success">5</div>
</div>
<div
class="infobox infobox-orange2">
<div
<i
class="ace-icon fa fa-download"></i>
</div>
<div
<div
class="infobox-content"><i>pageviews</i></div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
setelah pembuatan script selesai kita lakukan, selanjutnya kita harus melakukan perubahan
pada file layout.php yang ada pada folder controller seperti script di bawah ini.

<?php if(! defined('BASEPATH'))exit('No direct script access allowed');
class layout extends CI_Controller {

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

{
$this->load->view('header');
$this->load->view('menu');
$this->load->view('home');
$this->load->view('footer');
}
}
Selanjutnya jalankan aplikasi sederhana kita sehingga akan dihasilkan tampilan awal seperti
gambar di bawah ini

TUGAS INDIVIDU
1. Buatlah pecahan file layout.php menjadi file header.php, footer.php, menu.php dan home.php
2. Ubahlah nama Admin menjadi nama dan NIM anda, seperti pada tampilan di bawah ini
3. Buatlah langkah-langkah pembuatan file-file tersebut (header.php, footer.php, menu.php, dan

home.php) beserta cara baca dari layout.php yang terdapat pada folder controller.
4. Screenshot hasil kerja Anda lalu kirimkan melalui email wawan.gunawan@mercubuana.ac.id
paling lambat 5 hari setelah materi ini disampaikan.
Catatan: Untuk kelengkapan aplikasi yang akan dilakukan pemecahan dapat diunduh pada URL:
http://www.wawangunawan.web.id/download-22-Download dengan keterangan File ini merupakan
kelengkapan dari modul pertemuan 5

Daftar Pustaka
Bahra. 2005. Analisis dan Desain Sistem Informasi. Tangerang: Graha Ilmu.
Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming. Yogyakarta:
Andi Yogyakarta.
Hakim, Rachmad dan Sutarto . 2009. Konsep Pemrograman Java dan Penerapannya untuk
Membuat Software Aplikasi. Jakarta: Elex Media Komputindo.
Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan
Praktek Aplikasi Bisnis. Yogyakarta: Andi Yogyakarta.

Modul Pemrograman WEB 2 (TM5)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pemrograman WEB 2 (TM5)

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PERKULIAHAN

Mengetahui dan memahami Konsep

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

<p>View pertama saya</p>

Kemudian simpan file tersebut dalam folder application/views/

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Hello extends CI_Controller {

2019 Pemrograman Web 2

Gambar III.1 Tampilan view pertama

Menambahkan Dynamic Data ke View

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Layout extends CI_Controller {

public function index()

2019 Pemrograman Web 2

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Layout extends CI_Controller {

public function index()

| Examples: my-controller/index -> my_controller/index

2019 Pemrograman Web 2

Gambar III.2 Tampilan view mengambil data dari controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Looping extends CI_Controller {

public function index()

2019 Pemrograman Web 2

| Examples: my-controller/index -> my_controller/index

Kemudian buka halaman tersebut dengan menjalankan URL seperti berikut

Gambar III.3 Tampilan data dari controller menggunakan loops array

2019 Pemrograman Web 2

Membuat Layout untuk aplikasi

4.1. Controller Layout

2019 Pemrograman Web 2

<?php if(! defined('BASEPATH'))exit('No direct script access allowed');

class layout extends CI_Controller {

public function index()

a. Script class layout extends CI_Controller {merupakan nama class

4.2. Views Layout

Gambar IV.4 Tampilan layout yang diharapkan

2019 Pemrograman Web 2

<link rel="stylesheet" type="text/css" href="<?php echo

<div class="navbar-header pull-left">

<div class="navbar-buttons navbar-header pull-right"

<i class="ace-icon fa fa-caret-down"></i>

<ul class="user-menu dropdown-menu-right dropdown-menu

2019 Pemrograman Web 2

<div class="main-container ace-save-state" id="main-container">

<div id="sidebar" class="sidebar responsive

<div class="sidebar-shortcuts" id="sidebar-shortcuts">

<button class="btn btn-info">

<button class="btn btn-warning">

<button class="btn btn-danger">

<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">

<span class="btn btn-info"></span>

<span class="btn btn-warning"></span>

<span class="btn btn-danger"></span>

<ul class="nav nav-list">

2019 Pemrograman Web 2

2019 Pemrograman Web 2

2019 Pemrograman Web 2

2019 Pemrograman Web 2

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-

<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-

<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-