Praktikum Codeigniter Dasar

Praktikum CodeIgniter
12 RPL 2 SMKN 6 Malang
HP [Date] [Course title]

Praktikanlah langkah langkah dibawah ini
1. Download Codeigniter 3 pada link berikut https://codeigniter.com/download
2. Ekstrak Codeigniter yang telah terdownload dan isi paket dari Codeigniter yakni
3. Copykan folder Codeigniter ke htdocs pada XAMPP atau pada folder www pada I Code Go
4. Nyalakan XAMPP dan hidupkan Apache dan MySQL

(I Code Go menyalakan Apache Web Server dan Mysql Database Server)
5. Setelah itu akses folder yang ada pada folder htdocs dan akan muncul seperti dibawah ini. Dan
CodeIgniter telah sukses berjalan di aplikasi Anda (http://localhost/Codeigniter/)
(Menggunakan I Code Go menggunakan http://localhost:8080/Codeigniter/)
Konfigurasi Codeigniter
Walaupun CodeIgniter dapat berjalan dengan konfigurasi default, tetapi untuk sebuah aplikasi
yang nyata kita harus tetap melakukan konfigurasi, setidaknya pada bagian base_url dan router.
Pengaturan base_url dan router sangat berguna ketika proses pengembangan aplikasi yang banyak
menggunakan helper dan library.
File konfigurasi terletak dalam folder application/config. File yang terdapat pada direktori
tersebut yang sering digunakan adalah file autoload.php, config.php, database.php dan routes.php
(Konfigurasi melalui I-Code-Go tetap sama ikuti panduan berikut)
Autoload.php
1. Konfigurasi Autoload.php seperti gambar dibawah ini

loading terhadap library yang kita inginkan pada controller dimana library ini akan digunakan.
Biasanya library ini di-load pada konstruktor dari controller yang bersangkutan.
Config.php
Konfigurasikan file Config.php Seperti langkah langkah dibawah ini
$config[‘base_url’] – Konfigurasi ini berisi alamat url sebuah aplikasi yang dibuat. Pada tutorial
sebelumnya instalasi CodeIgniter di folder “C:xampp/htdocs/codeigniter” maka untuk konfigurasi
base url-nya adalah seperti berikut.
Database.php
Digunakan untuk konfigurasi koneksi ke database MySQL dan konfigurasikan seperti langkah
langkah berikut
Hostname: menggunakan localhost karena di sini kita menggunakan database mysql dari
aplikasi xampp yang terinstal di computer local.
Username: secara default username database mysql dari aplikasi xampp adalah root.
Password: secara default ini bisa dikosongi.
Database: ini berisikan nama database yang dibuat untuk aplikasi
Routes.php
routing digunakan untuk memetakan permintaan atau request kedalam controller didalam
website yang dibuat. Misalnya kita membuka alamat http://www.nama-website.com, permintaan
tersebut tidak menyertakan nama controller yang ingin dibuka tetapi kita bisa secara default
mengarahkannya agar secara otomatis akan membuka controller sesuai yang definisikan.
Lakukan konfigurasi Routes.php seperti berikut ini

Setelah melakukan Konfigurasi pada Codeigniter Sekarang kita praktik kan langkah-langkah sebagai
berikut
1. Langkah pertama yang harus dilakukan adalah membuat file controller pada
application/controller lalu berinama filenya Login.php dan copykan script seperti dibawah ini
<?php
class Login extends CI_Controller{

public function __construct()
{
parent::__construct();
$this->load->library('session');
}
public function index()
{
$user = $this->input->post('username');
$pass = $this->input->post('password');
if($user == 'admin' && $pass == '123') Password

{
$this->session->set_userdata('username', $user);
redirect('login/admin_page','refresh');
}
else{
$this->load->view('/login/index');
}
}
public function admin_page()
{
$this->load->view('login/admin_page');
}
public function logout()

{
$this->load->view('login/index');
}
}
2. Selanjutnya langkah yang harus dilakukan yakni membuat folder login pada folder view pada
application/view lalu kita buat file didalam folder login dan berinama filenya Index.php dan
copykan script seperti dibawah ini
Folder Login didalam Folder View
Dan buat file Index.php didalam folder login dan copykan script berikut
<!DOCTYPE HTML>
<head>
<title> Login</title>
<link rel="stylesheet" href="<?php echo base_url();
?>assets/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* Full-width input fields */

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */

button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */

.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom
and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */

.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */

.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header"> <center> Form Register
</div>
<div class="card-body">
<?php
if($this->session->flashdata('error') !='')
{
echo '<div class="alert alert-danger" role="alert">';
echo $this->session->flashdata('error');
echo '</div>';
}
?>
<form action="" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" name="username"
placeholder="Enter Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary"
value="login">Login</button>



</form>
</body>
3. Masih didalam folder Login sekarang buat file baru dengan nama admin_page.php dan
copykan script dibawah ini
<!DOCTYPE HTML>
<head>
<title>Halaman Admin</title>
<style type="text/css">
body {
backgroun-color:#fff;
font-family: Lucida Grande, Verdana, Sans-serif;
margin:40px;
font-size:14px;
color: #4f55155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
border-bottom: 1px solid #d0d0d0;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px;
padding: 5px 0 6px 0;
}
</style>
</head>
</head>
<body>

<p> HI, <?php echo $this-> session-> userdata('username')?></p>
<a href="<?php echo site_url('login/logout')?>">Logout</a>
<h1>Form </h1>
<p>Silahkan pilih menu dibawah ini :</p>
</body>
</html>
Maka Tampilan akan seperti gambar berikut ketika dibuka
http://localhost/CI3/index.php/login/ (Perlu diingat ketika kalian menggunakan I-Code-Go

kalian harus menambahkan :8080 menjadi http://localhost:8080/CI3/index.php/login/
Ketika memasukan username dan password (Admin) Password (123)

Membuat Calculator dengan Codeigniter
Praktikkanlah langkah langkah praktikum dibawah ini
1. Langkah pertama yang harus dilakukan adalah membuat file controller pada
application/controller lalu berinama filenya Calc.php dan copykan script seperti dibawah ini
2. <?php
class Calc extends CI_Controller{
public function __construct(){
parent::__construct();
$this->load->helper(array('url','form')); //mengambil helper yang
sudah disediakan CI
}
public function index()
{
$this->load->view("hello"); //maksudanya menampilkan file
hello.php yg difolder view
}
public function perkalian() //membuat function perkalian
{
$this->load->library('form_validation'); //mengambil validasi di
library yg sudah disediakan CI
$this->form_validation->set_rules('v1','Variabel
1','required|integer');
$this->form_validation->set_rules('v2','Variabel
2','required|integer');
if ($this->form_validation->run())
{
$data['v1']=(int)$this->input->post('v1',true); //mengambil
nilai yg dimasukan
$data['v2']=(int)$this->input->post('v2',true); //mengambil
nilai yg dimasukan
$data['hasil']=$data['v1']*$data['v2']; //proses data
}
else
{
$data['v1']=0;
$data['v2']=0;
$data['hasil']=0;
}
$this->load->view('/login/perkalian',$data); //menampilkan hasil
proses data
}
public function pertambahan()
{
$data['v1']=(int)$this->input->post('v1',true);
$data['hasil']=$data['v1']+$data['v2'];;
$this->load->view('/login/pertambahan',$data);
}
public function pengurangan()
{
$data['hasil']=$data['v1']-$data['v2'];;
$this->load->view('/login/pengurangan',$data);
}
public function pembagian()
{
if ($data['v2']>0)
$data['hasil']=$data['v1']/$data['v2'];
else
$data['hasil']='Error, v2 tidak boleh 0 !';
$this->load->view('/login/pembagian',$data);
}
}
2. Tambahkan script berikut didalam file admin_page.php

<h1>Kalkulator </h1>
<p>Silahkan pilih menu dibawah ini :</p>
<ul>
<li><?php echo anchor('calc/perkalian','Perkalian'); ?></li>
<li><?php echo anchor('calc/pembagian','Pembagian'); ?></li>
<li><?php echo anchor('calc/pertambahan','Pertambahan'); ?></li>
<li><?php echo anchor('calc/pengurangan','Pengurangan'); ?></li>
</ul>
3. Didalam folder login buat 4 file yakni perkalian.php, pembagian.php, pertambahan.php,

pengurangan.php
Perkalian.php
Masukan Script dibawah ini pada file perkalian.php
<html>
<head>
<title>Calculator Codeigniter</title>
body {
background-color:#fff;
margin:40px;
font-size:14px;
color: #4f55155;
}
a {
color: #003399;
}
h1 {
color: #444;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px;
}
</style>
</head>
<body>
<h1>Perkalian </h1>
<p>Silahkan masukan data berikut :</p>
<ul>
<?php echo form_open('calc/perkalian'); ?>
<?php echo form_input('v1',$v1); ?> x
<?php echo form_input('v2',$v2); ?> <br>
<p><?php echo validation_errors();?></p>
<?php echo form_submit('submit','Hitung'); ?>

<?php echo form_close(); ?> <br>
Hasil : <?php echo $hasil; ?>

</ul>
<p><?php echo anchor('/login/admin_page','Home'); ?></p>
</body>
</html>
Pembagian.php
Setelah perkalian.php terbentuk buat file didalam folder login dan berinama pembagian.php dan
tuliskan script berikut
<html>
<head>
body {
margin:40px;
font-size:14px;
color: #4f55155;
}
a {
color: #003399;
}
h1 {
color: #444;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px;
}
</style>
</head>
<body>
<h1>Pembagian </h1>
<ul>
<?php echo form_open('Calc/pembagian'); ?>
<?php echo form_input('v1',$v1); ?> :


</ul>
<p> Page endered in {elapsed_time} second </p>
</body>
</html>
Pengurangan.php
Setelah form pembagian.php telah terbentuk sekarang buat file didalam folder login dan berinama
dengan pengurangan.php
<html>
<head>
body {
margin:40px;
font-size:14px;
color: #4f55155;
}
a {
color: #003399;
}
h1 {
color: #444;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px;
}
</style>
</head>
<body>
<h1>Pengurangan </h1>
<ul>
<?php echo form_open('calc/pengurangan'); ?>
<?php echo form_input('v1',$v1); ?> -


</ul>
</body>
</html>
Pertambahan.php
Setelah file pengurangan.php selesai dibuat buat file didalam folder login dan berinama dengan
pertambahan.php dan copykan script dibawah ini
<html>
<head>
body {
margin:40px;
font-size:14px;
color: #4f55155;
}
a {
color: #003399;
}
h1 {
color: #444;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px;
}
</style>
</head>
<body>
<h1>Pertambahan </h1>
<ul>
<?php echo form_open('calc/pertambahan'); ?>
<?php echo form_input('v1',$v1); ?> +


</ul>
</body>
</html>
Hasil praktikum ke II:
Halaman setelah login
Perkalian
Pembagian
Pengurangan
Pertambahan

Praktikum Codeigniter Dasar

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum Codeigniter Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

Praktikum CodeIgniter

12 RPL 2 SMKN 6 Malang

HP [Date] [Course title]

4. Nyalakan XAMPP dan hidupkan Apache dan MySQL

(Konfigurasi melalui I-Code-Go tetap sama ikuti panduan berikut)

1. Konfigurasi Autoload.php seperti gambar dibawah ini

Lakukan konfigurasi Routes.php seperti berikut ini

class Login extends CI_Controller{

if($user == 'admin' && $pass == '123') Password

public function logout()

/* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */

/* Center the image and position the close button */

/* The Modal (background) */

/* The Close Button (x) */

/* Add Zoom Animation */

Maka Tampilan akan seperti gambar berikut ketika dibuka

http://localhost/CI3/index.php/login/ (Perlu diingat ketika kalian menggunakan I-Code-Go

Ketika memasukan username dan password (Admin) Password (123)

2. Tambahkan script berikut didalam file admin_page.php

3. Didalam folder login buat 4 file yakni perkalian.php, pembagian.php, pertambahan.php,

<?php echo form_submit('submit','Hitung'); ?>

Hasil : <?php echo $hasil; ?>

<p><?php echo anchor('/login/admin_page','Home'); ?></p>

<?php echo form_submit('submit','Hitung'); ?>

Hasil : <?php echo $hasil; ?>

<?php echo form_submit('submit','Hitung'); ?>

Hasil : <?php echo $hasil; ?>

<?php echo form_submit('submit','Hitung'); ?>

Hasil : <?php echo $hasil; ?>

Anda mungkin juga menyukai