2 serverroot c:/xampp-win32-1.8.2-4-vc9/xampp/apache · pdf filejika ingin membuat menu yang...

MODUL PRAKTIKUM PEMROGRAMAN WEB 1

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

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. Unzip hasil download di drive C:

2. Jalankan “setup_xampp.bat” di direktori xampp.

3. Jalankan “xampp-control.exe”.

1. Buka file \xampp\php\php.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 \ xampp\apache\conf\httpd.conf

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 “\xampp\htdocs\”

7. Taruh semua file web di direktori “praktikum”

Source :

www.w3schools.com/html/

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a heading</h1>



<p>This is a paragraph.</p>

</body>

</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;



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>



<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>



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/

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

p {

font-family: "Times New Roman";

font-size: 20px;

}



<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

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;



}

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;



padding: 0;

}

li {

display: inline;

}

li {

float: left;

}

a {

display: block;

width: 60px;

}

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



<!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>

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>";

?>



</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

?>

Adalah :

SQL is a standard language for accessing databases.



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



No NPM Nama Jurusan



<?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(); ?>



1. Copy joomla ke directory /xampp/htdocs/joomla

2. Unzip /extract joomla

3. Jalankan xampp server (xampp control panel.exe), pastikan apache dan mysql start warna

hijau

4. Buat database dengan nama sembarang (contoh : joomla) melalui phpmyadmin di

http://localhost/phpmyadmin

5. Panggil instalasi joomla http://localhost/joomla



Halaman admin dapat diakses di http://localhost/joomla/administrator

Halaman web dapat diakses di http://localhost/joomla

Jika ingin membuat menu yang jika di klik menuju ke artikel tertentu, pilih konfigurasi seperti

digambar dibawah ini. Atau sesuaikan dengan yang diinginkan dengan memilih pada menu item

typeAdm

Untuk memilih template-template default yang telah disediakan joomla, klik menu extensions-

template manager. Klik default pada template yang diinginkan

Location Site : Template untuk halaman pengunjung

Location Administrator : Template untuk halaman admin



Modul adalah fasilitas2 yang biasanya tampil di kanan dan kiri halaman web (contoh : modul

search, last article, last comment, tag dll).

Untuk mengaktifkan/menonaktifkan modul bisa diakses di menu Extensions-module manager

Klik New untuk menambahkan modul-modul default lainnya yang telah disediakan joomla

Jika modul yang diinginkan tidak tersedia, dapat di download di website joomla

http://extensions.joomla.org



Plugin pada joomla mirip dengan modul yaitu script kecil yang berfungsi untuk melakukan

pekerjaan2 tambahan yang tidak tersedia pada joomla.

Perbedaan mendasar antara modul dan plugin yaitu, jika modul dapat dipindah2 posisi pada

tampilan web, sedang plugin tidak bisa, contoh (plugin konversi Bahasa, plugin tombol social

media pada setiap article, plugin text editor)

Jika plugin2 yang dibutuhkan tidak tersedia, silahkan download di website joomla

http://extensions.joomla.org



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

1. Ubah setingan pada file /codeigniter/application/config/routes.php

� Baris 52 menjelaskan bahwa file pertama yang dipanggil ketika codeigniter

dijalankan yaitu ‘home.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



<?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:

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.



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 }



}

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 © 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)



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)



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 } }



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);



$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



6. Buka file index.html pada direktori /assets/index.html menggunakan browser, kemudian buka source code nya dgn cara klik kanan halaman web pilih view page source (mozilla).

7. Copy baris 1-94 dari source code diatas, kemudian pastekan ke /codeigniter/application/view/header.php.

8. Copy baris 95 sampai 582 dari source code diatas, kemudian pastekan ke /codeigniter/application/view/content.php.

9. Copy sisanya, baris 583 sampai 693 dari source code diatas, kemudian pastekan ke /codeigniter/application/view/footer.php.

10. Pada ketiga script diatas header.php, content.php, footer.php tambahkan “assets/” setelah src=” dan src=’, (gunakan fitur find replace dengan cara memencet Ctrl+H, isi find dengan src=’ isi replace dengan src=’assets’)

11. Tambahkan script dibawa ini pada baris 583 dibawah <div class="container">

<div class="container"> <?php echo $content;?>

12. Jika sudah benar maka hasil tampilannya sharusnya seperti dibawah ini :

13. Jika diperlukan hapus div-div, kalimat2 yang tidak diinginkan pada ketiga script diatas yang merupakan bawaan template, shingga hanya menyisakan bagian2 yang diinginkan saja.

14. Hasil keseluruhan script contohnya seperti dibawah ini :

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Shym-A Stylish Landing Page Website Template </title> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <link href="localhost/codeigniter2/assets/css/bootstrap.min.css" rel="stylesheet"> <link href="localhost/codeigniter2/assets/css/style.css" rel="stylesheet"> <link href="localhost/codeigniter2/assets/css/owl.carousel.css" rel="stylesheet" type="text/css"> <link href="localhost/codeigniter2/assets/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">  </head> <body>  <div class="shym-preloader"></div>   <header class="navbar navbar-inverse navbar-fixed-top heading" role="banner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle togglebutton" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class='shym-logo'> <img src='localhost/codeigniter2/assets/img/logo-shym.png' alt='Shym'/></a> <ul class='shym-social-icons'> <li><a href="#"><i class="fa fa-twitter"></i></a></li>



<li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-youtube"></i></a></li> </ul> </div> <div class="collapse navbar-collapse menubar"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a href="#" class='dropdown-toggle' data-toggle='dropdown'><i class="fa fa-fw fa-home"></i>Home</a> <ul class="dropdown-menu"> <li> <a href="#">Bootstrap Templates</a></li> <li><a href="#">Single page website </a></li> <li><a href="#">Landing Page</a> <li><a href="#">Admin Templates</a></li> <li><a href="#">Login Page </a></li> </ul> </li> <li class='dropdown'><a href="#" class='dropdown-toggle' data-toggle='dropdown'><i class="fa fa-fw fa-support"></i>Support</a> <ul class='dropdown-menu'> <li><a href="#">Megamenu</a></li> <li><a href="#">Menu Bar</a> <li><a href="#">Accordion</a></li> <li><a href="#">Tabs</a> </li> </ul> <li><a href="#"><i class="fa fa-fw fa-th"></i>Widgets</a></li> <li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i>Recent Works</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-users"></i>Users<i class="icon-angle-down"></i></a> <ul class="dropdown-menu"> <li><a href="#">Career</a></li> <li><a href="#">Blog Single</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">404</a></li> <li><a href="#">Registration</a></li> <li class="divider"></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> </ul> </li> <li><a href="#"><i class="fa fa-fw fa-book"></i>Blog</a></li> </ul> </div>

</div> </header>   <section class='gallery'> <div class="home-caption"> <div class="home-title">ini halaman utama</div> <div class="home-subtitle"> </div> </div> </section>   <section class='shym-option'> <div class='container'> <div class="row"> <div class="col-sm-4 shym-option-container"> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-camera"></i></span> <h3 class="shym-text-uppercase"> Stylish Pictures</h3> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</p> <a href="#" title="">Read More</a> </div> <div class="col-sm-4 shym-option-container"> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-dashboard"></i></span> <h3 class="shym-text-uppercase">Magnificent Colors</h3> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</p> <a href="#" title="">Read More</a> </div> <div class="col-sm-4 shym-option-container"> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-eye"></i></span> <h3 class="shym-text-uppercase">Retina Ready</h3> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</p> <a href="#" title="">Read More</a> </div> </div>

</div> </section>   <section class='shym-application'> <div class='container'> <div class='row'> <div class='col-xs-12 shym-application-data'> <h2 class='shym-text-uppercase'>Perfect Application Support</h2> </div> </div> <div class='row'> <div class='col-xs-12 shym-application-data'> <div class="apps"> <a href="#" data-scroll-reveal="wait 0.25s, then enter left and move 40px over 1s"><i class="fa fa-android"></i></a> <a href="#" data-scroll-reveal="wait 0.25s, then enter right and move 40px over 1s"><i class="fa fa-apple"></i></a> <a href="#" data-scroll-reveal="wait 0.25s, then enter bottom and move 40px over 1s"><i class="fa fa-windows"></i></a> <a href="#" data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-css3"></i></a> </div> </div> </div> </div> </section>   <section class='shym-feature'> <div class='container'> <div class='row'> <div class='col-sm-4 shym-feature-data'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-support"></i></span> </div> <div class='col-xs-9'> <h3>Support</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div>

<div class='col-sm-4 shym-feature-data'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-th"></i></span> </div> <div class='col-xs-9'> <h3>Widgets</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> <div class='col-sm-4'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-laptop"></i></span> </div> <div class='col-xs-9'> <h3>Responsive Design</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> </div>  <div class='row'> <div class='col-sm-4 shym-feature-data'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-bar-chart-o"></i></span> </div> <div class='col-xs-9'> <h3>User Rating</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> <div class='col-sm-4 shym-feature-data'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-users"></i></span> </div> <div class='col-xs-9 '> <h3>Top Users</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div>

<div class='col-sm-4 shym-feature-data'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-table"></i></span> </div> <div class='col-xs-9'> <h3>Data Tables</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> </div>  <div class='row'> <div class='col-sm-4 shym-feature-data'> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-book"></i></span> </div> <div class='col-xs-9 '> <h3>Top Readers</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> <div class='col-sm-4 shym-feature-data '> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-edit"></i></span> </div> <div class='col-xs-9'> <h3>Top Authors</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> <div class='col-sm-4 shym-feature-data '> <div class='col-xs-3 fe-icon'> <span data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s" ><i class="fa fa-clock-o"></i></span> </div> <div class='col-xs-9'> <h3>24h Support</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has. </h3> </div> </div> </div>  </div> </section>   <section class='shym-user'> <div class='container'> <div class='shym-user-title' > <h3 class='shym-text-center shym-text-uppercase'>Best Pictures</h3> <hr> <p class='shym-text-center'>It is a long established fact that a reader will be distracted by the readable content.</p> </div>  <div id="owl-team">  <div class="team"> <div class="img"> <img class="img-responsive" src="localhost/codeigniter2/assets/img/team-1.jpg" alt="" > <div class="over"> <i class="fa fa-eye"></i> <div class="des"> <a href="#"></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer.</p> </div> </div> </div> <div class="info"> <h4>Lorum Ipsum</h4> <p>Price:25$</p> <hr> <div class="social_icons"> <ul> <li class="facebook"> <a href="#."><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#."><i class="fa fa-twitter"></i> </a> </li>

<li class="dribbble"> <a href="#."><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#."><i class="fa fa-google"></i> </a> </li> <li class="linkedin"> <a href="#."><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#."><i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> </div>  <div class="team"> <div class="img"> <img class="img-responsive" src="localhost/codeigniter2/assets/img/team-2.jpg" alt="" > <div class="over"> <i class="fa fa-eye"></i> <div class="des"> <a href="#"></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer.</p> </div> </div> </div> <div class="info"> <h4>Lorum Ipsum</h4> <p>Price:25$</p> <hr> <div class="social_icons"> <ul> <li class="facebook"> <a href="#."><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#."><i class="fa fa-twitter"></i> </a> </li> <li class="dribbble"> <a href="#."><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#."><i class="fa fa-google"></i> </a> </li> <li class="linkedin"> <a href="#."><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#."><i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> </div>  <div class="team"> <div class="img"> <img class="img-responsive" src="localhost/codeigniter2/assets/img/team-3.jpg" alt="" >

<div class="over"> <i class="fa fa-eye"></i> <div class="des"> <a href="#"></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer.</p> </div> </div> </div> <div class="info"> <h4>Lorum Ipsum</h4> <p>Price:25$</p> <hr> <div class="social_icons"> <ul> <li class="facebook"> <a href="#."><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#."><i class="fa fa-twitter"></i> </a> </li> <li class="dribbble"> <a href="#."><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#."><i class="fa fa-google"></i> </a> </li> <li class="linkedin"> <a href="#."><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#."><i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> </div>  <div class="team"> <div class="img"> <img class="img-responsive" src="localhost/codeigniter2/assets/img/team-4.jpg" alt="" > <div class="over"> <i class="fa fa-eye"></i> <div class="des"> <a href="#"></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer.</p> </div> </div> </div> <div class="info"> <h4>Lorum Ipsum</h4> <p>Price:25$</p> <hr> <div class="social_icons"> <ul>

<li class="facebook"> <a href="#."><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#."><i class="fa fa-twitter"></i> </a> </li> <li class="dribbble"> <a href="#."><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#."><i class="fa fa-google"></i> </a> </li> <li class="linkedin"> <a href="#."><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#."><i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> </div>  <div class="team"> <div class="img"> <img class="img-responsive" src="localhost/codeigniter2/assets/img/team-1.jpg" alt="" > <div class="over"> <i class="fa fa-eye"></i> <div class="des"> <a href="#"></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer.</p> </div> </div> </div> <div class="info"> <h4>Lorum Ipsum</h4> <p>Price:25$</p> <hr> <div class="social_icons"> <ul> <li class="facebook"> <a href="#."><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#."><i class="fa fa-twitter"></i> </a> </li> <li class="dribbble"> <a href="#."><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#."><i class="fa fa-google"></i> </a> </li> <li class="linkedin"> <a href="#."><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#."><i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> </div>

<div class="team"> <div class="img"> <img class="img-responsive" src="localhost/codeigniter2/assets/img/team-3.jpg" alt="" > <div class="over"> <i class="fa fa-eye"></i> <div class="des"> <a href="#"></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer.</p> </div> </div> </div> <div class="info"> <h4>Lorum Ipsum</h4> <p>Price:25$</p> <hr> <div class="social_icons"> <ul> <li class="facebook"> <a href="#."><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#."><i class="fa fa-twitter"></i> </a> </li> <li class="dribbble"> <a href="#."><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#."><i class="fa fa-google"></i> </a> </li> <li class="linkedin"> <a href="#."><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#."><i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </section>   <section class='picture-information'> <div class='container'> <div class='row'> <div class='col-md-12 shym-text-center'> <h3 class='shym-text-uppercase'>picture Information</h3>



</div> <div class='gap'> </div> <div class='col-md-12 col-sm-12 col-xs-12'> <div class='col-sm-3 '> <div class='picture-info' data-scroll-reveal="wait 0.25s, then enter right and move 40px over 1s"> <img src='localhost/codeigniter2/assets/img/item1.png'/> <p>There are many variations of passages of Lorem Ipsum available, but the majority.There are many variations of passages of Lorem Ipsum available</p> <div class="shym-overlay"> <div class="shym-picture-detail-inner"> <h3><a href="#">Business theme</a> </h3> <p>There are many variations of passages of Lorem Ipsum available,There are many variations of passages of Lorem Ipsum available but the majority</p> <a href="#" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a> </div> </div> </div> </div> <div class='col-sm-3 '> <div class='picture-info' data-scroll-reveal="wait 0.25s, then enter left and move 40px over 1s"> <img src='localhost/codeigniter2/assets/img/item2.png'/> <p>There are many variations of passages of Lorem Ipsum available, but the majority.There are many variations of passages of Lorem Ipsum available</p> <div class="shym-overlay"> <div class="shym-picture-detail-inner"> <h3><a href="#">Business theme</a> </h3> <p>There are many variations of passages of Lorem Ipsum available.There are many variations of passages of Lorem Ipsum available but the majority</p> <a href="#" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a> </div> </div> </div> </div> <div class='col-sm-3'> <div class='picture-info' data-scroll-reveal="wait 0.25s, then enter bottom and move 40px over 1s"> <img src='localhost/codeigniter2/assets/img/item3.png'/> <p>There are many variations of passages of Lorem Ipsum available.There are many variations of passages of Lorem Ipsum available but the majority</p> <div class="shym-overlay"> <div class="shym-picture-detail-inner"> <h3><a href="#">Business theme</a> </h3>

<p>There are many variations of passages of Lorem Ipsum available, but the majority.There are many variations of passages of Lorem Ipsum available</p> <a href="#" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a> </div> </div> </div> </div> <div class='col-sm-3'> <div class='picture-info' data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"> <img src='localhost/codeigniter2/assets/img/item4.png'/> <p>There are many variations of passages of Lorem Ipsum available. There are many variations of passages of Lorem Ipsum available, but the majority</p> <div class="shym-overlay"> <div class="shym-picture-detail-inner"> <h3><a href="#">Business theme</a> </h3> <p>There are many variations of passages of Lorem Ipsum available, but the majority</p> <a href="#" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a> </div> </div> </div> </div> </div> </div> </div> </section>   <section class='quote'> <div class='container'> <div class='row'> <div class='col-md-12 col-sm-12 col-xs-12'> <div class='col-sm-10 col-xs-10 pull-left'> <h3 class='shym-text-left'>Have a question or need a custom quote?</h3> <p class='shym-text-left' >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +0123 456 70 80</p></div><div class=' col-sm-2 '><button class='btn btn-warning pull-right ' style='margin-top:50px;'>Quote</button></div> </div> </div> </div> </section>  <footer class="shym-contact"> <div class="container">

<?php echo $content;?>

<div class="tittle"> <h3 class='shym-text-center'>Get ın touch</h3> <hr> <p class='shym-text-center'>It is a long established fact that a reader will be distracted by the readable content.</p> </div>  <div class="social_icons"> <ul> <li class="facebook"> <a href="#." data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a href="#." data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-twitter"></i> </a> </li> <li class="dribbble"> <a href="#." data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-dribbble"></i> </a> </li> <li class="googleplus"> <a href="#." data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-google"></i> </a> </li> <li class="linkedin "> <a href="#." data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-linkedin"></i> </a> </li> <li class="pinterest"> <a href="#." data-scroll-reveal="wait 0.25s, then enter top and move 40px over 1s"><i class="fa fa-pinterest"></i> </a> </li> </ul> </div>  <div class="con-info"> <div class="row"> <div class='container'> <div class="col-md-6 col-sm-6"> <div class="row"> <div class="col-sm-6"> <i class="ion-flag"></i> <h4>ABOUT US</h4> <p> Temporibus autem quisbusdam et aut officiis debitis aut rerum nece sitatibus sape eveniet ut et voluptate rerum. </p> </div>  <div class="col-sm-6"> <i class="ion-android-location"></i> <h4>OFFICE ADRESS</h4> <p> Shym Center Adress</p> <p>+1 (000)-999-0000</p> <p> Kottayam Kerala. India</p> <p> [email protected] </p> </div> </div>

</div>  <div class="col-md-6 col-sm-6"> <i class="ion-flag"></i> <h4>GET IN TOUCH</h4> <div id="contact_form"> <form id="contact-form" class="contact-form " accept-charset="utf-8" method="post" > <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label><span>Name</span> <input name="name" type="text" placeholder="Name"/> </label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label> <input name="email" type="email" placeholder="Email"/> </label> </div> </div> <div class="col-md-12"> <label> <span>Message</span> <textarea name="message" placeholder="Your Message"></textarea> </label> <input name="submit" type="submit" value="SUBMIT YOUR MESSAGE" /> </div> </div> </form> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> <div class="copyrights"> <div class="container"> <p class="pull-left">© 2014 Scriptcafe.in</p> <p class="pull-right">App Landing Page Designed and Developed by <a href='http://www.scriptcafe.in'>Scriptcafe.in </a></p> </div> </footer> <script src="localhost/codeigniter2/assets/js/jquery.js"></script> <script src="localhost/codeigniter2/assets/js/bootstrap.min.js"></script>



Tabel login

Tabel teman

Isikan datanya seperti dibawah ini dgn mengklik menu insert



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) {



//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



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');



$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;



} } 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



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'); } }



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; } }



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



} 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 }



//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'); } } }



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'); }



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[30]');

$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(); } } }



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 );

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>';



$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);



$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; }



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; } }



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()



{ 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'); } }

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() { 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'); } }

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');

$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"; $route['main/teman_delete/:any']="main/teman_delete/:any"; $route['login']="login";



$route['login/login']="login/login"; $route['login/check_login']="login/check_login";

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

<!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>



<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>

<div id="footer"> Copyright © STT Ibnu Sina Batam </div> </body> </html>

<?php echo $header; echo $content; echo $footer; ?>

<?php echo $data;?>



<?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>

<?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>

<!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"> <?php echo

form_open('login/check_login',array('method'=>'post','name'=>'login_form','class'=>'form-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>

<?php echo($data); ?>







Username : [email protected]

Pasword : 8cb2237d0679ca88db6464eac60da96345513964 (hasil sha1)

Name : Latihan

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); }



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>

Hasil Akhir



SELESAI



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 PENGENALAN CONTENT MANAGEMENT SYSTEM (CMS) ....................................... 14

6.1 Instalasi Joomla CMS ......................................................................................................... 14

6.2 Halaman admin .................................................................................................................... 16

6.3 Pembuatan menu ................................................................................................................. 16

6.4 Instalasi /konfigurasi template/theme/style ....................................................................... 16

6.5 konfigurasi modul ................................................................................................................ 17

6.6 konfigurasi plugin ................................................................................................................ 18

7 MEMBANGUN APLIKASI WEB DENGAN PHP FRAMEWORK .................................... 19



7.1 Code Igniter Framework ..................................................................................................... 19

7.2 Install Codeigniter dasar ..................................................................................................... 20

1. Extract / Unzip CodeIgniter-3.0.0.zip ke dalam /xampp/htdocs/codeigniter. ............. 20

7.3 Install codeigniter lanjutan .................................................................................................. 20

7.4 Membuat web Sederhana dengan Codeigniter .................................................................. 21

1. Membuat Controller ........................................................................................................ 22

2. Membuat View ................................................................................................................ 23

3. Hasil .................................................................................................................................. 24

7.5 Web Templating dengan Bootstrap dan Codeigniter ........................................................ 24

8. MEMBUAT APLIKASI BERBASIS WEB - Code Igniter dan Mysql .............................. 44

1. Arahkan browser ke localhost/phpmyadmin ................................................................. 44

2. Buatlah database baru dengan nama codeigniterdb (hanya contoh, boleh diganti) .... 44

3. Membuat table baru ......................................................................................................... 44

4. Input data pada table codeigniterdb ................................................................................ 45

5. Membuat Model mainmodel.php ................................................................................... 46

6. Membuat Controller main.php ........................................................................................ 53

7. Membuat Controller login.php ....................................................................................... 56

8. Mengubah seting config database................................................................................... 58

9. Membuat library template ............................................................................................... 58

10. Membuat Library akses (untuk menangani autentikasi/login) ..................................... 62

11. Membuat Library akses (untuk menangani autentikasi/login) ..................................... 63

12. Mengubah kode pada autoload (untuk menangani otomatisasi pemanggilan helper/library) ............................................................................................................................. 64

13. Mengubah kode pada routes.php .................................................................................... 64

14. Membuat file-file pada direktori /view .......................................................................... 65

9. TIPS DAN TRICK (HALAMAN ADMIN INSTANT DENGAN GROCERY CRUD) . 70

��

2 serverroot c:/xampp-win32-1.8.2-4-vc9/xampp/apache · pdf filejika ingin membuat menu yang...

Documents