• Tidak ada hasil yang ditemukan

Framework CodeIgniter telah menyiapkan beberapa libraries yang dapat dilihat direktori system/libraries. Untuk menggunakan libraries dapat dipanggil pada di setiap controller seperti bawah ini:

public function __construct(){

parent::__construct();

$this->load->library(array('form_validation','session', pdf,PHPExel, email));

}

4 Akan tetapi alangkah baiknya dipanggil di file autoload.php, sehingga kita tidak perlu mengatur panggilan libraries di controller. Direktori file autoload.php berada di /application/config/autoload.php, dan panggil library seperti di bawah ini :

$autoload['libraries'] =

array('database','form_validation','pdf','session','email',’PHPExcel’)

3 Instalasi Materilized dan Jquery

1. Download Materialized dari https://materializecss.com/getting-started.html 2. Buat folder assets untuk penyimpan framework css dan js di direktori aplikasi

seperti penjualan/.

3. Ekstrak pada direktori aplikasi penjualan/assets.

4. Sekarang direktori aplikasi Anda akan memiliki folder css/, fonts/, dan js/.

5. Download jQuery dari http://jquery.com/download/.

6. Simpan file jQuery pada direktori js/.

7. Materilized dan jQuery siap untuk digunakan pada aplikasi.

4 Perbedaan Materialized dan Bootstrap

Perbedaan materialized dan bootrstrap sebagai berikut

Materialized Bootstrap

Efek lebih bagus Efek kurang bagus

Fitur Sedikit Fitur Banyak

Tampilan lebih Modern Tampilan biasa

Lebih cocok untuk tampilan user Lebih cocok untuk tampilan ke admin

5 Instalasi Library PHPExcel

PHPExcel adalah library PHP yang digunakan untuk mengekspor data pada aplikasi menjadi sebuah file. Dalam kasus ini, kita akan mengekspor data ke dalam sebuah file berekstensi *.xlsx. Berikut merupakan cara instalasi library PHPExcel pada CodeIgniter:

1. Download PHPExcel https://github.com/PHPOffice/PHPExcel/tree/1.8/Classes.

2. Ekstrak dan simpan pada direktori application/libraries.

3. Untuk memanggil library-library PHPExcel dapat menggunakan sintaks berikut

5 6 Instalisasi Libarary domPDF

Dompdf merupakan salah satu pustaka PHP untuk membuat PDF. Export PDF ini akan digunakan ketika membuat laporan dengan file PHP. Berikut langkah untuk instalisasi library domPDF:

1. Download di http://code.google.com/p/dompdf/downloads/list 2. Ekstrak dan simpan pada direktori application/libraries.

3. Tambahkan file pdf.php untuk memudahkan dalam memanggil library pada autoload.php. Berikut script untuk pdf.php dan simpan di direktori

application/libraries.

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

require_once(dirname(__FILE__) . '/dompdf/dompdf_config.inc.php');

class Pdf extends DOMPDF {

protected function ci() {

return get_instance();

}

public function load_view($view, $data = array()) {

$html = $this->ci()->load->view($view, $data, TRUE);

$this->load_html($html);

} }

7 Instalisasi Chart

Chart akan digunakan untuk membuat satatistik penjualan. Berikut langkah untuk instalisasi Chart.js :

1. Download chart,js di https://github.com/chartjs/Chart.js 2. Ekstrak dan simpan pada direktori assets/js.

8 Membuat Program Sederhana

Dalam tutorial ini akan mengimplementasikan aplikasi menggunakan desaign Materilezed di Framework CodeIgniter. Adapun langkah-langkah untuk membuat program sederhana sebagai berikut :

6 8.1 Membuat Database

Langkah pertama membuat database untuk hak akses atau login dan menyiapkan beberapa tabel untuk keperluan program sederhana. Berikut source code untuk membuat database yang bisa diterapkan dalam sql.

CREATE DATABASE dbpenjualan;

USE dbpenjualan;

CREATE TABLE user(

idUser char(3) PRIMARY KEY, nama varchar(30) NOT NULL, email varchar(30) NOT NULL, password varchar(35) NOT NULL, level varchar(8) NOT NULL );

CREATE TABLE barang(

idBarang char(3) PRIMARY KEY, namaBarang varchar(30) NOT NULL, harga double NOT NULL,

stok int(5) NOT NULL, foto varchar(30) );

CREATE TABLE penjualan(

idPenjualan char(3) PRIMARY KEY, idBarang char(3) NOT NULL,

tglTransaksi date NOT NULL, qty int(3) NOT NULL,

idUser char(3),

FOREIGN KEY (`idBarang`) REFERENCES `barang`(`idBarang`), FOREIGN KEY (`idUser`) REFERENCES `user`(`idUser`)

);

CREATE TABLE member(

idMember int(3) AUTO_INCREMENT PRIMARY KEY, nama varchar(25) NOT NULL,

jk varchar(10), alamat varchar(25) );

INSERT INTO user VALUES

('A01','Admin','[email protected]',md5('admin'),'Admin'),

('P01','Petugas','[email protected]',md5('petugas'),'Petugas');

7 Sehingga skema relasi tabel seperti berikut :

8.1.1 Koneksi Database

Langkah untuk koneksi database di CodeIgniter yaitu diatur dalam file database.php yang terdapat pada direktori application/config/database.php dan tambahkan hostname, username, password (opsional), dan nama database. Dalam aplikasi tutorial ini menggunkan mysqli. Contoh konfigurasi atau koneksi database dapat dilihat pada script di bawah ini:

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost', 'username' => 'root', 'password' => '',

'database' => 'dbpenjualan', 'dbdriver' => 'mysqli', 'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE,

'cachedir' => '', 'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci', 'swap_pre' => '',

'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );

8 8.2 Membuat From Login

From login merupakan proses untuk mengakses komputer dengan memasukkan identitas dari akun pengguna dan password guna mendapatkan hak akses aplikasi komputer.

8.2.1 Model

Langkah pertama membuat model user untuk login, model user untuk hak akses login yang berisi query sql login. Buatlah file M_user.php di direktori application/model/ dan script query login sebagai berikut:

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

class m_user extends CI_Model{

//Login

function getEmailUser($email){

$this->db->select('*');

$this->db->from('user');

$this->db->where('email', $email);

$query = $this->db->get();

return $query;

}

function getPassUser($password){

$this->db->select('*');

$this->db->from('user');

$this->db->where('password', $password);

$query = $this->db->get();

return $query;

} }

?>

Penjelasan script diatas sebagai berikut:

- Nama file dan nama class harus sama, tidak case sensitive.

- Nama class akan digunakan dalam ketika pemanggilan model.

8.2.2 View

Langkah selanjutya yaitu membuat tampilan login. Buatlah file login.php di direktori application/views/ dan isi file login.php sebagai berikut:

9

<html>

<head>

<!—panggil file css-->

<link href="<?php echo base_url(); ?>assets/css/materialize.css"

rel="stylesheet"/>

<link href="<?php echo base_url(); ?>assets/css/materialize.min.css"

rel="stylesheet"/>

<div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">

<form class="form" method="POST" action="<?php echo base_url();?>login/login_act">

<div class="section"></div>

<div class="section"></div>

<script type="text/javascript" src="<?php echo base_url();?>assets/js/materialize.js"></script>

<script type="text/javascript" src="<?php echo

10

base_url();?>assets/js/materialize.min.js"></script>

</body>

</html>

Sehingga hasil dari tampilan login sebagai berikut:

Penjelasan pada script pada tampilan login.php :

<?php if($this->session->flashdata('peringatan')):?>

<p align="center"><font color="red"><i><b><?php echo

$this->session->flashdata('peringatan'); ?></b></i></font></p>

<?php endif;?>

Pada script di atas memberikan sebuah informasi untuk kesalahan masukkan, seperti ‘email tidak ditemukan’, ‘password salah’ dan lain-lain.

<input type='email' name='email' id='email' value="<?php echo set_value('email')?>

11 Pada script di atas, set_value(‘email’), menunjukan, ketika salah dalam masukkan login, maka field email akan terisi yang kita masukkan, sehingga ketika ada kesalahan tidak perlu menulis email dari awal.

8.2.3 Controller

Tahap selanjutnya membuat controller login.php. Buatlah file controller login.php di direktori /apllication/controllers dan script controller untuk login sebagai berikut :

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class login extends CI_Controller {

}elseif($this->session->userdata('level')=='Petugas') { redirect('petugas','refresh');

}elseif($cekEmailUser->num_rows()!=NULL &&

$cekPassUser->num_rows()!=NULL){

12

$data_user['level'] = $data->level;

$this->session->set_userdata($data_user);

if($data->level == "Petugas") { redirect('petugas');

}elseif($data->level == "Admin") { redirect('admin');

} }

}else{

$this->session->set_flashdata('peringatan','Password Salah');

}

$this->load->view('login');

}

Penjelasan script diatas sebagai berikut:

- Nama file dan nama class harus sama, tidak mengandug case sensitive.

- function __construct()adalah pertama kali di run ketika menuju controller login.

- $this->load->model('m_user'); untuk memanggil model m_user

- function index()untuk menampilkan tampilan awal login, dan ketika ingin tampilan program di awali dengan login. Ubahlah router untuk tampilan awal program

di direktori /application/config/routes.php dengan script

$route['default_controller'] = 'welcome'; menjadi

$route['default_controller'] = 'login';

-

($this->session->userdata('level')=='Admin' untuk validasi login menggunakan session

- $this->load->view('login'); untuk menampilkan view yang sudah dibuat sebelumnya.

- function login_act() adalah proses untuk login

-

$this->input->post('email'); untuk mengambil data from yang menggunakan metode POST

-

$this->m_user->getEmailUser untuk mengambil query getEmailUser di model m_user

3. $this->session->set_flashdata('peringatan','Format email salah');

untuk set notifikasi kesalahan.

4. $cekPassUser->num_rows(), num_rows disini berarti mengambil data dari hasil query yang menghasilkan 1 data

5. $this->session->set_userdata($data_user); untuk setting session.

13 8.3 Membuat lupa Password

Lupa password digunakan ketika admin atau petugas lupa dengan password. Berikut langkah dalam pembuatan form lupa password.

8.3.1 Model

Menggunakan fungsi getEmailUser($email) sebagai pengambilan user berdasarkan email pada file model M_user.php yang sudah dibuat ketika membuat form login dan menambah script pada model file M_user.php untuk mengubah password berdasarkan email, script ubah password sebgai berikut:

function ubahpasswordUser($email,$data){

$this->db->set($data);

$this->db->where('email', $email);

$this->db->update('user');

}

8.3.2 View

Langkah selanjutya yaitu membuat tampilan lupa password. Buatlah file lupaPassword.php dan simpan/save di direktori application/views/ dan script file lupaPassword.php sebagai berikut:

<html>

<head>

<link href="<?php echo base_url(); ?>assets/css/materialize.css"

rel="stylesheet"/>

<link href="<?php echo base_url(); ?>assets/css/materialize.min.css"

rel="stylesheet"/>

</head>

<body>

<center>

<br><br><br>

<h4>Lupa Password</h4>

<br>

<div class="container">

<div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">

<form class="form" method="POST" action="<?php echo base_url();?>login/lupaPassword_act">

<?php if($this->session->flashdata('peringatan')):?>

<p align="center"><font color="red"><i><b><?php echo

$this->session->flashdata('peringatan'); ?></b></i></font></p>

<?php endif;?>

<div class='row'>

<div class='input-field col s12'>

<input type='email' name='email' id='email' value="<?php echo set_value('email')?>" required/>

<label for='email'>Email...</label>

</div>

</div>

<div class='row'>

14

<label style='float: right;'>

<a class='pink-text' href='<?php echo base_url()?>login'><b>Ingat Password?</b></a>

</label>

</div>

<br>

<center>

<div class='row'>

<button type='submit' name='btn_kirim' class='col s12 btn btn-large waves-effect indigo'>Kirim</button>

</div>

</center>

</form>

</div>

</div>

</center>

<script type="text/javascript" src="<?php echo base_url();?>assets/js/materialize.js"></script>

<script type="text/javascript" src="<?php echo base_url();?>assets/js/materialize.min.js"></script>

</body>

</html>

Sehingga hasil dari tampilan login sebagai berikut:

8.3.3 Controller

Tahap selanjutnya menyimpan script dibawah ini pada file controller Login.php :

public function lupaPassword() {

if ($this->session->userdata('level')=='Admin') { redirect('admin');

}elseif($this->session->userdata('level')=='Petugas') { redirect('petugas');

}else{

15

$cekEmailUser = $this->m_user->getEmailUser($email);

if(!filter_var($email, FILTER_VALIDATE_EMAIL)){

$this->session->set_flashdata('peringatan','Format email salah');

}elseif($cekEmailUser->num_rows() == NULL) {

$this->session->set_flashdata('peringatan','Email tidak ditemukan');

}elseif($cekEmailUser->num_rows()!=NULL){

//password baru

$pass="129FAasdsk25kwBjakjDlff";

$panjang='8'; $this->email->initialize($config);

$this->email->set_newline("\r\n");

// Sender email address

$this->email->from('email anda', 'tambah keterangan');

// Receiver email address $this->email->to($email);

// Subject of email

$this->email->subject('Lupa Password');

// Message in email

<p>Password Baru</b><td>: <b>".$passwordbaru."</p>

<p>Anda dapat login kembali dengan password baru Anda <a

16

if($this->email->send()){

$data['password'] = md5($passwordbaru);

$this->m_user->ubahpasswordUser($email, $data);

$this->session->set_flashdata('peringatan', 'Email terkirim');

}else{

$this->session->set_flashdata('peringatan', 'Email gagal terkirim / Periksa Koneksi anda');

}

$this->load->view('lupaPassword');

} }

Penjelesan pada script diatas sebagai berikut:

1. public function lupaPassword() untuk menampilkan view lupa password 2. lupaPassword_act() untuk proses lupa password.

3. untuk mendapatkan password baru secara random, untuk mendapatkan password secara random sebagai berikut :

//password baru

$pass="129FAasdsk25kwBjakjDlff";

$panjang='8';

$len=strlen($pass);

$start=$len-$panjang;

$xx=rand('0',$start);

$yy=str_shuffle($pass);

$passwordbaru=substr($yy, $xx, $panjang);

4. Untuk mengirim via email, atur smtp email terlebih dahulu, seperti masukkan smtp host port, user(email), dan password dapat yang tertera pada script sebagai berikut:

$config = Array(

'protocol' => 'smtp', 'smtp_host' => 'smtp web', 'smtp_port' => 'port SSL/TSL', 'smtp_user' => '', //email anda 'smtp_pass' => '', // password anda 'mailtype' => 'html',

'charset' => 'iso-8859-1' );

5. $this->email->send() untuk mengirim email dari library email ke email yang dituju.

8.4 Membuat Home Petugas

Home petugas atau tampilan utama petugas digunakan petugas untuk memilih fungsionalitas atau kerjaanya, seperti fungsional input barang, penjualan, dan lain lain

17 8.4.1 Model

Dalam pembuatan tampilan home petugas menggunakan Model M_user.php sehingga, hanya menambah script pada model M_user.php untuk mengambil data user petugas berdasarkan email, script mengambil user petugas sebgai berikut:

function selectPetugas(){

$email = $this->session->userdata('email');

Dalam pengambilan berdasarkan email, menggunakan session email, yang sudah diset ketika proses login.

8.4.2 View

View petugas dibagi menjadi 3 file bagian yaitu header, isi, dan footer. Header dan footer dipisahkan agar tidak terjadinya proses pengulangan pembuatan header dan footer setiap file view petugas. Buatlah sebuah folder petugas di direktori application/views agar memudahkan pencarian file untuk petugas dan buatlah file header.php, footer.php, dan home.php untuk tampilan awal petugas pada direktori application/views/petugas/. Berikut script untuk header.php

<html>

<head>

<title>Petugas</title>

<!-- CSS -->

<link href="<?php echo base_url(); ?>assets/css/materialize.css"

type="text/css" rel="stylesheet">

<!-- dataTables -->

<link href="<?php echo base_url();

?>assets/js/plugins/data-tables/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet">

<ul id="dropdown1" class="dropdown-content">

<li><a href="<?php echo

base_url();?>barang/barang">Barang</a></li>

<li class="divider"></li>

<li><a href="<?php echo

base_url();?>penjualan/penjualan">Penjualan</a></li>

18

</ul>

<ul id="dropdown2" class="dropdown-content">

<li><a href="<?php echo

<div class="nav-wrapper container">

<a href="<?php echo base_url();?>" class="brand-logo">XYZ</a>

<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-action-view-headline"></i></a>

<ul class="right hide-on-med-and-down">

<li><a href="<?php echo base_url();?>petugas"><i class="mdi-action-home" style='font-size: 40px'></i></a></li>

<!-- Dropdown-->

<li><a class="dropdown-button" href="#!"

data-activates="dropdown1"><i class="mdi-editor-format-list-bulleted"

style='font-size: 40px'></i></a></li>

<li><a class="dropdown-button" href="#!"

data-activates="dropdown2"><i class="mdi-action-settings" style='font-size:

40px'></i></a></li>

</ul>

<ul class="side-nav" id="mobile-demo">

<li><a href="<?php echo base_url();?>petugas"><i class="mdi-action-home" style='font-size: 30px'>Home</i></a></li>

<li class="divider"></li>

<li><a href="<?php echo base_url();?>barang/barang"><i class="mdi-editor-format-list-bulleted" style='font-size: 30px'>

Barang</i></a></li>

<li><a href="<?php echo base_url();?>penjualan/penjualan"><i class="mdi-editor-format-list-bulleted" style='font-size: 30px'>

Penjualan</i></a></li>

<li class="divider"></li>

<li><a href="<?php echo base_url();?>petugas/profil"><i class="mdi-action-face-unlock" style='font-size: 30px'>

Profil</a></i></li>

<li><a href="<?php echo base_url();?>login/logout "><i class="mdi-hardware-keyboard-tab" style='font-size: 30px'>

1. File header.php berisi untuk mengambil file css dan navbar

2. Penambahan script css untuk melakukan Close pada sebuah notifikasi/pesan

<style type="text/css">

19

color: white;

cursor:pointer;

}

</style>

3. <ul class="side-nav" id="mobile-demo"> untuk tampilan jika ditmapilkan dalam resolusi kecil seperti perangkat mobile

Berikut isi dari file footer.php

<footer>

<center>&copy;Coppy right <?php echo date('Y');

?></center>

</footer>

<script type="text/javascript" src="<?php echo

base_url(); ?>assets/js/jquery-1.11.2.min.js"></script>

<!--materialize js-->

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/materialize.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/materialize.min.js"></script>

<!-- data-tables -->

<script type="text/javascript" src="<?php echo base_url();

?>assets/js/plugins/data-tables/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/plugins/data-tables/data-tables-script.js"></script>

<!--plugins.js - Some Specific JS codes for Plugin Settings-->

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/plugins.js"></script>

<script>

$(".button-collapse").sideNav();

</script>

<script type="text/javascript">

$('#alert_close').click(function(){

1. Untuk tombol navigasi atau menu dalam resolusi layar kecil yang di terapkan pada script

<script>

$(".button-collapse").sideNav();

</script>

2. Javascript untuk menutup notifikasi diterapkan pada script seperti dibawah ini:

<script type="text/javascript">

$('#alert_close').click(function(){

20

$( "#alert_box" ).fadeOut( "slow", function() { });

});

</script>

3. File footer.php berisi untuk memanggil file javascript pada direktori /assets/js.

Berikut script file Home.php sebagai berikut:

<div class="section no-pad-bot" id="index-banner">

<div class="container">

<br><br>

<h1 class="header center black-text">Selamat Bekerja

<?= $petugas->nama?>

<br>

</div>

</div>

<div class="container">

<div class="section">

<div class="row">

<?= $petugas->nama?> untuk mengambil data nama user yang sudah di panggil dalam query di model. Selain menggunakan

<?= $petugas->nama?> untuk mengambil data nama user yang sudah di panggil dalam query di model. Selain menggunakan

Dokumen terkait