Comparing Linux OS Image Update Models - EOSS 2024.pdf
Modul praktikum Pemrograman Frontend dengan Code Igniter dan Bootstrap
1. MODUL PRAKTIKUM PEMROGRAMAN WEB
1
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
1 XAMPP WEB SERVER
Xampp : Adalah salah satu paket aplikasi webserver yang dapat digunakan untuk keperluan
membuat webserver pada komputer lokal, aplikasi yang termasuk didalam paketnya yaitu :
apache web server, php server, mysql server dan lainya.
Download
http://sourceforge.net/projects/xampp/
1.1 INSTALASI XAMPP WEB SERVER :
1. Unzip hasil download di drive C:
2. Jalankan “setup_xampp.bat” di direktori xampp.
3. Jalankan “xampp-control.exe”.
1.2 SETUP XAMPP
1. Buka file xamppphpphp.ini
2. Hilangkan tanda ; pada baris-baris dibawah ini untuk mengaktifkan fitur
• error_reporting = E_ALL | E_NOTICE
• extension=php_mysql.dll
• extension=php_mysqli.dll
• memory_limit = 128M
• display_errors = On
• post_max_size = 200M
3. Buka file xamppapacheconfhttpd.conf
4. Hilangkan tanda # pada baris-baris dibawah ini untuk mengaktifkan fitur
2. MODUL PRAKTIKUM PEMROGRAMAN WEB
2
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
• ServerRoot "C:/xampp-win32-1.8.2-4-VC9/xampp/apache"
• Listen 80
• LoadModule rewrite_module modules/mod_rewrite.so
• LoadModule ssl_module modules/mod_ssl.so
• ServerName localhost:80
• DocumentRoot "C:/xampp-win32-1.8.2-4-VC9/xampp/htdocs"
5. Start PHP dan MYSQL server pada “ xampp-control.exe”
6. Buat folder “praktikum” pada “xampphtdocs”
7. Taruh semua file web di direktori “praktikum”
2 PENGENALAN HTML
Source :
www.w3schools.com/html/
2.1 STRUKTUR UTAMA :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</body>
</html>
3. MODUL PRAKTIKUM PEMROGRAMAN WEB
3
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
2.2 CONTOH LOYOUT DENGAN HTML :
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
6. MODUL PRAKTIKUM PEMROGRAMAN WEB
6
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
3 PENGENALAN CSS
Apakah itu CSS ?
• CSS stands for Cascading Style Sheets
• CSS defines how HTML elements are to be displayed
• Styles were added to HTML 4.0 to solve a problem
• CSS saves a lot of work
• External Style Sheets are stored in CSS files
Source :
http://www.w3schools.com/css/
3.1 STRUKTUR UTAMA CSS
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
7. MODUL PRAKTIKUM PEMROGRAMAN WEB
7
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
3.2 CARA MEMANGGIL FILE CSS DALAM HTML
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3.3 CONTOH KODE CSS DASAR
1. Contoh 1
body {
background-color: lightblue;
}
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
2. Contoh 2
h1 {
background-color: #6495ed;
8. MODUL PRAKTIKUM PEMROGRAMAN WEB
8
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
3. Contoh 3
body {
background-image: url("bgdesert.jpg");
}
4. Navigation bar
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
ul {
list-style-type: none;
margin: 0;
9. MODUL PRAKTIKUM PEMROGRAMAN WEB
9
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
padding: 0;
}
li {
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
}
4 PENGENALAN PHP
Apa itu PHP :
PHP is a server scripting language, and a powerful tool for making dynamic and
interactive Web pages.
PHP is a widely-used, free, and efficient alternative to competitors such as
Microsoft's ASP.
Source :
http://www.w3schools.com/php
10. MODUL PRAKTIKUM PEMROGRAMAN WEB
10
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
4.1 PENERAPAN PHP DALAM KODE HTML
<!DOCTYPE html>
<html>
<body>
<?php
$ = 5;
$y = 4;
echo $x + $y;
Echo “ini tampil ke layar”;
Echo “Ini tampil ke layar ”.$x+$y. ”dan nilai ini”;
?>
</body>
</html>
4.2 CONTOH –CONTOH SCRIPT PHP
1. Contoh 1
<!DOCTYPE html>
<html>
<body>
<?php
$color = "red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>
11. MODUL PRAKTIKUM PEMROGRAMAN WEB
11
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
</body>
</html>
2. Contoh 2
$x = 5;
$y = 4;
echo $x + $y;
Echo “”;
3. Contoh 3
<?php
$x = 5;
$y = 10;
function myTest()
{
global $x, $y;
$y = $x + $y;
}
myTest();
echo $y; // outputs 15
?>
5 PENGENALAN MYSQL
Adalah :
SQL is a standard language for accessing databases.
12. MODUL PRAKTIKUM PEMROGRAMAN WEB
12
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
Our SQL tutorial will teach you how to use SQL to access and manipulate data
in: MySQL, SQL Server, Access, Oracle, Sybase, DB2, and other database
systems.
Cara mengakses SQL Admin :
http://Localhost/phpmyadmin
Contoh 1. Tabel Mahasiswa
No NPM Nama Prodi_id Email Timestamp
Contoh 2. Table Prodi
Id nama Timestamp
1 Teknik Industri
2 Teknik Informatika
Contoh 3. Menampilkan npm dan nama
No NPM Nama
Contoh 4. Menampilkan nama mahasiswa dan jurusan
no nama Jurusan
1
2
Contoh 5. Menampilkan nama mahasiswa yg prodinya Teknik Informatika
13. MODUL PRAKTIKUM PEMROGRAMAN WEB
13
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
No NPM Nama Jurusan
1 Teknik Informatika
2 Teknik Informatika
5.1 PHP DAN MYSQL
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT title,content FROM berita";
$result = $conn->query($sql);
$x=1;
if ($result->num_rows > 0) {
echo "<table border=1px><tr><th>no</th><th>Judul</th><th>Isi</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$x."</td><td>".$row["title"]."</td>
<td>".$row["content"]."</td></tr>";
$x=$x+1;
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
14. MODUL PRAKTIKUM PEMROGRAMAN WEB
14
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6 PENGENALAN CONTENT MANAGEMENT SYSTEM (CMS)
6.1 INSTALASI JOOMLA CMS
1. Copy joomla ke directory /xampp/htdocs/joomla
2. Unzip /extract joomla
3. Jalankan xampp server (xampp control panel.exe), pastikan apache dan mysql start warna
hijau
4. Buat database dengan nama sembarang (contoh : joomla) melalui phpmyadmin di
http://localhost/phpmyadmin
5. Panggil instalasi joomla http://localhost/joomla
15. MODUL PRAKTIKUM PEMROGRAMAN WEB
15
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
16. MODUL PRAKTIKUM PEMROGRAMAN WEB
16
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6.2 HALAMAN ADMIN
Halaman admin dapat diakses di http://localhost/joomla/administrator
Halaman web dapat diakses di http://localhost/joomla
6.3 PEMBUATAN MENU
Jika ingin membuat menu yang jika di klik menuju ke artikel tertentu, pilih konfigurasi seperti
digambar dibawah ini. Atau sesuaikan dengan yang diinginkan dengan memilih pada menu item
typeAdm
6.4 INSTALASI /KONFIGURASI TEMPLATE/THEME/STYLE
Untuk memilih template-template default yang telah disediakan joomla, klik menu extensions-
template manager. Klik default pada template yang diinginkan
Location Site : Template untuk halaman pengunjung
Location Administrator : Template untuk halaman admin
17. MODUL PRAKTIKUM PEMROGRAMAN WEB
17
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6.5 KONFIGURASI MODUL
Modul adalah fasilitas2 yang biasanya tampil di kanan dan kiri halaman web (contoh : modul
search, last article, last comment, tag dll).
Untuk mengaktifkan/menonaktifkan modul bisa diakses di menu Extensions-module manager
Klik New untuk menambahkan modul-modul default lainnya yang telah disediakan joomla
Jika modul yang diinginkan tidak tersedia, dapat di download di website joomla
http://extensions.joomla.org
18. MODUL PRAKTIKUM PEMROGRAMAN WEB
18
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6.6 KONFIGURASI PLUGIN
Plugin pada joomla mirip dengan modul yaitu script kecil yang berfungsi untuk melakukan
pekerjaan2 tambahan yang tidak tersedia pada joomla.
Perbedaan mendasar antara modul dan plugin yaitu, jika modul dapat dipindah2 posisi pada
tampilan web, sedang plugin tidak bisa, contoh (plugin konversi Bahasa, plugin tombol social
media pada setiap article, plugin text editor)
Jika plugin2 yang dibutuhkan tidak tersedia, silahkan download di website joomla
http://extensions.joomla.org
19. MODUL PRAKTIKUM PEMROGRAMAN WEB
19
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
7 MEMBANGUN APLIKASI WEB DENGAN PHP FRAMEWORK
7.1 CODE IGNITER FRAMEWORK
20. MODUL PRAKTIKUM PEMROGRAMAN WEB
20
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
7.2 INSTALL CODEIGNITER DASAR
1. Extract / Unzip CodeIgniter-3.0.0.zip ke dalam /xampp/htdocs/codeigniter.
2. Ubah setingan pada file /codeigniter/application/config/config.php baris 20
$config['base_url'] = 'http://localhost/codeigniter/';
3. Instalasi selesai, buka browser http://localhost/codeigniter
7.3 INSTALL CODEIGNITER LANJUTAN
1. Ubah setingan pada file /codeigniter/application/config/routes.php
• Baris 52 menjelaskan bahwa file pertama yang dipanggil ketika codeigniter
dijalankan yaitu ‘main.php’ pada folder controller
$route['default_controller'] = 'main';
2. Buat file main.php pada folder /codeigniter/application/controller/
• Function index adalah function pertama yang dipanggil ketika file home.php ini
dipanggil
• Baris 13 digunakan untuk memanggil file test.php, pada folder “view”
• Berkut isi file codeigniter/application/controller/main.php
21. MODUL PRAKTIKUM PEMROGRAMAN WEB
21
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<?php if (!defined('BASEPATH')) exit('Access Denied');
class Main extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->load->view('test'); //memanggil view test.php
}
}
3. Buat file test.php pada folder /codeigniter/application/view/ yang isinya adalah
modifikasi dari welcome.php:
7.4 MEMBUAT WEB SEDERHANA DENGAN CODEIGNITER
Skenario :
• Halaman web yang akan dibuat terdiri 5 menu : Home, Tentang Kuliah, Tentang Kerja,
About me, Contact
• Pada sub bab 7.4 ini semua tulisan/content pada tiap2 halaman bersifat statis yang ditulis
langsung pada html (bukan dari database).
• File CSS yang digunakan adalah file css pada praktikum2 sebelumnya dengan pembagian
tampilan menjadi 4 : Header, Menu kiri, Content, footer.
• Code-code CSS digabung dengan kode HTML pada file2 didalam folder view.
• MVC yang terlibat hanya Controller dan View.
22. MODUL PRAKTIKUM PEMROGRAMAN WEB
22
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
1. Membuat Controller
1. Buat file main.php pada direktori /codeigniter/application/controller.
2. Buat 5 file pada direktori /codeigniter/application/view.
home.php
kuliah.php
kerja.php
aboutme.php
contact.php
Isi file /codeigniter/application/controller/main.php adalah sebagai berikut :
<?php if (!defined('BASEPATH')) exit('Access Denied');
class Main extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->home();
}
public function home()
{
$this->load->view('home'); //memanggil view home.php
}
public function kuliah()
{
$this->load->view('kuliah'); //memanggil view kuliah.php
}
public function kerja()
{
$this->load->view('kerja'); //memanggil view kerja.php
}
public function aboutme()
{
$this->load->view('aboutme'); //memanggil view aboutme.php
}
public function contact()
{
$this->load->view('contact'); //memanggil view contact.php
}
24. MODUL PRAKTIKUM PEMROGRAMAN WEB
24
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
3. Hasil
7.5 WEB TEMPLATING DENGAN BOOTSTRAP DAN CODEIGNITER
Skenario :
• Halaman web yang akan dibuat terdiri 5 menu : Home, Tentang Kuliah, Tentang Kerja,
About me, Contact
• Pada sub bab 7.5 ini semua tulisan/content pada tiap2 halaman bersifat statis yang berasal
dari script php/html.
• Style/CSS yg digunakan berasal dari bootstrap (CSS Framework).
• MVC yang terlibat yaitu Controller dan View.
Ada 12 entitas yang terlibat dalam pembahasan sub bab ini, yaitu
• main.php (controller)
• template.php (libraries)
• home.php (view)
• kuliah.php (view)
• kerja.php (view)
• contactus.php (view)
• aboutme.php (view)
• header.php(view/isinya berasal dari bootstrap)
• content.php (view/isinya berasal dari bootstrap)
• footer.php (view/isinya berasal dari bootstrap)
• container.php (view/isinya berasal dari bootstrap)
25. MODUL PRAKTIKUM PEMROGRAMAN WEB
25
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
Langkah – langkah :
1. Buat file Main.php (Controller) pada
/xampp/htdocs/codeigniter/application/controller/main.php yg isinya sebagai berikut
<?php if (!defined('BASEPATH')) exit('Access Denied');
class Main extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->library('template');
}
public function index()
{
$this->home();
}
public function home()
{
$input=$this->template->home();
$this->load->view('container',$input,''); // Memanggil view home.php
}
public function kuliah()
{
$input=$this->template-> kuliah ();
$this->load->view('container',$input,''); // Memanggil view kuliah.php
}
public function kerja()
{
$input=$this->template-> kerja ();
$this->load->view('container',$input,''); // Memanggil view kerja.php
}
public function aboutme()
{
$input=$this->template-> aboutme ();
$this->load->view('container',$input,''); // Memanggil view aboutme.php
}
public function contact()
{
$input=$this->template-> contact ();
$this->load->view('container',$input,''); // Memanggil view contact.php
}
}
26. MODUL PRAKTIKUM PEMROGRAMAN WEB
26
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
2. Template.php (Library) dibawah ini berfungsi untuk menangani templating/style pada
website yang kita buat yang nantinya dikombinasikan dengan Bootstrap.
<?php if(!defined('BASEPATH')) exit('Access Denied');
class Template
{
public $CI;
public function __construct()
{
$this->CI=& get_instance();
$this->CI->load->helper('url');
$this->CI->load->view_data['base_url']=base_url();
}
public function index()
{
$this->home();
}
public function home(,$output=NULL)
{
//halaman utama
$data[‘base_url’]=base_url();
$data['page_title']='Halaman Utama';
$data['h1']='<h1>Selamat datang di websiteku</h1>';
$data['content']=$this->CI->load->view('home',’’,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function kuliah($output=NULL)
{
//halaman kuliah
$data[‘base_url’]=base_url();
$data['page_title']='Halaman Kuliah';
$data['content']=$this->CI->load->view('kuliah',’’,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function kerja($output=NULL)
{
//Halaman kerja
$data[‘base_url’]=base_url();
$data['page_title']='Halaman Kerja';
$data['content']=$this->CI->load->view('kerja',’’,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
27. MODUL PRAKTIKUM PEMROGRAMAN WEB
27
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function aboutme($output=NULL)
{
// halaman aboutme
$data[‘base_url’]=base_url();
$data['page_title']='Halaman Tentang Aku';
$data['content']=$this->CI->load->view('aboutme',’’,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function contactus($output=NULL)
{
//Halaman Contact Us
$data['page_title']='Halaman Kontak';
$data[‘base_url’]=base_url();
$data['content']=$this->CI->load->view('contactus',’’,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
}
3. Buat file container.php pada direktori /codeigniter/application/view/container.php yg
isinya seperti gambar dibawah ini
• File ini berfungsi sebagai file yg bertugas untuk menggabungkan 3 file
header.php, content.php serta footer.php menjadi satu tampilan website. Berikut
isi file container.php
<?php
echo $header;
echo $content;
echo $footer;
?>
4. Isikan kalimat bebas pada masing2 file /views/home.php , /views/kuliah.php,
/views/kerja.php, /views/contactus.php, /views/aboutme.php. Contohnya seperti dibawa
ini
<h1>Ini halaman Home</h1>
5. Extract contoh template shym.zip di direktori /xampp/htdocs/codeigniter/assets
28. MODUL PRAKTIKUM PEMROGRAMAN WEB
28
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6. Buka file index.html pada direktori /assets/index.html menggunakan browser, kemudian
buka source code nya dgn cara klik kanan halaman web pilih view page source (mozilla).
7. Copy baris 1-94 dari source code diatas, kemudian pastekan ke
/codeigniter/application/view/header.php.
8. Copy baris 95 sampai 582 dari source code diatas, kemudian pastekan ke
/codeigniter/application/view/content.php.
9. Copy sisanya, baris 583 sampai 693 dari source code diatas, kemudian pastekan ke
/codeigniter/application/view/footer.php.
10. Pada ketiga script diatas header.php, content.php, footer.php tambahkan “assets/” setelah
src=” dan src=’, (gunakan fitur find replace dengan cara memencet Ctrl+H, isi find
dengan src=’ isi replace dengan src=’assets’)
11. Tambahkan script dibawa ini pada baris 583 dibawah <div class="container">
<div class="container">
<?php echo $content;?>
12. Jika sudah benar maka hasil tampilannya sharusnya seperti dibawah ini :
13. Jika diperlukan hapus div-div, kalimat2 yang tidak diinginkan pada ketiga script diatas
yang merupakan bawaan template, shingga hanya menyisakan bagian2 yang diinginkan
saja.
31. MODUL PRAKTIKUM PEMROGRAMAN WEB
31
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
</div>
</header><!---->
<!-- HEADER ENDS HERE -->
<!--GALLERY STARTS HERE -->
<section class='gallery'>
<div class="home-caption">
<div class="home-title">ini halaman utama</div>
<div class="home-subtitle"> </div>
</div>
</section>
<!-- /GALLERY ENDS HERE -->
<!-- OPTION STARTS HERE-->
<section class='shym-option'>
<div class='container'>
<div class="row">
<div class="col-sm-4 shym-option-container">
<span data-scroll-reveal="wait 0.25s, then enter top and move
40px over 1s" ><i class="fa fa-camera"></i></span>
<h3 class="shym-text-uppercase"> Stylish Pictures</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia</p>
<a href="#" title="">Read More</a>
</div>
<div class="col-sm-4 shym-option-container">
<span data-scroll-reveal="wait 0.25s, then enter top and move
40px over 1s" ><i class="fa fa-dashboard"></i></span>
<h3 class="shym-text-uppercase">Magnificent Colors</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia</p>
<a href="#" title="">Read More</a>
</div>
<div class="col-sm-4 shym-option-container">
<span data-scroll-reveal="wait 0.25s, then enter top and move
40px over 1s"><i class="fa fa-eye"></i></span>
<h3 class="shym-text-uppercase">Retina Ready</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia</p>
<a href="#" title="">Read More</a>
</div>
</div>
<!-- /COLUMNS -->
32. MODUL PRAKTIKUM PEMROGRAMAN WEB
32
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
</div>
</section>
<!-- /OPTION ENDS HERE -->
<!--APPLICATION ENDS HERE -->
<section class='shym-application'>
<div class='container'>
<div class='row'>
<div class='col-xs-12 shym-application-data'>
<h2 class='shym-text-uppercase'>Perfect Application Support</h2>
</div>
</div>
<div class='row'>
<div class='col-xs-12 shym-application-data'>
<div class="apps">
<a href="#" data-scroll-reveal="wait 0.25s, then
enter left and move 40px over 1s"><i class="fa fa-android"></i></a>
<a href="#" data-scroll-
reveal="wait 0.25s, then enter right and move 40px over 1s"><i class="fa
fa-apple"></i></a>
<a href="#" data-scroll-
reveal="wait 0.25s, then enter bottom and move 40px over 1s"><i
class="fa fa-windows"></i></a>
<a href="#" data-scroll-
reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa
fa-css3"></i></a>
</div>
</div>
</div>
</div>
</section>
<!--/APPLICATION ENDS HERE-->
<!--FEATURE STARTS HERE-->
<section class='shym-feature'>
<div class='container'>
<div class='row'>
<div class='col-sm-4 shym-feature-data'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-support"></i></span>
</div>
<div class='col-xs-9'>
<h3>Support</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
33. MODUL PRAKTIKUM PEMROGRAMAN WEB
33
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<div class='col-sm-4 shym-feature-data'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-th"></i></span>
</div>
<div class='col-xs-9'>
<h3>Widgets</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
<div class='col-sm-4'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-laptop"></i></span>
</div>
<div class='col-xs-9'>
<h3>Responsive Design</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
</div>
<!----------------------------------------------------------------------
-------------------- -->
<div class='row'>
<div class='col-sm-4 shym-feature-data'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-bar-chart-o"></i></span>
</div>
<div class='col-xs-9'>
<h3>User Rating</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
<div class='col-sm-4 shym-feature-data'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-users"></i></span>
</div>
<div class='col-xs-9 '>
<h3>Top Users</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
34. MODUL PRAKTIKUM PEMROGRAMAN WEB
34
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<div class='col-sm-4 shym-feature-data'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-table"></i></span>
</div>
<div class='col-xs-9'>
<h3>Data Tables</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
</div>
<!----------------------------------------------------------------------
-------------------- -->
<div class='row'>
<div class='col-sm-4 shym-feature-data'>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-book"></i></span>
</div>
<div class='col-xs-9 '>
<h3>Top Readers</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
<div class='col-sm-4 shym-feature-data '>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-edit"></i></span>
</div>
<div class='col-xs-9'>
<h3>Top Authors</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
<div class='col-sm-4 shym-feature-data '>
<div class='col-xs-3 fe-icon'>
<span data-scroll-reveal="wait 0.25s, then enter top and move 40px over
1s" ><i class="fa fa-clock-o"></i></span>
</div>
<div class='col-xs-9'>
<h3>24h Support</h3>
35. MODUL PRAKTIKUM PEMROGRAMAN WEB
35
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has. </h3>
</div>
</div>
</div>
<!----------------------------------------------------------------------
-------------------- -->
</div>
</section>
<!--/FEATURE ENDS HERE -->
<!--SHYM-USER STARTS HERE -->
<section class='shym-user'>
<div class='container'>
<div class='shym-user-title' >
<h3 class='shym-text-center shym-text-uppercase'>Best
Pictures</h3>
<hr>
<p class='shym-text-center'>It is a long established fact that a
reader will be distracted by the readable content.</p>
</div>
<!--======= SLIDER PART =========-->
<div id="owl-team">
<!--======= SLIDER PART =========-->
<div class="team">
<div class="img"> <img class="img-responsive"
src="localhost/codeigniter2/assets/img/team-1.jpg" alt="" >
<div class="over">
<i class="fa fa-eye"></i>
<div class="des"> <a href="#"></a>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.</p>
</div>
</div>
</div>
<div class="info">
<h4>Lorum Ipsum</h4>
<p>Price:25$</p>
<hr>
<div class="social_icons">
<ul>
<li class="facebook"> <a href="#."><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#."><i class="fa fa-
twitter"></i> </a> </li>
36. MODUL PRAKTIKUM PEMROGRAMAN WEB
36
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<li class="dribbble"> <a href="#."><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#."><i class="fa fa-
google"></i> </a> </li>
<li class="linkedin"> <a href="#."><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#."><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
</div>
</div>
<!--======= SLIDER PART =========-->
<div class="team">
<div class="img"> <img class="img-responsive"
src="localhost/codeigniter2/assets/img/team-2.jpg" alt="" >
<div class="over">
<i class="fa fa-eye"></i>
<div class="des"> <a href="#"></a>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.</p>
</div>
</div>
</div>
<div class="info">
<h4>Lorum Ipsum</h4>
<p>Price:25$</p>
<hr>
<div class="social_icons">
<ul>
<li class="facebook"> <a href="#."><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#."><i class="fa fa-
twitter"></i> </a> </li>
<li class="dribbble"> <a href="#."><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#."><i class="fa fa-
google"></i> </a> </li>
<li class="linkedin"> <a href="#."><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#."><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
</div>
</div>
<!--======= SLIDER PART =========-->
<div class="team">
<div class="img"> <img class="img-responsive"
src="localhost/codeigniter2/assets/img/team-3.jpg" alt="" >
37. MODUL PRAKTIKUM PEMROGRAMAN WEB
37
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<div class="over">
<i class="fa fa-eye"></i>
<div class="des"> <a href="#"></a>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.</p>
</div>
</div>
</div>
<div class="info">
<h4>Lorum Ipsum</h4>
<p>Price:25$</p>
<hr>
<div class="social_icons">
<ul>
<li class="facebook"> <a href="#."><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#."><i class="fa fa-
twitter"></i> </a> </li>
<li class="dribbble"> <a href="#."><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#."><i class="fa fa-
google"></i> </a> </li>
<li class="linkedin"> <a href="#."><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#."><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
</div>
</div>
<!--======= SLIDER PART=========-->
<div class="team">
<div class="img"> <img class="img-responsive"
src="localhost/codeigniter2/assets/img/team-4.jpg" alt="" >
<div class="over">
<i class="fa fa-eye"></i>
<div class="des"> <a href="#"></a>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.</p>
</div>
</div>
</div>
<div class="info">
<h4>Lorum Ipsum</h4>
<p>Price:25$</p>
<hr>
<div class="social_icons">
<ul>
38. MODUL PRAKTIKUM PEMROGRAMAN WEB
38
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<li class="facebook"> <a href="#."><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#."><i class="fa fa-
twitter"></i> </a> </li>
<li class="dribbble"> <a href="#."><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#."><i class="fa fa-
google"></i> </a> </li>
<li class="linkedin"> <a href="#."><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#."><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
</div>
</div>
<!--======= SLIDER PART =========-->
<div class="team">
<div class="img"> <img class="img-responsive"
src="localhost/codeigniter2/assets/img/team-1.jpg" alt="" >
<div class="over">
<i class="fa fa-eye"></i>
<div class="des"> <a href="#"></a>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.</p>
</div>
</div>
</div>
<div class="info">
<h4>Lorum Ipsum</h4>
<p>Price:25$</p>
<hr>
<div class="social_icons">
<ul>
<li class="facebook"> <a href="#."><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#."><i class="fa fa-
twitter"></i> </a> </li>
<li class="dribbble"> <a href="#."><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#."><i class="fa fa-
google"></i> </a> </li>
<li class="linkedin"> <a href="#."><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#."><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
</div>
</div>
39. MODUL PRAKTIKUM PEMROGRAMAN WEB
39
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<!--======= SLIDER PART =========-->
<div class="team">
<div class="img"> <img class="img-responsive"
src="localhost/codeigniter2/assets/img/team-3.jpg" alt="" >
<div class="over">
<i class="fa fa-eye"></i>
<div class="des"> <a href="#"></a>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500 when an unknown printer.</p>
</div>
</div>
</div>
<div class="info">
<h4>Lorum Ipsum</h4>
<p>Price:25$</p>
<hr>
<div class="social_icons">
<ul>
<li class="facebook"> <a href="#."><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#."><i class="fa fa-
twitter"></i> </a> </li>
<li class="dribbble"> <a href="#."><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#."><i class="fa fa-
google"></i> </a> </li>
<li class="linkedin"> <a href="#."><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#."><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/SHYM -USER ENDS HERE -->
<!--PICTURE INFORMATION STARTS HERE-->
<section class='picture-information'>
<div class='container'>
<div class='row'>
<div class='col-md-12 shym-text-center'>
<h3 class='shym-text-uppercase'>picture Information</h3>
40. MODUL PRAKTIKUM PEMROGRAMAN WEB
40
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
</div>
<div class='gap'>
</div>
<div class='col-md-12 col-sm-12 col-xs-12'>
<div class='col-sm-3 '>
<div class='picture-info' data-scroll-reveal="wait 0.25s, then enter
right and move 40px over 1s">
<img src='localhost/codeigniter2/assets/img/item1.png'/>
<p>There are many variations of passages of Lorem Ipsum available, but
the majority.There are many variations of passages of Lorem Ipsum
available</p>
<div class="shym-overlay">
<div class="shym-picture-detail-inner">
<h3><a href="#">Business theme</a> </h3>
<p>There are many variations of passages
of Lorem Ipsum available,There are many variations of passages of Lorem
Ipsum available but the majority</p>
<a href="#" rel="prettyPhoto"><i
class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class='col-sm-3 '>
<div class='picture-info' data-scroll-reveal="wait 0.25s, then enter
left and move 40px over 1s">
<img src='localhost/codeigniter2/assets/img/item2.png'/>
<p>There are many variations of passages of Lorem Ipsum available, but
the majority.There are many variations of passages of Lorem Ipsum
available</p>
<div class="shym-overlay">
<div class="shym-picture-detail-inner">
<h3><a href="#">Business theme</a> </h3>
<p>There are many variations of passages
of Lorem Ipsum available.There are many variations of passages of Lorem
Ipsum available but the majority</p>
<a href="#" rel="prettyPhoto"><i
class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='picture-info' data-scroll-reveal="wait 0.25s, then enter
bottom and move 40px over 1s">
<img src='localhost/codeigniter2/assets/img/item3.png'/>
<p>There are many variations of passages of Lorem Ipsum available.There
are many variations of passages of Lorem Ipsum available but the
majority</p>
<div class="shym-overlay">
<div class="shym-picture-detail-inner">
<h3><a href="#">Business theme</a> </h3>
41. MODUL PRAKTIKUM PEMROGRAMAN WEB
41
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<p>There are many variations of passages
of Lorem Ipsum available, but the majority.There are many variations of
passages of Lorem Ipsum available</p>
<a href="#" rel="prettyPhoto"><i
class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='picture-info' data-scroll-reveal="wait 0.25s, then enter top
and move 40px over 1s">
<img src='localhost/codeigniter2/assets/img/item4.png'/>
<p>There are many variations of passages of Lorem Ipsum available. There
are many variations of passages of Lorem Ipsum available, but the
majority</p>
<div class="shym-overlay">
<div class="shym-picture-detail-inner">
<h3><a href="#">Business theme</a> </h3>
<p>There are many variations of passages
of Lorem Ipsum available, but the majority</p>
<a href="#" rel="prettyPhoto"><i
class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/PICTURE INFORMATION ENDS HERE -->
<!--QUOTE STARTS HERE -->
<section class='quote'>
<div class='container'>
<div class='row'>
<div class='col-md-12 col-sm-12 col-xs-12'>
<div class='col-sm-10 col-xs-10 pull-left'>
<h3 class='shym-text-left'>Have a question or need a custom quote?</h3>
<p class='shym-text-left' >Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +0123
456 70 80</p></div><div class=' col-sm-2 '><button class='btn btn-
warning pull-right ' style='margin-top:50px;'>Quote</button></div>
</div>
</div>
</div>
</section>
<!--/QUOTE ENDS HERE--><!--SHYM CONTACT START HERE -->
<footer class="shym-contact">
<div class="container">
<?php echo $content;?>
42. MODUL PRAKTIKUM PEMROGRAMAN WEB
42
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<!--======= TITTLE PART =========-->
<div class="tittle">
<h3 class='shym-text-center'>Get ın touch</h3>
<hr>
<p class='shym-text-center'>It is a long established fact that
a reader will be distracted by the readable content.</p>
</div>
<!--======= SOCIAL ICONS PART =========-->
<div class="social_icons">
<ul>
<li class="facebook"> <a href="#." data-scroll-reveal="wait
0.25s, then enter top and move 40px over 1s"><i class="fa fa-
facebook"></i> </a> </li>
<li class="twitter"> <a href="#." data-scroll-reveal="wait
0.25s, then enter top and move 40px over 1s"><i class="fa fa-
twitter"></i> </a> </li>
<li class="dribbble"> <a href="#." data-scroll-reveal="wait
0.25s, then enter top and move 40px over 1s"><i class="fa fa-
dribbble"></i> </a> </li>
<li class="googleplus"> <a href="#." data-scroll-
reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa
fa-google"></i> </a> </li>
<li class="linkedin "> <a href="#." data-scroll-reveal="wait
0.25s, then enter top and move 40px over 1s"><i class="fa fa-
linkedin"></i> </a> </li>
<li class="pinterest"> <a href="#." data-scroll-reveal="wait
0.25s, then enter top and move 40px over 1s"><i class="fa fa-
pinterest"></i> </a> </li>
</ul>
</div>
<!--======= CONTACT INFO PART =========-->
<div class="con-info">
<div class="row">
<div class='container'>
<div class="col-md-6 col-sm-6">
<div class="row">
<div class="col-sm-6"> <i class="ion-flag"></i>
<h4>ABOUT US</h4>
<p> Temporibus autem quisbusdam et
aut officiis debitis aut rerum nece
sitatibus sape eveniet ut et
voluptate rerum. </p>
</div>
<!--======= OFFICE ADRESS PART =========-->
<div class="col-sm-6"> <i class="ion-android-
location"></i>
<h4>OFFICE ADRESS</h4>
<p> Shym Center Adress</p>
<p>+1 (000)-999-0000</p>
<p> Kottayam Kerala. India</p>
<p> support@domain.com </p>
</div>
</div>
44. MODUL PRAKTIKUM PEMROGRAMAN WEB
44
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<script type="text/javascript"
src="localhost/codeigniter2/assets/js/owl.carousel.min.js"></script>
<script
src="localhost/codeigniter2/assets/js/scrollReveal.js"></script>
<script src="localhost/codeigniter2/assets/js/function.js"></script>
</body>
</html>
8. MEMBUAT APLIKASI BERBASIS WEB - CODE IGNITER DAN MYSQL
Langkah untuk memulai pada bab ini adalah sebagai berikut :
1. Arahkan browser ke localhost/phpmyadmin
2. Buatlah database baru dengan nama codeigniterdb (hanya contoh, boleh diganti)
3. Membuat table baru
Tabel content
45. MODUL PRAKTIKUM PEMROGRAMAN WEB
45
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
Tabel login
Tabel teman
4. Input data pada table codeigniterdb
Isikan datanya seperti dibawah ini dgn mengklik menu insert
46. MODUL PRAKTIKUM PEMROGRAMAN WEB
46
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
5. Membuat Model mainmodel.php
Buat file mainmodel.php pada direktori
/xampp/htdocs/codeigniter/application/model/mainmodel.php
<?php if(!defined('BASEPATH')) exit ('Access Denied');
//Nama class harus sama dengan nama file
class Mainmodel extends CI_Model
{
public function __construct()
{
parent::__construct();
$this->load->view_data['base_url']=base_url();
}
public function index()
{
$this->home();
}
public function home()
{
//kueri ke tabel content untuk menampilkan isi halaman utama
$query=$this->db->select('id,judul, isi');
$query=$this->db->where('category','home');
$query=$this->db->order_by('id');
$query=$this->db->limit('1');
$query=$this->db->get('content');
$k=1;
//jika query diatas ada hasilnya
if ($query->num_rows() > 0)
{
47. MODUL PRAKTIKUM PEMROGRAMAN WEB
47
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
//menelurusi setiap baris pada tabel content
foreach ($query->result() as $row)
{
$data=$row->isi;
}
return $data;
}
else
{
return false;
}
}
public function kuliah()
{
//kueri ke tabel content untuk menampilkan isi halaman kuliah
$query=$this->db->select('id,judul, isi');
$query=$this->db->where('category','kuliah');
$query=$this->db->order_by('id');
$query=$this->db->limit('1');
$query=$this->db->get('content');
$k=1;
//jika query diatas ada hasilnya
if ($query->num_rows() > 0)
{
//menelurusi setiap baris pada tabel content
foreach ($query->result() as $row)
{
$data=$row->isi;
}
return $data;
}
else
{
return false;
}
}
public function kerja()
{
//kueri ke tabel content untuk menampilkan isi halaman kerja
$query=$this->db->select('id,judul, isi');
$query=$this->db->where('category','kerja');
$query=$this->db->order_by('id');
$query=$this->db->limit('1');
$query=$this->db->get('content');
$k=1;
//jika query diatas ada hasilnya
48. MODUL PRAKTIKUM PEMROGRAMAN WEB
48
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
if ($query->num_rows() > 0)
{
//menelurusi setiap baris pada tabel content
foreach ($query->result() as $row)
{
$data=$row->isi;
}
return $data;
}
else
{
return false;
}
}
public function aboutme()
{
//kueri ke tabel content untuk menampilkan isi halaman aboutme
$query=$this->db->select('id,judul, isi');
$query=$this->db->where('category','aboutme');
$query=$this->db->order_by('id');
$query=$this->db->limit('1');
$query=$this->db->get('content');
$k=1;
//jika query diatas ada hasilnya
if ($query->num_rows() > 0)
{
//menelurusi setiap baris pada tabel content
foreach ($query->result() as $row)
{
$data=$row->isi;
}
return $data;
}
else
{
return false;
}
}
public function contact()
{
//kueri ke tabel content untuk menampilkan isi halaman contact
$query=$this->db->select('id,judul, isi');
$query=$this->db->where('category','contact');
$query=$this->db->order_by('id');
$query=$this->db->limit('1');
$query=$this->db->get('content');
49. MODUL PRAKTIKUM PEMROGRAMAN WEB
49
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
$k=1;
//jika query diatas ada hasilnya
if ($query->num_rows() > 0)
{
//menelurusi setiap baris pada tabel content
foreach ($query->result() as $row)
{
$data=$row->isi;
}
return $data;
}
else
{
return false;
}
}
public function teman()
{
//memanggil librari tabel
$this->load->library('table');
//kueri ke tabel teman urut by id
$query=$this->db->select('nama,alamat');
$query=$this->db->order_by('id');
$query=$this->db->get('teman');
$k=1;
//jika tabel teman ada isinya
if ($query->num_rows() > 0)
{
//set tampilan tabel sesuai fungsi template
$this->table->set_template($this->template());
//cetak header tabel
$this->table->set_heading('No','Nama','Alamat');
$this->output_table ='<h3>Daftar teman saya</h3>';
$k=1;
//telusuri tiap baris tabel teman
foreach ($query->result() as $row)
{
//cetak baris tabel
$this->table->add_row($k,$row->nama,$row->alamat);
$k=$k+1;
}
//cetak tabel
$this->output_table .=$this->table->generate();
return $this->output_table;
}
else
{
return false;
50. MODUL PRAKTIKUM PEMROGRAMAN WEB
50
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
}
}
public function teman2()
{
//memanggil librari tabel
$this->load->library('table');
$query=$this->db->select('nama,alamat,id');
//kueri ke tabel teman urut by id
$query=$this->db->order_by('id');
$query=$this->db->get('teman');
$k=1;
//jika tabel teman ada isinya
if ($query->num_rows() > 0)
{
//set tampilan tabel sesuai fungsi template
$this->table->set_template($this->template());
//cetak header tabel
$this->table->set_heading('No','Nama','Alamat','','');
$this->output_table ='<h3>Daftar teman saya</h3>';
$k=1;
//telusuri tiap baris tabel teman
foreach ($query->result() as $row)
{
//cetak baris tabel
$this->table->add_row($k,$row->nama,$row->alamat,'<a
href='.base_url().'main/teman_edit/'.$row->id.'>Edit</a>','<a
href='.base_url().'main/teman_delete/'.$row->id.'>Delete</a>');
$k=$k+1;
}
//cetak tabel
$this->output_table .=$this->table->generate();
return $this->output_table;
}
else
{
return false;
}
}
public function teman_edit()
{
//variabel $id berisi segment ketiga pada url
$id=$this->uri->segment(3);
//kueri ke tabel teman yg $id nya sama dengan segment url ke tiga
$query=$this->db->select('id,nama,alamat');
$query=$this->db->where('id',$id);
$query=$this->db->limit(1);
$query=$this->db->get('teman');
//jika kueri diatas ada hasilnya
51. MODUL PRAKTIKUM PEMROGRAMAN WEB
51
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
if ($query->num_rows() > 0)
{
//kembalikan nilai hasil kueri
return $query->result();
}
else
{
return false;
}
}
public function teman_delete($input='')
{
//kueri ke tabel teman untuk menghapus data yg $id nya sama dengan segment
ketiga
$query=$this->db->where('id',$input['id']);;
$query=$this->db->delete('teman');
//jika kueri diatas berniai true
if ($query)
{
print "<script>alert('Data berhasil dihapus !!')</script>";
redirect('main/teman2');
}
//jika false
else
{
print "<script>alert('Data gagal dihapus !!')</script>";
redirect('main/teman2');
}
}
public function teman_edit_save($input='')
{
//kueri ke tabel teman untuk mengupdate data yg $id nya sama dengan segment
ketiga
$data=array('nama'=>$input['nama'],'alamat'=>$input['alamat']);
$query=$this->db->where('id',$input['id']);
$query=$this->db->update('teman',$data);
//jika kueri diatas berniai true
if ($query)
{
print "<script>alert('Data berhasil disimpan !!')</script>";
redirect('main/teman2');
}
//jika false
else
{
print "<script>alert('Data gagal disimpan !!')</script>";
redirect('main/teman2');
}
}
52. MODUL PRAKTIKUM PEMROGRAMAN WEB
52
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
public function teman_tambah_save($input='')
{
//variabel $id berisi segment ketiga pada url
$id=$this->uri->segment(3);
$data=array('nama'=>$input['nama'],'alamat'=>$input['alamat']);
//kueri insert ke tabel teman
$query=$this->db->insert('teman',$data);
//jika kueri diatas sukses/true
if ($query)
{
print "<script>alert('Data berhasil disimpan !!')</script>";
redirect('main/teman2');
}
//jika false
else
{
print "<script>alert('Data gagal disimpan !!')</script>";
redirect('main/teman2');
}
}
public function template()
{
$style=array('table_open' => '<table class="table table-striped table-hover">'
,'heading_row_start' => '<tr>'
,'heading_row_end' => '</tr>'
,'heading_cell_start' => '<th bgcolor="#488908">'
,'heading_cell_end' => '</th>'
,'row_start' => '<tr>'
,'cell_start' => '<td bgcolor="#82f90e">'
,'cell_end' => '</td>'
,'row_alt_start' => '<tr>'
,'row_alt_end' => '</tr>'
,'cell_alt_start' => '<td bgcolor-"#EEEEE0">'
,'cell_alt_end' => '</td>'
,'table_close' => '</table>'
);
return $style;
}
}
53. MODUL PRAKTIKUM PEMROGRAMAN WEB
53
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6. Membuat Controller main.php
Buat main.php pada direktori /xampp/htdocs/codeigniter/application/controller/main.php
yg isinya sebagai berikut :
<?php if (!defined('BASEPATH')) exit('akses Denied');
//Nama class harus sama dengan nama file
class Main extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->library('template');
$this->load->library('akses');
$this->load->model('mainmodel');
//Controller ini hanya bisa dipanggil jika user telah login, jika belum login
arahkan ke controller login
if (!$this->akses->is_login())
{
redirect ('login');
}
}
public function index()
{
$this->home();
}
public function home()
{
$input1['data']=$this->mainmodel->home();
$input2=$this->template->home($input1,'',true);
$this->load->view('container',$input2,''); // Memanggil view home.php
}
public function kuliah()
{
$input1['data']=$this->mainmodel->kuliah();
$input2=$this->template->home($input1,'',true);
$this->load->view('container',$input2,''); // Memanggil view kuliah.php
}
public function kerja()
{
$input1['data']=$this->mainmodel->kerja();
$input2=$this->template->home($input1,'',true);
$this->load->view('container',$input2,''); // Memanggil view kerja.php
}
public function aboutme()
{
$input1['data']=$this->mainmodel->aboutme();
$input2=$this->template->home($input1,'',true);
$this->load->view('container',$input2,''); // Memanggil view aboutme.php
54. MODUL PRAKTIKUM PEMROGRAMAN WEB
54
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
}
public function contact()
{
$input1['data']=$this->mainmodel->contact();
$input2=$this->template->home($input1,'',true);
$this->load->view('container',$input2,''); // Memanggil view contact.php
}
public function teman()
{
$input1['data']=$this->mainmodel->teman('','',true);
$input2=$this->template->teman($input1,'',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
public function teman2()
{
$input1['data']=$this->mainmodel->teman2('','',true);
$input2=$this->template->teman2($input1,'',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
public function teman_edit()
{
$this->load->helper('form');
$input1['data']=$this->mainmodel->teman_edit('','',true);
$input2=$this->template->teman_edit($input1,'',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
public function teman_edit_save()
{
//memanggil helper form dan librari form validation
$this->load->helper('form');
$this->load->library('form_validation');
//memfilter inputan sesuai kriteria yg telah ditetapkan
$this->form_validation-
>set_rules('nama','nama','trim|required|strip_tags|max_length[50]|xss_clean');
$this->form_validation-
>set_rules('alamat','alamat','trim|required|strip_tags|max_length[100]|xss_clean');
$this->form_validation->set_rules('token','callback_discussion_detail');
//jika inputan lolos filter
if ($this->form_validation->run())
{
$data['id']=$this->uri->segment(3);
$data['nama']=$this->input->post('nama',TRUE);
$data['alamat']=$this->input->post('alamat',TRUE);
//memanggil model teman_edit_save dengan mengirimkan nilai nama dan
alamat
$input1['data']=$this->mainmodel->teman_edit_save($data,'',true);
//memanggil librari template
$input2=$this->template->teman_edit_save($input1,'',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
55. MODUL PRAKTIKUM PEMROGRAMAN WEB
55
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
//jika tidak
else
{
redirect('main/teman_tambah');
}
}
public function teman_delete()
{
$data['id']=$this->uri->segment(3);
$input1['data']=$this->mainmodel->teman_delete($data,'',true);
$input2=$this->template->teman_delete($input1,'',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
public function teman_tambah()
{
$this->load->helper('form');
$input2=$this->template->teman_tambah('','',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
public function teman_tambah_save()
{
//memanggil helper form dan librari form validation
$this->load->helper('form');
$this->load->library('form_validation');
//memfilter inputan sesuai kriteria yg telah ditetapkan
$this->form_validation-
>set_rules('nama','nama','trim|required|strip_tags|max_length[50]|xss_clean');
$this->form_validation-
>set_rules('alamat','alamat','trim|required|strip_tags|max_length[100]|xss_clean');
$this->form_validation->set_rules('token','callback_discussion_detail');
//jika inputan lolos filter
if ($this->form_validation->run())
{
$data['nama']=$this->input->post('nama',TRUE);
$data['alamat']=$this->input->post('alamat',TRUE);
//memanggil model teman_tambah_save dengan mengirimkan nilai nama dan
alamat
$input1['data']=$this->mainmodel->teman_tambah_save($data,'',true);
//memanggil librari template
$input2=$this->template->teman_tambah_save($input1,'',true);
$this->load->view('container',$input2); // Memanggil view contact.php
}
//jika tidak
else
{
redirect('main/teman_tambah');
}
}
}
56. MODUL PRAKTIKUM PEMROGRAMAN WEB
56
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
7. Membuat Controller login.php
Buat login.php pada direktori /xampp/htdocs/codeigniter/application/controller/login.php
yg isinya sebagai berikut :
<?php if (!defined('BASEPATH')) exit('akses Denied');
class Login extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->library('form_validation');
$this->load->library('akses');
$this->load->helper('form');
$this->load->view_data['base_url']=base_url();
}
public function index()
{
//memanggil librari akses fungsi logout
//$this->akses->logout();
//memanggil fungsi login
$this->login();
}
public function login()
{
$this->akses->logout();
$data['base_url'] = base_url();
$data['page_title']='Login Page';
$data['url']=
anchor(base_url().'login/check','Login',array('type'=>'submit','class'=>'btn btn-
primary'));
//memanggil view login dengan mengirim nilai dari variabel $data
$this->load->view('login_views',$data);
}
public function logout()
{
//memanggil librari akses fungsi logout
$this->akses->logout();
//alihkan ke controller login fungsi login
redirect('login/login');
}
57. MODUL PRAKTIKUM PEMROGRAMAN WEB
57
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
public function check_login()
{
//Memfilter inputan dari berbagai kesalahan
$this->form_validation-
>set_rules('UserName','UserName','trim|required|strip_tags|min_length[3]|max_length
[50]');
$this->form_validation-
>set_rules('password','password','trim|required|strip_tags|min_length[3]|max_length[3
0]');
$this->form_validation->set_rules('token','callback_check_login');
// Jika inputan lolos dr filter
if ($this->form_validation->run())
{
//Membuat variabel untuk menampung nilai input
$user=$this->input->post('UserName',TRUE);
$passwd=$this->input->post('password',TRUE);
//memanggil librari akses
$login=$this->akses->login($user,$passwd);
//jika hasil librari akses benar
if ($login)
{
print "<script type="text/javascript">alert('Login berhasil');</script>";
//alihkan ke controlller main function home
redirect('main/home');
}
//jika salah
else
{
print "<script type="text/javascript">alert('Login gagal');</script>";
//alihkan ke controlller login function index
redirect('login');
}
}
//jika inputan tidak lolos filter
else
{
//memanggil function login
$this->login();
}
}
}
58. MODUL PRAKTIKUM PEMROGRAMAN WEB
58
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
8. Mengubah seting config database
Ubah setingan pada /xampp/htdocs/codeigniter/application/config/database.php
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'codeigniterdb',
'dbdriver' => 'mysql',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => TRUE,
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
9. Membuat library template
Ubah file pada /codeigniter/application/libraries/template.php
<?php if(!defined('BASEPATH')) exit('Access Denied');
//Nama class harus sama dengan nama file
class Template
{
public $CI;
public function __construct()
{
$this->CI=& get_instance();
$this->CI->load->helper('url');
$this->CI->load->view_data['base_url']=base_url();
}
public function index()
{
$this->home();
}
public function mainmenu()
{
//Menu-menu
$data['li1']='<li class="active"><a
href="'.base_url().'index.php/home/home"></li>';
$data['li2']='<li><a href="'.base_url().'index.php/home/kuliah"></li>';
59. MODUL PRAKTIKUM PEMROGRAMAN WEB
59
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
$data['li3']='<li><a href="'.base_url().'index.php/home/kerja"></li>';
$data['li4']='<li><a href="'.base_url().'index.php/home/contactus"></li>';
$data['li5']='<li><a href="'.base_url().'index.php/home/aboutme"></li>';
$data['base_url']=base_url();
return $data;
}
public function home($input='',$output=NULL)
{
//halaman utama
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Utama';
$data['h1']='<h1>Selamat datang di websiteku</h1>';
//memanggil view home dengan mengirim nilai dari variabel $input
$data['content']=$this->CI->load->view('home',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
//memanggil view content dengan mengirim nilai dari variable $data
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function kuliah($input='',$output=NULL)
{
//halaman kuliah
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Kuliah';
$data['content']=$this->CI->load->view('kuliah',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function kerja($input='',$output=NULL)
{
//Halaman kerja
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Kerja';
$data['content']=$this->CI->load->view('kerja',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function aboutme($input='',$output=NULL)
{
// halaman aboutme
$data=$this->mainmenu('','',true);
60. MODUL PRAKTIKUM PEMROGRAMAN WEB
60
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
$data['page_title']='Halaman Tentang Aku';
$data['content']=$this->CI->load->view('aboutme',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function contactus($input='',$output=NULL)
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Kontak';
$data['content']=$this->CI->load->view('contactus',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function teman($input='',$output='')
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Daftar Teman';
$data['content']=$this->CI->load->view('teman',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function teman2($input='',$output='')
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Daftar Teman';
$data['content']=$this->CI->load->view('teman2',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function teman_edit($input='',$output='')
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Daftar Teman';
$data['content']=$this->CI->load->view('teman_edit',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
61. MODUL PRAKTIKUM PEMROGRAMAN WEB
61
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
public function teman_edit_save($input='',$output='')
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Daftar Teman';
$data['content']=$this->CI->load->view('teman_edit',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function teman_add_save($input='',$output='')
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Daftar Teman';
$data['content']=$this->CI->load->view('teman_edit',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
public function teman_tambah($output='')
{
//Halaman Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Tambah Teman';
$data['content']=$this->CI->load->view('teman_tambah','',true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
}
62. MODUL PRAKTIKUM PEMROGRAMAN WEB
62
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
10. Membuat Library akses (untuk menangani autentikasi/login)
Buat file /codeigniter/application/libraries/akses.php
<?php if(!defined('BASEPATH')) exit('Access Denied');
//Nama class harus sama dengan nama file
class Akses
{
function __construct()
{
$this->CI=& get_instance();
$this->CI->load->helper('cookie');
$this->CI->load->library('session');
$this->CI->load->database();
}
function login($UserName,$password)
{
//melakukan kueri ke tabel login
$kueri=$this->CI->db->select('UserName,password,Name');
//keluarkan data jika username pada tabel sama dengan username inputan
$kueri=$this->CI->db->where('UserName',$UserName);
//batasi hasil output 1 baris
$kueri=$this->CI->db->limit(1);
//tabel login
$kueri=$this->CI->db->get('login');
$hasil=$kueri->row();
// jika username dan password hasil kueri sama dengan inputan
user maka kembalikan nilai true
if ($hasil->UserName===$UserName AND $hasil-
>password===sha1($password))
{
$this->CI->session->set_userdata('Name',$hasil-
>Name);
$this->CI->session-
>set_userdata('UserName',$hasil->UserName);
return true;
}
//jika tidak kembalikan nilai false
else
{
return FALSE;
}
}
//fungsi untuk mencek apakah sudah login atau belum
public function is_login()
63. MODUL PRAKTIKUM PEMROGRAMAN WEB
63
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
{
return (($this->CI->session->userdata('Name')) ? TRUE :FALSE);
}
//fungsi untuk melogout
public function logout()
{
$this->CI->session->sess_destroy();
$this->CI->session->unset_userdata('Name');
$this->CI->session->unset_userdata('Username');
}
}
11. Membuat Library akses (untuk menangani autentikasi/login)
Buat file /codeigniter/application/libraries/akses.php
<?php if(!defined('BASEPATH')) exit('Access Denied');
//Nama class harus sama dengan nama file
class Akses
{
function __construct()
{
$this->CI=& get_instance();
$this->CI->load->helper('cookie');
$this->CI->load->library('session');
$this->CI->load->database();
}
function login($UserName,$password)
{
//melakukan kueri ke tabel login
$kueri=$this->CI->db->select('UserName,password,Name');
//keluarkan data jika username pada tabel sama dengan username inputan
$kueri=$this->CI->db->where('UserName',$UserName);
//batasi hasil output 1 baris
$kueri=$this->CI->db->limit(1);
//tabel login
$kueri=$this->CI->db->get('login');
$hasil=$kueri->row();
// jika username dan password hasil kueri sama dengan inputan
user maka kembalikan nilai true
if ($hasil->UserName===$UserName AND $hasil->password===sha1($password))
{
$this->CI->session->set_userdata('Name',$hasil->Name);
64. MODUL PRAKTIKUM PEMROGRAMAN WEB
64
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
$this->CI->session->set_userdata('UserName',$hasil->UserName);
return true;
}
//jika tidak kembalikan nilai false
else
{
return FALSE;
}
}
//fungsi untuk mencek apakah sudah login atau belum
public function is_login()
{
return (($this->CI->session->userdata('Name')) ? TRUE :FALSE);
}
//fungsi untuk melogout
public function logout()
{
$this->CI->session->sess_destroy();
$this->CI->session->unset_userdata('Name');
$this->CI->session->unset_userdata('Username');
}
}
12. Mengubah kode pada autoload (untuk menangani otomatisasi pemanggilan
helper/library)
Buat file /codeigniter/application/config/autoload.php
$autoload['helper'] = array('url','html','security','date');
$autoload['libraries']=array('database');
$autoload['libraries']=array('template');
$autoload['libraries']=array('pagination');
13. Mengubah kode pada routes.php
$route['default_controller'] = 'login';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['main']="main";
$route['main/kerja']="main/kerja";
$route['main/kuliah']="main/kuliah";
$route['main/contact']="main/contact";
$route['main/aboutme']="main/aboutme";
$route['main/teman']="main/teman";
$route['main/teman2']="main/teman2";
$route['main/teman_tambah']="main/teman_tambah";
$route['main/teman_tambah_save/:any']="main/teman_tambah_save/:any";
$route['main/teman_edit/:any']="main/teman_edit/:any";
$route['main/teman_edit_save/:any']="main/teman_edit_save/:any";
69. MODUL PRAKTIKUM PEMROGRAMAN WEB
69
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<?php echo
form_open('login/check_login',array('method'=>'post','name'=>'login_form','class'=>'f
orm-signin'));?>
<h2 class="form-signin-heading">Halaman Login</h2>
<?php echo validation_errors(); ?>
<input type="text" id="UserName" name="UserName" class="input-block-level"
placeholder="Email address">
<input type="password" id="password" name="password" class="input-block-
level" placeholder="Password">
<div class="row"><button class="btn btn-large btn-primary"
type="submit">Login</button></div>
</form>
</div>
</body>
</html>
i. home.php
<?php echo($data); ?>
j. kuliah.php
<?php echo($data); ?>
k. contactus.php
<?php echo($data); ?>
l. aboutme.php
<?php echo($data); ?>
m. kerja.php
<?php echo($data); ?>
70. MODUL PRAKTIKUM PEMROGRAMAN WEB
70
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
n. Generate password menggunakan aplikasi Hashcalc, masukkan di kolom data
“12345”, klik calculate kemudian copy hasil sha1
o. Buka table login klik insert masukkan data sbb :
Username : latihan@codeigniter.com
Pasword : 8cb2237d0679ca88db6464eac60da96345513964 (hasil sha1)
Name : Latihan
71. MODUL PRAKTIKUM PEMROGRAMAN WEB
71
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
p. Hasil akhir
9. TIPS DAN TRICK (HALAMAN ADMIN INSTANT DENGAN GROCERY CRUD)
Langkah langkah :
1. Dowload Library Grocery Crud dari http://www.grocerycrud.com
2. Ekstrak/Unzip file hasil download
3. Pastekan pada direktori codeigniter pada tempat yang sesuai
4. Tambahkah baris berikut pada /config/routes.php
$route['main/edittemangrocery']="main/edittemangrocery";
5. Tambahkan 1 fungsi pada /controller/main.php
public function _example_output($output = null)
{
$this->load->view('edittemangrocery.php',$output,true);
}
72. MODUL PRAKTIKUM PEMROGRAMAN WEB
72
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6. Tambahkan 1 fungsi pada /controller/main.php
function edittemangrocery()
{
$this->load->library('grocery_CRUD');
$crud = new grocery_CRUD();
$crud->set_table('teman');
$output=$crud->render();
$input['data'] = $this->_example_output($output);
$input2=$this->template->edittemangrocery($input,'',true);
$this->load->view('container',$input2);
}
7. Tambahkan 1 fungsi pada /libraries/template.php
public function edittemangrocery($input='',$output='')
{
//Halaman grocery crud
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman Daftar Teman';
$data['content']=$this->CI->load->view('edittemangrocery',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN $output;
}
8. Buat file /views/edittemangrocery.php yang isinya sbb :
Kode ini berasal dari kode views contoh bawaan grocery crud (view/example.php)
<?php
foreach($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>
<div style='height:20px;'></div>
<div>
<?php echo $output; ?>
</div>
9. Tambahkan link pada /views/content.php
<li><a href="<?php echo $base_url;?>index.php/main/edittemangrocery">Grocery
Crud</a></li>
73. MODUL PRAKTIKUM PEMROGRAMAN WEB
73
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
Hasil Akhir