SlideShare a Scribd company logo
Dosen : Indra Gunawan, ST.,
M.Kom., CEH., CHFI
MODUL PRAKTIKUM WEB
MEMBUAT APLIKASI WEB DENGAN
CODEIGNITER PHP FRAMEWORK + LTE
BOOTSRAP + GROCERYCRUD
Untuk kalangan sendiri
SEKOLAH TINGGI TEKNIK IBNU SINA BATAM
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
MODUL PRAKTIKUM PEMROGRAMAN WEB
2
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
4. Hilangkan tanda # pada baris-baris dibawah ini untuk mengaktifkan fitur
• 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>
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;
MODUL PRAKTIKUM PEMROGRAMAN WEB
4
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
MODUL PRAKTIKUM PEMROGRAMAN WEB
5
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
<p>
London is the capital city of England. It is the most populous city in the United
Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two
millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
</html>
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;
}
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;
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;
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
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>";
?>
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.
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
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();
?>
MODUL PRAKTIKUM PEMROGRAMAN WEB
14
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6 MEMBANGUN APLIKASI WEB DENGAN CI PHP FRAMEWORK
6.1 CODE IGNITER FRAMEWORK
MODUL PRAKTIKUM PEMROGRAMAN WEB
15
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6.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
6.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
MODUL PRAKTIKUM PEMROGRAMAN WEB
16
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:
6.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.
MODUL PRAKTIKUM PEMROGRAMAN WEB
17
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
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
18
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
}
2. Membuat View
Berikut adalah isi dari /codeigniter/application/view/home.php
<!DOCTYPE html>
<html><head><title>Website ku</title><link rel="stylesheet" type="text/css"
href="localhost/assets/style.css"></head>
<body>
<div id="container">
<div id="image"></div>
<div id="header">
<ul>
<li><a href="http://localhost/codeigniter/">Home</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kuliah">Kuliah</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kerja">Kerja</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/aboutme">About Me</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/contact">Contact</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="http://localhost/codeigniter/">Home</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kuliah">Kuliah</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kerja">Kerja</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/aboutme">About Me</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/contact">Contact</a></li>
</ul>
</div>
<div id="section">
<h1>Web pertamaku</h1>
<h2>Ini adalah web pertamaku dengan CodeIgniter Framework</h2>
</div>
<div id="footer">Copyright &copy; STT-Ibnu Sina Batam.</div>
</div>
</body>
</html>
Isi dari keempat file lainnya (kuliah.php, kerja.php, aboutme.php, contact.php) adalah sama
tinggal diganti didalam div section nya disesuaikan kalimat paragrafnya.
Buat folder /assets pada /codeigniter/, isinya style.css dan header.jpg (ambil dr pertemuan
4)
MODUL PRAKTIKUM PEMROGRAMAN WEB
19
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
3. Hasil
6.5 WEB TEMPLATING DENGAN LTE 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)
MODUL PRAKTIKUM PEMROGRAMAN WEB
20
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
}
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
21
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);
MODUL PRAKTIKUM PEMROGRAMAN WEB
22
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
MODUL PRAKTIKUM PEMROGRAMAN WEB
23
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;?>
8. MEMBUAT APLIKASI BERBASIS WEB - CODE IGNITER DAN MYSQL
Langkah untuk memulai pada bab ini adalah sebagai berikut :
MODUL PRAKTIKUM PEMROGRAMAN WEB
24
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
1. Arahkan browser ke localhost/phpmyadmin
2. Buatlah database baru dengan nama codeigniterdb (hanya contoh, boleh diganti)
3. Membuat table baru
Tabel content
Tabel login
Tabel teman
4. Input data pada table codeigniterdb
Isikan datanya seperti dibawah ini dgn mengklik menu insert
MODUL PRAKTIKUM PEMROGRAMAN WEB
25
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)
{
MODUL PRAKTIKUM PEMROGRAMAN WEB
26
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
MODUL PRAKTIKUM PEMROGRAMAN WEB
27
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');
MODUL PRAKTIKUM PEMROGRAMAN WEB
28
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;
MODUL PRAKTIKUM PEMROGRAMAN WEB
29
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
MODUL PRAKTIKUM PEMROGRAMAN WEB
30
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');
}
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
31
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;
}
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
32
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
MODUL PRAKTIKUM PEMROGRAMAN WEB
33
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
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
34
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');
}
}
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
35
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');
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
36
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();
}
}
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
37
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>';
MODUL PRAKTIKUM PEMROGRAMAN WEB
38
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);
MODUL PRAKTIKUM PEMROGRAMAN WEB
39
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;
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
40
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;
}
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
41
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()
MODUL PRAKTIKUM PEMROGRAMAN WEB
42
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);
MODUL PRAKTIKUM PEMROGRAMAN WEB
43
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";
MODUL PRAKTIKUM PEMROGRAMAN WEB
44
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
$route['main/teman_delete/:any']="main/teman_delete/:any";
$route['login']="login";
$route['login/login']="login/login";
$route['login/check_login']="login/check_login";
14. Membuat file-file pada direktori /view
header.php
content.php
footer.php
container.php
teman.php
teman2.php
teman_tambah.php
teman_edit.php
login_views.php
home.php
aboutme.php
kuliah.php
kerja.php
contactus.php
a. header.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page_title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo $base_url;?>assets/style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="<?php echo $base_url;?>main/home">Home</a></li>
<li><a href="<?php echo $base_url;?>main/kuliah">Kuliah</a></li>
<li><a href="<?php echo $base_url;?>main/kerja">Kerja</a></li>
<li><a href="<?php echo $base_url;?>main/contact">Contact</a></li>
<li><a href="<?php echo $base_url;?>main/aboutme">About Me</a></li>
</ul>
</div>
MODUL PRAKTIKUM PEMROGRAMAN WEB
45
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
b. content.php
<div id="nav">
<ul>
<li><a href="<?php echo $base_url;?>main/teman">Daftar nama teman</a></li>
<li><a href="<?php echo $base_url;?>main/teman2">Edit Daftar teman</a></li>
<li><a href="<?php echo $base_url;?>main/teman_tambah">Tambah teman</a></li>
</ul>
</div>
<div id="kanan">
<div id="garis"><ol><b>Biodata</b></ol></div>
<img src="<?php echo $base_url;?>assets/bradpit.jpg" width="200px"
height="150px">
<p>
Nama : Brad pit<br/>
Pekerjaan : Seniman<br/>
Negara : Tanjung Pinang<br/>
Alamat : Perum Tanjung Pinang permai blok D3 no 10<br/>
Hoby : Selfi<br/> </p>
<hr>
<p align="justify">
Saya adalah seorang seniman asal Tanjung Pinang, Batam, Indonesia.
Saya menyukai teater dan musik, saya pernah bermain dalam beberapa film box office.
</p>
</div>
<div id="section">
<?php echo $content;?>
</div>
<div id="tengah"></div>
c. footer.php
<div id="footer">
Copyright &copy; STT Ibnu Sina Batam
</div>
</body>
</html>
d. container.php
<?php
echo $header;
echo $content;
echo $footer;
?>
MODUL PRAKTIKUM PEMROGRAMAN WEB
46
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
e. teman.php
<?php echo $data;?>
f. teman_edit.php
<?php
foreach ($data as $row)
{
$id=$row->id;
$nama=$row->nama;
$alamat=$row->alamat;
}
?>
<?php echo form_open('main/teman_edit_save/'.$id,array('name'=>'Form Simpan'));?>
<fieldset>
<legend>Form Edit Teman</legend>
<label for="nama">Nama </label>
<input type="text" id="nama" name="nama" placeholder="" value="<?php echo
$nama;?>">
<br/>
<label for="alamat"class="col-lg-4 control-label">Alamat </label>
<input type="text" id="alamat" name="alamat" placeholder="" value="<?php echo
$alamat;?>">
<br/>
</fieldset>
<fieldset>
<input type="submit" name="submit" value="Save">
</fieldset>
</form>
g. teman_tambah.php
<?php echo form_open('main/teman_tambah_save/',array('name'=>'Form Simpan'));?>
<fieldset>
<legend>Form Tambah Teman</legend>
<label for="nama">Nama </label>
<input type="text" id="nama" name="nama" placeholder="" value="Isi Nama
Temanmu">
<br/>
<label for="alamat"class="col-lg-4 control-label">Alamat </label>
<input type="text" id="alamat" name="alamat" placeholder="" value="Isi Alamat
Temanmu">
<br/>
</fieldset>
<fieldset>
<input type="submit" name="submit" value="Save">
</fieldset>
</form>
MODUL PRAKTIKUM PEMROGRAMAN WEB
47
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
h. login_views.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Halaman Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
</head>
<body>
<div class="container">
MODUL PRAKTIKUM PEMROGRAMAN WEB
48
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); ?>
MODUL PRAKTIKUM PEMROGRAMAN WEB
49
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
MODUL PRAKTIKUM PEMROGRAMAN WEB
50
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);
}
MODUL PRAKTIKUM PEMROGRAMAN WEB
51
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>
MODUL PRAKTIKUM PEMROGRAMAN WEB
52
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
Hasil Akhir
MODUL PRAKTIKUM PEMROGRAMAN WEB
53
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
7 TOPIK TERKAIT
Untuk membaca topik-topik lainnya seputar dunia pemrograman, jaringan dan keamanan, silakan
merujuk ke penelitian saya lainnya (Abdilana & Gunawan, 2022; Berliana dkk., 2022; Gunawan,
2014, 2019, 2020, 2021a, 2021b, 2021c, 2021d, 2021e, 2021f, 2021g; Gunawan dkk., 2018;
Gunawan & Yelmi, 2021; Huzaeni & Gunawan, 2022; Indrayana dkk., 2022; Permatasari dkk.,
2018; Pratama dkk., 2022; D. C. Purnomo & Gunawan, 2022; D. Purnomo & Gunawan, 2021; Y
dkk., 2022)
MODUL PRAKTIKUM PEMROGRAMAN WEB
54
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
8 PUSTAKA
Abdilana, R., & Gunawan, I. I. (2022). Implementasi Metode SAW dalam Sistem Pendukung
Keputusan Pemilihan Smartphone Menggunakan Scratch. JIIFKOM (Jurnal Ilmiah Informatika
dan Komputer), 1(1), 35–40.
Berliana, C. D., Saputra, T. A., & Gunawan, I. (2022). Analisis Serangan dan Keamanan pada
Denial of Service (DOS): Sebuah Review Sistematik. JIIFKOM (Jurnal Ilmiah Informatika dan
Komputer), 1(2), 33–38.
Gunawan, I. (2014). I-POLINK: Indonesian Police Link Model Knowledge Management
Investigasi Forensika Digital. https://doi.org/10.13140/RG.2.2.28996.32647
Gunawan, I. (2019). PEMROGRAMAN BAHASA ASSEMBLY MIKROPROSESOR 8086 (1
ed.). Guepedia.
Gunawan, I. (2020). Optimasi Model Artificial Neural Network untuk Klasifikasi Paket Jaringan.
SIMETRIS, 14(2), 1–5. https://doi.org/10.51901/simetris.v14i2.135
Gunawan, I. (2021a). Keamanan Data: Teori dan Implementasi (1 ed.). Jejak.
Gunawan, I. (2021b). Analisis Malware Botnet Proteus Pendekatan Static dan Dinamic.
SIMETRIS, 15(1), 12–17. https://doi.org/10.51901/simetris.v15i01.172
Gunawan, I. (2021c). Analisis Keamanan Data Pada Website Dengan Wireshark. JES (Jurnal
Elektro Smart), 1(1), 16–19.
Gunawan, I. (2021d). Analisis Keamanan Jaringan Wifi Menggunakan Wireshark. JES (Jurnal
Elektro Smart), 1(1), 10–12.
Gunawan, I. (2021e). Analisis Keamanan Wifi Menggunakan Wireshark. JES (Jurnal Elektro
Smart), 1(1), 7–9.
Gunawan, I. (2021f). Analisis Layer Aplikasi (Protokol HTTP) menggunakan Wireshark. JES
(Jurnal Elektro Smart), 1(1), 13–15.
Gunawan, I. (2021g). Analisis Keamanan Aplikasi Android Non Playstore Dengan Metode
Digital Forensik Pendekatan Statis Dan Dinamis. SIMETRIS, 15(2), 29–34.
https://doi.org/10.51901/simetris.v15i2.225
Gunawan, I., Afrina, & Sofrawida, C. (2018). SISTEM PENDUKUNG KEPUTUSAN
PEMILIHAN KARYAWAN TERBAIK PADA LAMOIST LAYERS BATAM. JR : Jurnal
Responsive Teknik Informatika, 2(02), 39–61.
Gunawan, I., & Yelmi, Y. (2021). Rancang Bangun Robot Pengawas Dokumen Berbasis
Raspberry Pi2 dengan Pemrograman Python. Jurnal Ilmu Komputer Dan Bisnis, 12(1), 144–149.
MODUL PRAKTIKUM PEMROGRAMAN WEB
55
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
Huzaeni, F., & Gunawan, I. I. (2022). Implementasi Metode SAW dalam Sistem Pendukung
Keputusan Pemilihan Laptop Menggunakan Scratch. JIIFKOM (Jurnal Ilmiah Informatika dan
Komputer), 1(1), 30–34.
Indrayana, T., Warijan, W., Sutarmi, S., Purnomo, D., & Gunawan, I. (2022). Developing
systems application based on android as tool for determinant stunting factors in the COVID-19
pandemic era. International Journal of Health Sciences, 6(S1), 257–268.
https://doi.org/10.53730/ijhs.v6nS1.4763
Permatasari, R. D., Gunawan, I., & Syahputra, M. R. (2018). RANCANG BANGUN APLIKASI
PENANGANAN BAGASI BERBASIS MOBILE WEB PADA PT SRIWIJAYA AIR. Jurnal
Teknik Ibnu Sina (JT-IBSI), 3(1). https://doi.org/10.36352/jt-ibsi.v3i1.101
Pratama, T. I. M., Songida, M. D. F., & Gunawan, I. (2022). Analisis Serangan dan Keamanan
pada SQL Injection: Sebuah Review Sistematik. JIIFKOM (Jurnal Ilmiah Informatika dan
Komputer), 1(2), 27–32.
Purnomo, D. C., & Gunawan, I. I. (2022). Penerapan Metode Simple Additive Weighting (SAW)
Dalam Sistem Pemilihan Kamera Menggunakan Scratch. JIIFKOM (Jurnal Ilmiah Informatika
dan Komputer), 1(1), 16–21.
Purnomo, D., & Gunawan, I. (2021). Decision Support System for Determination of Scholarship
Using Scratch Programming Based on SAW Method. International Journal of Business and
Information Technology, 2, 72–29. https://doi.org/10.47927/ijobit.v2i2
Y, A. K., Alfaren, G., & Gunawan, I. (2022). Analisis Serangan Penetration Testing: Sebuah
Review Sistematik. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(2), 21–26.
MODUL PRAKTIKUM PEMROGRAMAN WEB
56
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
DAFTAR ISI
1 XAMPP WEB SERVER......................................................................................................... 1
1.1 Instalasi Xampp Web Server :.......................................................................................... 1
1.2 SETUP XAMPP............................................................................................................... 1
2 PENGENALAN HTML ......................................................................................................... 2
2.1 Struktur Utama :............................................................................................................... 2
2.2 Contoh Loyout dengan html :........................................................................................... 3
3 PENGENALAN CSS............................................................................................................. 6
3.1 Struktur utama CSS.......................................................................................................... 6
3.2 cara memanggil file css dalam html................................................................................. 7
3.3 Contoh kode css dasar...................................................................................................... 7
4 PENGENALAN PHP ............................................................................................................ 9
4.1 Penerapan php dalam kode html .................................................................................... 10
4.2 Contoh –contoh script php ............................................................................................. 10
5 PENGENALAN MYSQL.................................................................................................... 11
5.1 PHP DAN MYSQL........................................................................................................ 13
6 MEMBANGUN APLIKASI WEB DENGAN CI PHP FRAMEWORK............................. 14
6.1 Code Igniter Framework ................................................................................................ 14
6.2 Install Codeigniter dasar................................................................................................. 15
1. Extract / Unzip CodeIgniter-3.0.0.zip ke dalam /xampp/htdocs/codeigniter. ............ 15
6.3 Install codeigniter lanjutan............................................................................................. 15
6.4 Membuat web Sederhana dengan Codeigniter............................................................... 16
1. Membuat Controller ................................................................................................... 17
2. Membuat View ........................................................................................................... 18
3. Hasil............................................................................................................................ 19
6.5 Web Templating dengan LTE Bootstrap dan Codeigniter............................................. 19
8. MEMBUAT APLIKASI BERBASIS WEB - Code Igniter dan Mysql ............................ 23
1. Arahkan browser ke localhost/phpmyadmin .............................................................. 24
2. Buatlah database baru dengan nama codeigniterdb (hanya contoh, boleh diganti).... 24
3. Membuat table baru.................................................................................................... 24
4. Input data pada table codeigniterdb............................................................................ 24
5. Membuat Model mainmodel.php ............................................................................... 25
MODUL PRAKTIKUM PEMROGRAMAN WEB
57
DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI
STT IBNU SINA BATAM
6. Membuat Controller main.php ................................................................................... 32
7. Membuat Controller login.php ................................................................................... 35
8. Mengubah seting config database............................................................................... 37
9. Membuat library template .......................................................................................... 37
10. Membuat Library akses (untuk menangani autentikasi/login) ................................... 41
11. Membuat Library akses (untuk menangani autentikasi/login) ................................... 42
12. Mengubah kode pada autoload (untuk menangani otomatisasi pemanggilan
helper/library) ....................................................................................................................... 43
13. Mengubah kode pada routes.php................................................................................ 43
14. Membuat file-file pada direktori /view....................................................................... 44
9. TIPS DAN TRICK (HALAMAN ADMIN INSTANT DENGAN GROCERY CRUD). 50
7 TOPIK TERKAIT................................................................................................................. 53
8 PUSTAKA............................................................................................................................ 54

More Related Content

PDF
Belajar Framework CodeIgnitier Lengkap (bahasa Indonesia)
DOCX
Belajar framework code igniter xii rpl
PDF
CRUD pada Android Studio menggunakan MySQL
PDF
Belajar php dengan framework code igniter3
PDF
Belajar php-dengan-framework-code-igniter
PDF
Belajar php-dengan-framework-code-igniter
PDF
Php dgn framework code ignitier
PDF
Php dgn frame work code ignitier
Belajar Framework CodeIgnitier Lengkap (bahasa Indonesia)
Belajar framework code igniter xii rpl
CRUD pada Android Studio menggunakan MySQL
Belajar php dengan framework code igniter3
Belajar php-dengan-framework-code-igniter
Belajar php-dengan-framework-code-igniter
Php dgn framework code ignitier
Php dgn frame work code ignitier

Similar to Modul praktikum Pemrograman web Backend dengan Codeigniter dan LTE (20)

PDF
Jamal aplikasicrud
PDF
Tutorial ci
PDF
Yii2 fundamentals bagian 1
PDF
Belajar php-dengan-framework-code-igniter1
PDF
Tutorial ci
PPTX
Web templating
PPTX
Web templating
PDF
Modul 02 CRUD CI 3.pdf
PDF
Modul 02 CRUD CI 3.pdf
PPTX
PPT Pertemuan 06 Web Developer VSGA DTS 2022.pptx
DOCX
pemrograman internet
PDF
Laravel 5 Tutorial : Membuat Blog Sederhana dengan Laravel 5.3
PPTX
Laravel Basic Development
PDF
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
DOCX
E commerce dengan php mysql
PDF
Belajar kilat asp.net
PDF
Php CMS tutorial
PDF
Php tutorial-17
PDF
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
PDF
Modul web php
Jamal aplikasicrud
Tutorial ci
Yii2 fundamentals bagian 1
Belajar php-dengan-framework-code-igniter1
Tutorial ci
Web templating
Web templating
Modul 02 CRUD CI 3.pdf
Modul 02 CRUD CI 3.pdf
PPT Pertemuan 06 Web Developer VSGA DTS 2022.pptx
pemrograman internet
Laravel 5 Tutorial : Membuat Blog Sederhana dengan Laravel 5.3
Laravel Basic Development
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
E commerce dengan php mysql
Belajar kilat asp.net
Php CMS tutorial
Php tutorial-17
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Modul web php
Ad

More from Igun (20)

PDF
Developing Systems Application Based on Android as Tool for Determinant Stunt...
PDF
Bahan Ajar Basis Data
PDF
Bahan Ajar Praktikum Basisdata
PDF
Praktikum Jaringan Komputer zeroshell
PDF
Bahan Ajar Sistem Game
PDF
Bahan Ajar Sistem Game
PDF
Modul Praktikum Algoritma dan Pemrograman Visual Basic net
PDF
Modul praktikum Pemrograman Frontend dengan Code Igniter dan Bootstrap
PDF
Modul praktikum Basisdata
PDF
Modul Bahasa Assembly
PDF
Bahan Ajar Keamanan Komputer dan Jaringan
PDF
Modul Perkuliahan Bahasa Assembly
PDF
Modul Praktikum Jaringan Komputer
PDF
Modul Praktikum Assembly
PDF
Bahan Ajar Pemrograman Assembly
PDF
Bahan Ajar Sistem Game menggunakan Scratch
PDF
Bahan Ajar Keamanan Informasi dan Jaringan
PDF
Decision Support System for Determination of Scholarship Using Scratch Progra...
PDF
Developing systems application based on android as tool for determinant stunt...
PDF
Buku Infografis Sirah Nabawiyah Sejarah Nabi Muhammad SAW
Developing Systems Application Based on Android as Tool for Determinant Stunt...
Bahan Ajar Basis Data
Bahan Ajar Praktikum Basisdata
Praktikum Jaringan Komputer zeroshell
Bahan Ajar Sistem Game
Bahan Ajar Sistem Game
Modul Praktikum Algoritma dan Pemrograman Visual Basic net
Modul praktikum Pemrograman Frontend dengan Code Igniter dan Bootstrap
Modul praktikum Basisdata
Modul Bahasa Assembly
Bahan Ajar Keamanan Komputer dan Jaringan
Modul Perkuliahan Bahasa Assembly
Modul Praktikum Jaringan Komputer
Modul Praktikum Assembly
Bahan Ajar Pemrograman Assembly
Bahan Ajar Sistem Game menggunakan Scratch
Bahan Ajar Keamanan Informasi dan Jaringan
Decision Support System for Determination of Scholarship Using Scratch Progra...
Developing systems application based on android as tool for determinant stunt...
Buku Infografis Sirah Nabawiyah Sejarah Nabi Muhammad SAW
Ad

Modul praktikum Pemrograman web Backend dengan Codeigniter dan LTE

  • 1. Dosen : Indra Gunawan, ST., M.Kom., CEH., CHFI MODUL PRAKTIKUM WEB MEMBUAT APLIKASI WEB DENGAN CODEIGNITER PHP FRAMEWORK + LTE BOOTSRAP + GROCERYCRUD Untuk kalangan sendiri SEKOLAH TINGGI TEKNIK IBNU SINA BATAM
  • 2. 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
  • 3. MODUL PRAKTIKUM PEMROGRAMAN WEB 2 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 4. Hilangkan tanda # pada baris-baris dibawah ini untuk mengaktifkan fitur • 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>
  • 4. 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;
  • 5. MODUL PRAKTIKUM PEMROGRAMAN WEB 4 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1>
  • 6. MODUL PRAKTIKUM PEMROGRAMAN WEB 5 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright © W3Schools.com </div> </body> </html>
  • 7. 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; }
  • 8. 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;
  • 9. 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;
  • 10. 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
  • 11. 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>"; ?>
  • 12. 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.
  • 13. 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
  • 14. 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(); ?>
  • 15. MODUL PRAKTIKUM PEMROGRAMAN WEB 14 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 6 MEMBANGUN APLIKASI WEB DENGAN CI PHP FRAMEWORK 6.1 CODE IGNITER FRAMEWORK
  • 16. MODUL PRAKTIKUM PEMROGRAMAN WEB 15 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 6.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 6.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
  • 17. MODUL PRAKTIKUM PEMROGRAMAN WEB 16 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: 6.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.
  • 18. MODUL PRAKTIKUM PEMROGRAMAN WEB 17 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 }
  • 19. MODUL PRAKTIKUM PEMROGRAMAN WEB 18 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM } 2. Membuat View Berikut adalah isi dari /codeigniter/application/view/home.php <!DOCTYPE html> <html><head><title>Website ku</title><link rel="stylesheet" type="text/css" href="localhost/assets/style.css"></head> <body> <div id="container"> <div id="image"></div> <div id="header"> <ul> <li><a href="http://localhost/codeigniter/">Home</a></li> <li><a href="http://localhost/codeigniter/index.php/main/kuliah">Kuliah</a></li> <li><a href="http://localhost/codeigniter/index.php/main/kerja">Kerja</a></li> <li><a href="http://localhost/codeigniter/index.php/main/aboutme">About Me</a></li> <li><a href="http://localhost/codeigniter/index.php/main/contact">Contact</a></li> </ul> </div> <div id="nav"> <ul> <li><a href="http://localhost/codeigniter/">Home</a></li> <li><a href="http://localhost/codeigniter/index.php/main/kuliah">Kuliah</a></li> <li><a href="http://localhost/codeigniter/index.php/main/kerja">Kerja</a></li> <li><a href="http://localhost/codeigniter/index.php/main/aboutme">About Me</a></li> <li><a href="http://localhost/codeigniter/index.php/main/contact">Contact</a></li> </ul> </div> <div id="section"> <h1>Web pertamaku</h1> <h2>Ini adalah web pertamaku dengan CodeIgniter Framework</h2> </div> <div id="footer">Copyright &copy; STT-Ibnu Sina Batam.</div> </div> </body> </html> Isi dari keempat file lainnya (kuliah.php, kerja.php, aboutme.php, contact.php) adalah sama tinggal diganti didalam div section nya disesuaikan kalimat paragrafnya. Buat folder /assets pada /codeigniter/, isinya style.css dan header.jpg (ambil dr pertemuan 4)
  • 20. MODUL PRAKTIKUM PEMROGRAMAN WEB 19 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 3. Hasil 6.5 WEB TEMPLATING DENGAN LTE 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)
  • 21. MODUL PRAKTIKUM PEMROGRAMAN WEB 20 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 } }
  • 22. MODUL PRAKTIKUM PEMROGRAMAN WEB 21 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);
  • 23. MODUL PRAKTIKUM PEMROGRAMAN WEB 22 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
  • 24. MODUL PRAKTIKUM PEMROGRAMAN WEB 23 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;?> 8. MEMBUAT APLIKASI BERBASIS WEB - CODE IGNITER DAN MYSQL Langkah untuk memulai pada bab ini adalah sebagai berikut :
  • 25. MODUL PRAKTIKUM PEMROGRAMAN WEB 24 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 1. Arahkan browser ke localhost/phpmyadmin 2. Buatlah database baru dengan nama codeigniterdb (hanya contoh, boleh diganti) 3. Membuat table baru Tabel content Tabel login Tabel teman 4. Input data pada table codeigniterdb Isikan datanya seperti dibawah ini dgn mengklik menu insert
  • 26. MODUL PRAKTIKUM PEMROGRAMAN WEB 25 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) {
  • 27. MODUL PRAKTIKUM PEMROGRAMAN WEB 26 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
  • 28. MODUL PRAKTIKUM PEMROGRAMAN WEB 27 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');
  • 29. MODUL PRAKTIKUM PEMROGRAMAN WEB 28 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;
  • 30. MODUL PRAKTIKUM PEMROGRAMAN WEB 29 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
  • 31. MODUL PRAKTIKUM PEMROGRAMAN WEB 30 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'); } }
  • 32. MODUL PRAKTIKUM PEMROGRAMAN WEB 31 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; } }
  • 33. MODUL PRAKTIKUM PEMROGRAMAN WEB 32 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
  • 34. MODUL PRAKTIKUM PEMROGRAMAN WEB 33 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 }
  • 35. MODUL PRAKTIKUM PEMROGRAMAN WEB 34 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'); } } }
  • 36. MODUL PRAKTIKUM PEMROGRAMAN WEB 35 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'); }
  • 37. MODUL PRAKTIKUM PEMROGRAMAN WEB 36 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(); } } }
  • 38. MODUL PRAKTIKUM PEMROGRAMAN WEB 37 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>';
  • 39. MODUL PRAKTIKUM PEMROGRAMAN WEB 38 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);
  • 40. MODUL PRAKTIKUM PEMROGRAMAN WEB 39 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; }
  • 41. MODUL PRAKTIKUM PEMROGRAMAN WEB 40 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; } }
  • 42. MODUL PRAKTIKUM PEMROGRAMAN WEB 41 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()
  • 43. MODUL PRAKTIKUM PEMROGRAMAN WEB 42 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);
  • 44. MODUL PRAKTIKUM PEMROGRAMAN WEB 43 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";
  • 45. MODUL PRAKTIKUM PEMROGRAMAN WEB 44 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM $route['main/teman_delete/:any']="main/teman_delete/:any"; $route['login']="login"; $route['login/login']="login/login"; $route['login/check_login']="login/check_login"; 14. Membuat file-file pada direktori /view header.php content.php footer.php container.php teman.php teman2.php teman_tambah.php teman_edit.php login_views.php home.php aboutme.php kuliah.php kerja.php contactus.php a. header.php <!DOCTYPE html> <html> <head> <title><?php echo $page_title;?></title> <link rel="stylesheet" type="text/css" href="<?php echo $base_url;?>assets/style.css"> </head> <body> <div id="image"> </div> <div id="header"> <ul> <li><a href="<?php echo $base_url;?>main/home">Home</a></li> <li><a href="<?php echo $base_url;?>main/kuliah">Kuliah</a></li> <li><a href="<?php echo $base_url;?>main/kerja">Kerja</a></li> <li><a href="<?php echo $base_url;?>main/contact">Contact</a></li> <li><a href="<?php echo $base_url;?>main/aboutme">About Me</a></li> </ul> </div>
  • 46. MODUL PRAKTIKUM PEMROGRAMAN WEB 45 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM b. content.php <div id="nav"> <ul> <li><a href="<?php echo $base_url;?>main/teman">Daftar nama teman</a></li> <li><a href="<?php echo $base_url;?>main/teman2">Edit Daftar teman</a></li> <li><a href="<?php echo $base_url;?>main/teman_tambah">Tambah teman</a></li> </ul> </div> <div id="kanan"> <div id="garis"><ol><b>Biodata</b></ol></div> <img src="<?php echo $base_url;?>assets/bradpit.jpg" width="200px" height="150px"> <p> Nama : Brad pit<br/> Pekerjaan : Seniman<br/> Negara : Tanjung Pinang<br/> Alamat : Perum Tanjung Pinang permai blok D3 no 10<br/> Hoby : Selfi<br/> </p> <hr> <p align="justify"> Saya adalah seorang seniman asal Tanjung Pinang, Batam, Indonesia. Saya menyukai teater dan musik, saya pernah bermain dalam beberapa film box office. </p> </div> <div id="section"> <?php echo $content;?> </div> <div id="tengah"></div> c. footer.php <div id="footer"> Copyright &copy; STT Ibnu Sina Batam </div> </body> </html> d. container.php <?php echo $header; echo $content; echo $footer; ?>
  • 47. MODUL PRAKTIKUM PEMROGRAMAN WEB 46 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM e. teman.php <?php echo $data;?> f. teman_edit.php <?php foreach ($data as $row) { $id=$row->id; $nama=$row->nama; $alamat=$row->alamat; } ?> <?php echo form_open('main/teman_edit_save/'.$id,array('name'=>'Form Simpan'));?> <fieldset> <legend>Form Edit Teman</legend> <label for="nama">Nama </label> <input type="text" id="nama" name="nama" placeholder="" value="<?php echo $nama;?>"> <br/> <label for="alamat"class="col-lg-4 control-label">Alamat </label> <input type="text" id="alamat" name="alamat" placeholder="" value="<?php echo $alamat;?>"> <br/> </fieldset> <fieldset> <input type="submit" name="submit" value="Save"> </fieldset> </form> g. teman_tambah.php <?php echo form_open('main/teman_tambah_save/',array('name'=>'Form Simpan'));?> <fieldset> <legend>Form Tambah Teman</legend> <label for="nama">Nama </label> <input type="text" id="nama" name="nama" placeholder="" value="Isi Nama Temanmu"> <br/> <label for="alamat"class="col-lg-4 control-label">Alamat </label> <input type="text" id="alamat" name="alamat" placeholder="" value="Isi Alamat Temanmu"> <br/> </fieldset> <fieldset> <input type="submit" name="submit" value="Save"> </fieldset> </form>
  • 48. MODUL PRAKTIKUM PEMROGRAMAN WEB 47 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM h. login_views.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Halaman Login</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <style type="text/css"> body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-signin { max-width: 300px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff; border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin input[type="text"], .form-signin input[type="password"] { font-size: 16px; height: auto; margin-bottom: 15px; padding: 7px 9px; } </style> </head> <body> <div class="container">
  • 49. MODUL PRAKTIKUM PEMROGRAMAN WEB 48 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); ?>
  • 50. MODUL PRAKTIKUM PEMROGRAMAN WEB 49 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
  • 51. MODUL PRAKTIKUM PEMROGRAMAN WEB 50 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); }
  • 52. MODUL PRAKTIKUM PEMROGRAMAN WEB 51 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>
  • 53. MODUL PRAKTIKUM PEMROGRAMAN WEB 52 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM Hasil Akhir
  • 54. MODUL PRAKTIKUM PEMROGRAMAN WEB 53 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 7 TOPIK TERKAIT Untuk membaca topik-topik lainnya seputar dunia pemrograman, jaringan dan keamanan, silakan merujuk ke penelitian saya lainnya (Abdilana & Gunawan, 2022; Berliana dkk., 2022; Gunawan, 2014, 2019, 2020, 2021a, 2021b, 2021c, 2021d, 2021e, 2021f, 2021g; Gunawan dkk., 2018; Gunawan & Yelmi, 2021; Huzaeni & Gunawan, 2022; Indrayana dkk., 2022; Permatasari dkk., 2018; Pratama dkk., 2022; D. C. Purnomo & Gunawan, 2022; D. Purnomo & Gunawan, 2021; Y dkk., 2022)
  • 55. MODUL PRAKTIKUM PEMROGRAMAN WEB 54 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 8 PUSTAKA Abdilana, R., & Gunawan, I. I. (2022). Implementasi Metode SAW dalam Sistem Pendukung Keputusan Pemilihan Smartphone Menggunakan Scratch. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(1), 35–40. Berliana, C. D., Saputra, T. A., & Gunawan, I. (2022). Analisis Serangan dan Keamanan pada Denial of Service (DOS): Sebuah Review Sistematik. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(2), 33–38. Gunawan, I. (2014). I-POLINK: Indonesian Police Link Model Knowledge Management Investigasi Forensika Digital. https://doi.org/10.13140/RG.2.2.28996.32647 Gunawan, I. (2019). PEMROGRAMAN BAHASA ASSEMBLY MIKROPROSESOR 8086 (1 ed.). Guepedia. Gunawan, I. (2020). Optimasi Model Artificial Neural Network untuk Klasifikasi Paket Jaringan. SIMETRIS, 14(2), 1–5. https://doi.org/10.51901/simetris.v14i2.135 Gunawan, I. (2021a). Keamanan Data: Teori dan Implementasi (1 ed.). Jejak. Gunawan, I. (2021b). Analisis Malware Botnet Proteus Pendekatan Static dan Dinamic. SIMETRIS, 15(1), 12–17. https://doi.org/10.51901/simetris.v15i01.172 Gunawan, I. (2021c). Analisis Keamanan Data Pada Website Dengan Wireshark. JES (Jurnal Elektro Smart), 1(1), 16–19. Gunawan, I. (2021d). Analisis Keamanan Jaringan Wifi Menggunakan Wireshark. JES (Jurnal Elektro Smart), 1(1), 10–12. Gunawan, I. (2021e). Analisis Keamanan Wifi Menggunakan Wireshark. JES (Jurnal Elektro Smart), 1(1), 7–9. Gunawan, I. (2021f). Analisis Layer Aplikasi (Protokol HTTP) menggunakan Wireshark. JES (Jurnal Elektro Smart), 1(1), 13–15. Gunawan, I. (2021g). Analisis Keamanan Aplikasi Android Non Playstore Dengan Metode Digital Forensik Pendekatan Statis Dan Dinamis. SIMETRIS, 15(2), 29–34. https://doi.org/10.51901/simetris.v15i2.225 Gunawan, I., Afrina, & Sofrawida, C. (2018). SISTEM PENDUKUNG KEPUTUSAN PEMILIHAN KARYAWAN TERBAIK PADA LAMOIST LAYERS BATAM. JR : Jurnal Responsive Teknik Informatika, 2(02), 39–61. Gunawan, I., & Yelmi, Y. (2021). Rancang Bangun Robot Pengawas Dokumen Berbasis Raspberry Pi2 dengan Pemrograman Python. Jurnal Ilmu Komputer Dan Bisnis, 12(1), 144–149.
  • 56. MODUL PRAKTIKUM PEMROGRAMAN WEB 55 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM Huzaeni, F., & Gunawan, I. I. (2022). Implementasi Metode SAW dalam Sistem Pendukung Keputusan Pemilihan Laptop Menggunakan Scratch. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(1), 30–34. Indrayana, T., Warijan, W., Sutarmi, S., Purnomo, D., & Gunawan, I. (2022). Developing systems application based on android as tool for determinant stunting factors in the COVID-19 pandemic era. International Journal of Health Sciences, 6(S1), 257–268. https://doi.org/10.53730/ijhs.v6nS1.4763 Permatasari, R. D., Gunawan, I., & Syahputra, M. R. (2018). RANCANG BANGUN APLIKASI PENANGANAN BAGASI BERBASIS MOBILE WEB PADA PT SRIWIJAYA AIR. Jurnal Teknik Ibnu Sina (JT-IBSI), 3(1). https://doi.org/10.36352/jt-ibsi.v3i1.101 Pratama, T. I. M., Songida, M. D. F., & Gunawan, I. (2022). Analisis Serangan dan Keamanan pada SQL Injection: Sebuah Review Sistematik. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(2), 27–32. Purnomo, D. C., & Gunawan, I. I. (2022). Penerapan Metode Simple Additive Weighting (SAW) Dalam Sistem Pemilihan Kamera Menggunakan Scratch. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(1), 16–21. Purnomo, D., & Gunawan, I. (2021). Decision Support System for Determination of Scholarship Using Scratch Programming Based on SAW Method. International Journal of Business and Information Technology, 2, 72–29. https://doi.org/10.47927/ijobit.v2i2 Y, A. K., Alfaren, G., & Gunawan, I. (2022). Analisis Serangan Penetration Testing: Sebuah Review Sistematik. JIIFKOM (Jurnal Ilmiah Informatika dan Komputer), 1(2), 21–26.
  • 57. MODUL PRAKTIKUM PEMROGRAMAN WEB 56 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM DAFTAR ISI 1 XAMPP WEB SERVER......................................................................................................... 1 1.1 Instalasi Xampp Web Server :.......................................................................................... 1 1.2 SETUP XAMPP............................................................................................................... 1 2 PENGENALAN HTML ......................................................................................................... 2 2.1 Struktur Utama :............................................................................................................... 2 2.2 Contoh Loyout dengan html :........................................................................................... 3 3 PENGENALAN CSS............................................................................................................. 6 3.1 Struktur utama CSS.......................................................................................................... 6 3.2 cara memanggil file css dalam html................................................................................. 7 3.3 Contoh kode css dasar...................................................................................................... 7 4 PENGENALAN PHP ............................................................................................................ 9 4.1 Penerapan php dalam kode html .................................................................................... 10 4.2 Contoh –contoh script php ............................................................................................. 10 5 PENGENALAN MYSQL.................................................................................................... 11 5.1 PHP DAN MYSQL........................................................................................................ 13 6 MEMBANGUN APLIKASI WEB DENGAN CI PHP FRAMEWORK............................. 14 6.1 Code Igniter Framework ................................................................................................ 14 6.2 Install Codeigniter dasar................................................................................................. 15 1. Extract / Unzip CodeIgniter-3.0.0.zip ke dalam /xampp/htdocs/codeigniter. ............ 15 6.3 Install codeigniter lanjutan............................................................................................. 15 6.4 Membuat web Sederhana dengan Codeigniter............................................................... 16 1. Membuat Controller ................................................................................................... 17 2. Membuat View ........................................................................................................... 18 3. Hasil............................................................................................................................ 19 6.5 Web Templating dengan LTE Bootstrap dan Codeigniter............................................. 19 8. MEMBUAT APLIKASI BERBASIS WEB - Code Igniter dan Mysql ............................ 23 1. Arahkan browser ke localhost/phpmyadmin .............................................................. 24 2. Buatlah database baru dengan nama codeigniterdb (hanya contoh, boleh diganti).... 24 3. Membuat table baru.................................................................................................... 24 4. Input data pada table codeigniterdb............................................................................ 24 5. Membuat Model mainmodel.php ............................................................................... 25
  • 58. MODUL PRAKTIKUM PEMROGRAMAN WEB 57 DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI STT IBNU SINA BATAM 6. Membuat Controller main.php ................................................................................... 32 7. Membuat Controller login.php ................................................................................... 35 8. Mengubah seting config database............................................................................... 37 9. Membuat library template .......................................................................................... 37 10. Membuat Library akses (untuk menangani autentikasi/login) ................................... 41 11. Membuat Library akses (untuk menangani autentikasi/login) ................................... 42 12. Mengubah kode pada autoload (untuk menangani otomatisasi pemanggilan helper/library) ....................................................................................................................... 43 13. Mengubah kode pada routes.php................................................................................ 43 14. Membuat file-file pada direktori /view....................................................................... 44 9. TIPS DAN TRICK (HALAMAN ADMIN INSTANT DENGAN GROCERY CRUD). 50 7 TOPIK TERKAIT................................................................................................................. 53 8 PUSTAKA............................................................................................................................ 54