TUTORIAL CODEIGNITER DAN MATERIALIZED STUDI KASUS PENJUALAN BARANG. Dosen : Eko Budi Setiawan, S.Kom., M.T

(1)

TUTORIAL CODEIGNITER DAN MATERIALIZED STUDI KASUS PENJUALAN BARANG

Dosen : Eko Budi Setiawan, S.Kom., M.T

PROGRAM STUDI TEKNIK INFORMATIKA FAKULAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS KOMPUTER INDONESIA

2020

(2)

i

DAFTAR ISI

1 Persiapan Alat Pembuatan Pembuatan Program ... 1

2 Instalasi CodeIgniter ... 1

2.1.1 Setting .htacces ... 2

2.1.2 Setting Config URL Dinamis ... 3

2.1.3 Libraries pada CodeIgniter ... 3

3 Instalasi Materilized dan Jquery ... 4

4 Perbedaan Materialized dan Bootstrap ... 4

5 Instalasi Library PHPExcel ... 4

6 Instalisasi Libarary domPDF ... 5

7 Instalisasi Chart ... 5

8 Membuat Program Sederhana ... 5

8.1 Membuat Database ... 6

8.1.1 Koneksi Database... 7

8.2 Membuat From Login ... 8

8.2.1 Model ... 8

8.2.2 View ... 8

8.2.3 Controller ... 11

8.3 Membuat lupa Password ... 13

8.3.1 Model ... 13

8.3.2 View ... 13

8.4 Membuat Home Petugas ... 16

8.4.1 Model ... 17

8.4.2 View ... 17

8.5 Membuat Dashboard Admin ... 22

8.5.1 Model ... 22

8.5.2 View ... 23

8.6 Menambah Data Petugas ... 33

8.6.1 Model ... 33

8.6.2 View ... 34

8.7 Melihat Data Petugas ... 37

(3)

ii

8.7.1 Model ... 37

8.7.2 View ... 37

8.8 Mengubah Data Petugas ... 39

8.8.1 Model ... 39

8.8.2 View ... 40

8.9 Menambah Data Barang ... 43

8.9.1 Model ... 43

8.9.2 View ... 44

8.10 Melihat Data Barang Untuk Petugas ... 48

8.10.1 Model ... 48

8.10.2 View ... 48

8.11 Melihat Data Barang untuk Admin ... 50

8.11.1 Model ... 50

8.11.2 View ... 51

8.12 Mengubah Data Barang Untuk Petugas ... 53

8.12.1 Model ... 53

8.12.2 View ... 55

8.13 Mengubah Data Barang Untuk Admin ... 57

8.13.1 Model ... 58

8.13.2 View ... 58

8.14 Menambah Data Penjualan ... 60

8.14.1 Model ... 60

8.14.2 View ... 61

8.15 Melihat Data Penjualan Untuk Petugas ... 65

8.15.1 Model ... 65

8.15.2 View ... 65

8.16 Melihat Data Penjualan Untuk Admin ... 67

8.16.1 Model ... 68

(4)

iii

8.16.2 View ... 68

8.17 Menghapus Data Penjualan ... 71

8.17.1 Model ... 71

8.17.2 View ... 71

8.18 Stok Barang ... 71

8.18.1 Model ... 71

8.18.2 View ... 72

8.19 Melihat Data Member ... 74

8.19.1 Model ... 74

8.19.2 View ... 74

9 Laporan File Excel ... 76

9.1.1 Laporan Data Barang ... 76

9.1.2 Laporan Data Penjualan ... 79

9.1.3 Laporan Data Petugas ... 82

10 Laporan File PDF ... 85

10.1.1 Laporan Data Barang ... 86

10.1.2 Laporan Data Penjualan ... 87

10.1.3 Laporan Data Petugas ... 89

11 Import Data dari Excel ke Database (Import Data Member) ... 90

(5)

1 1 Persiapan Alat Pembuatan Pembuatan Program

Berikut merupakan alat-alat yang digunakan untuk mengembangkan aplikasi sistem informasi produksi di PT. Socka Farge Indonesia.

1. Sistem operasi yang digunakan adalah Windows 10.

2. Browser yang digunakan adalah Google Chrome.

3. IDE Text Editor : Sublime Text 3.0 4. Web Server : Xampp version v3.2.1 5. Bahasa pemrograman: PHP 5.6.4 6. Web Framework: CodeIgniter 3.1.8

7. HTML, CSS, and Javascript Framework: Materialized dan jquery-1.11.2.

8. Database Server: MySQL

9. PHP Library : PHPExcel version 1.8 dan DOMPDF

2 Instalasi CodeIgniter

Berikut langkah-langkah instalisasi CodeIgniter:

1. Download CodeIgniter 3.1.8 dari http://www.codeigniter.com/download.

2. Ekstrak file CodeIgniter-3.1.8.zip pada direktori web server untuk XAMPP (/xampp/ /htdocs/) dan untuk WAMPP (/wampp/www/).

3. Masuk ke direktori web server, kemudian ubah nama folder CodeIgniter-3.1.8 menjadi nama aplikasi, sebagai contoh menggunakan nama “penjualan”.

4. Jalankan web server dan database server (pada tutorial ini menggunakan Apache dan MySQL).

5. Buka web browser Anda dan arahkan pada alamat http://localhost/penjualan.

6. Jika berhasil, Anda akan melihat halaman web seperti gambar dibawah ini.

(6)

2 Sampai tahap ini, Anda telah berhasil melakukan instalasi CodeIgniter pada web server lokal. Sekarang Anda dapat mulai membangun web application menggunakan framework CodeIgniter.

2.1.1 Setting .htacces

Agar memudahkan para developer website dalam pemanggilan direktori file lebih baik rata-rata menggunakan menggunakan file .htaccess. file .htaccess adalah file konfigurasi dari apache, biasanya di gunakan untuk mengubah pengaturan default pada apache melalui file .htaccess ini.

Contoh kegunaan htacces yaitu dapat menghilangkan index.php dari url saat menjalankan CodeIgniter , ketika tidak menggunakan htacces standar url untuk memanggil CodeIgniter yaitu : (http://localhost/penjualan/index.php/welcome) sedangkan ketika sudah

menggunakan htacces dapat, mempersingkat alamat url menjadi

(http://localhost/penjualan/welcome). Intinya kita langsung bisa memanggil controller yang sudah kita buat.

Cara membuat Ike htaccess:

1. Buka IDE text editor

2. Copy-kan source code di bawah ini

(7)

3

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} -s [OR]

RewriteCond %{REQUEST_FILENAME} -l [OR]

RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*)$ index.php/$1 [NC,L]

3. Save As dengan nama .htaccess di folder penjualan

4. Pada direktori penjualan/application/config/config.php, hapuslah index.php pada

$config['index_page']='index.php'

Menjadi :

$config['index_page']=''

2.1.2 Setting Config URL Dinamis

Dalam setting url dinamis ini juga memudahkan para developer website agar tidak mengatur URL secara manual. Bayangkan jika terdapat file php yang banyak terdapat source code link seperti <a href = ‘http://localhost/penjualan’> dan ingin mengganti nama folder dari penjualan menjadi tutorial, tentunya harus mengganti source code satu persatu secara manual menjadi <a href = ‘http://localhost/tutorial’>. Ada cara untuk mengatur link URL dinamis sebagai berikut :

1. Setting Base_url di direktori /application/config/config.php, Base url merupakan fungsi untuk memanggil URL.

2. Secara umum, membuat base url secara manual seperti berikut:

$config['base_url']=http://localhost/namaproject;

3. Namun, dengan Base URL yang dinamis akan memudahkan kita untuk tidak setting secara manual alias otomatis. Caranya ganti $config[‘base_url’] menjadi seperti dibawah ini :

$config['base_url'] = ((isset($_SERVER['HTTPS']) &&

$_SERVER['HTTPS'] == "on") ? "https" : "http");

$config['base_url'] .= "://".$_SERVER['HTTP_HOST'];

$config['base_url'] .= str_replace(basename(

$_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

2.1.3 Libraries pada CodeIgniter

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

}

(8)

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

(9)

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 :

(10)

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 (ìdBarang`) REFERENCES `barang`(ìdBarang`), FOREIGN KEY (ìdUser`) REFERENCES ùser`(ìdUser`)

);

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

(11)

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

(12)

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->where('password', $password);

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:

(13)

9

<html>

<head>

<!—panggil file css-->

rel="stylesheet"/>

rel="stylesheet"/>

</head>

<body>

<h4>LOGIN</h4>

<br>

<form class="form" method="POST" action="<?php echo base_url();?>login/login_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;?>

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

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

</div>

<label for='password'>Password....</label>

</div>

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

</label>

</div>

<br />

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

</div>

</center>

</form>

</div>

</center>

(14)

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 :

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

(15)

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 {

public function __construct(){

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

date_default_timezone_set('Asia/Jakarta');

}

public function index() {

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

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

}else{

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

} }

function login_act(){

$email = $this->input->post('email');

$password = md5($this->input->post('password'));

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

$cekPassUser = $this->m_user->getPassUser($password);

if ($this->input->method()!='post') { redirect('login');

}elseif(!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($cekPassUser->num_rows() == NULL) {

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

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

>num_rows()!=NULL){

foreach ($cekEmailUser->result() as $data) { $data_user['id'] = $data->idUser;

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

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

(16)

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.

(17)

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

rel="stylesheet"/>

rel="stylesheet"/>

</head>

<body>

<h4>Lupa Password</h4>

<br>

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

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

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

<?php endif;?>

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

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

</div>

(18)

14

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

</label>

</div>

<br>

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

</div>

</center>

</form>

</div>

</center>

</body>

</html>

Sehingga hasil dari tampilan login sebagai berikut:

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{

(19)

15

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

} }

function lupaPassword_act(){

$email = $this->input->post('email');

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

$len=strlen($pass);

$start=$len-$panjang;

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

$yy=str_shuffle($pass);

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

// Configure email library $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' );

// konfigurasi values ke email library $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 $this->email->message(

"<html>

<head>

</head>

<body>

<br>

Kami telah mengatur ulang password Anda, Berikut password baru Anda :

<br>

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

<p>Anda dapat login kembali dengan password baru Anda <a href=\"". base_url()."\" login\" target=\"_blank\" style=\"text- decoration:none;font-weight:bold;\">disini</a>.</p>

</body>

</html>"

);

(20)

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

(21)

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

return $query;

}

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>

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

tables/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet">

</head>

.icon_style{

position: absolute;

right: 10px;

top: 10px;

font-size: 20px;

color: white;

cursor:pointer;

}

</style>

<body>

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

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

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

(22)

18

</ul>

base_url();?>petugas/profil">Profil</a></li>

base_url();?>login/logout">Logout</a></li>

</ul>

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

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

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

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

Logout</i></a></li>

</ul>

</div>

</nav>

Penjelasan script diatas :

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

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

.icon_style{

position: absolute;

right: 10px;

top: 10px;

font-size: 20px;

(23)

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

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

?></center>

</footer>

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

tables/js/jquery.dataTables.min.js"></script>

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

</script>

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

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

});

</script>

</body>

</html>

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

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

</script>

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

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

(24)

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:

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

<?= $petugas->nama?>

<br>

</div>

<a href="<?php echo base_url();?>barang/Stok">

<h2 class="center light-blue-text"><i class="mdi-av-playlist-add" style='font-size:

200px'></i></h2>

<h5 class="center">NAMBAH STOK</h5>

</a>

</div>

<a href="<?php echo base_url();?>barang/tambah">

<h5 class="center">NAMBAH BARANG</h5>

</a>

</div>

<a href="<?php echo

base_url();?>penjualan/tambahPenjualan">

<h2 class="center light-blue-text"><i class="mdi-action-shopping-cart" style='font-size:

200px'></i></h2>

<h5 class="center">PENJUALAN</h5>

</a>

</div>

Penjelasana script diatas sebagai berikut:

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

script tersebut dapat juga menggunakan script <?php echo

(25)

21

$petugas->nama?>.

Hasil dari tampilan Home petugas sebagai berikut:

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

<?php

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

class petugas extends CI_Controller { public function __construct(){

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

date_default_timezone_set('Asia/Jakarta');

}

public function index() {

if($this->session->userdata('level')!='Petugas') { redirect('login');

}else{

$data['petugas'] = $this->m_user->selectPetugas()->row();

$this->load->view('petugas/header');

$this->load->view('petugas/home',$data);

$this->load->view('petugas/footer');

} } }

?>

Penjelasan script diatas sebagai berikut:

(26)

22 1. redirect('login'); untuk mengalihkan ke controller login/index

2. $data['petugas'] = $this->m_user->selectPetugas()->row(); , array petugas akan digunakan di file home.php.

3. Memanggil 3 view sekaligus disertai hasil dari query di model di masukkan ke file Home.php

8.5 Membuat Dashboard Admin

Tampilan Dashbord atau tampilan awal admin digunakan untuk memonitor data petugas ,barang, penjualan, jumlah stok dan pendapatan.

8.5.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 admin berdasarkan session email, script tambahan dalam M_user sebgai berikut:

function selectAdmin(){

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

return $query;

}

Selain menggunakan Model M_user, aplikasi ini menggunakan model barang dan penjualan. Dikarenakan belum dibuatnya model barang dan penjualan sehingga langkah selanjutnya membuat file Model M_barang.php dan M_penjualan.php di direktori /application/model/. Berikut isi file untuk M_barang.php dan menambah fungsi untuk mengambil data barang di database.

class m_barang extends CI_Model{

function jumlahBarang(){

$this->db->select('count(namaBarang) as jumBarang,sum(stok) jumStok');

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

return $query;

} }

?>

Dan isi file untuk M_penjualan.php dan menambah fungsi untuk menambil data penjualan di database.

(27)

23

class m_penjualan extends CI_Model{

function statistikPenjualan(){

$this->db->select('barang.namaBarang, SUM(penjualan.qty) AS qty');

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

$this->db->join('barang','idBarang');

$this->db->group_by('barang.namaBarang');

$this->db->order_by('penjualan.idBarang');

return $query;

}

function jumlahPenjualan(){

$this->db->select('count(penjualan.idPenjualan) AS jumTransaksi,SUM(barang.harga*qty) AS jumPendapatan');

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

$this->db->join('barang','idBarang');

return $query;

} }

?>

8.5.2 View

View admin 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 admin. Buatlah sebuah folder admin di direktori /application/views agar memudahkan pencarian file view untuk admin dan buatlah file header.php, footer.php, dan home.php pada direktori application/views/admin/. Sebelum membuat tampilan admin, tampilan ini membutuhkan tambah script css, buatlah file css di direktori /assets/css/ dengan nama style.css Berikut script css dari file style.css

body {

background-color: #fcfcfc;

}

#main, footer {

padding-left: 240px;

}

.margin { margin: 0;

}

#input-select .input-field label { position: absolute;

top: -14px;

font-size: 0.8rem;

}

#sidenav-overlay {

background-color: transparent;

}

.container {

padding: 0 0.5rem;

margin: 0 auto;

max-width: 100% !important;

(28)

24

width: 98%;

}

#left-sidebar-nav span.badge.new{

line-height: 20px;

margin-top: 11px;

}

#content .container .row { margin-bottom: 0;

}

@media only screen and (min-width: 601px) { .container {

width: 98%;

} }

@media only screen and (min-width: 993px) { .container {

width: 98%;

} }

@media only screen and (max-width: 993px) { #main,

footer {

padding-left: 0px;

} }

/*=======================================================================

==========

Header

=========================================================================

===========*/

/*--- Page Header

---*/

h1.logo-wrapper{

margin: 0px 0px;

}

h1 span.logo-text{

display: none;

}

header .brand-logo { margin: 5px 0px;

/*padding: 0 42px;

padding: 0px 10px 0 75px;*/

padding: 0 20px;

}

@media only screen and (max-width: 992px) { nav .nav-wrapper {

text-align: center;

}

nav .nav-wrapper a.page-title { font-size: 36px;

} }

/*=======================================================================

==========

Sidebar

(29)

25

=========================================================================

===========*/

ul.side-nav.fixed { top: 64px;

}

@media only screen and (max-width: 992px) { ul.side-nav.fixed {

top: 56px;

} }

ul.side-nav.fixed hr { display: block;

height: 1px;

border: 0;

border-top: 1px solid #e0e0e0;

margin: 1em 0;

padding: 0;

}

.side-nav a {

line-height: 42px;

height: 42px;

}

#left-sidebar-nav { position: fixed;

width: 100px;

left: 180px;

z-index: 999;

height: auto;

}

#slide-out li a i { line-height: inherit;

width: 2rem;

font-size: 1.6rem;

display: block;

float: left;

text-align: center;

margin-right: 1rem;

}

#slide-out ul.side-nav li { padding: 0px !important;

}

ul.side-nav li { padding: 0;

}

ul.side-nav .collapsible-header { margin: 0;

}

.sidebar-collapse { position: absolute;

left: -170px;

top: -45px;

}

ul.side-nav.fixed { overflow: hidden;

}

ul.side-nav.fixed li { line-height: 44px;

}

ul.side-nav.fixed li:hover,

(30)

26

ul.side-nav.fixed li.active {

background-color: rgba(0, 0, 0, 0.05);

}

ul.side-nav.fixed li a { font-size: 14px;

font-weight: 400;

}

.side-nav .collapsible-body li a{

margin: 0 1rem 0 3rem;

}

ul.side-nav.fixed ul.collapsible-accordion { background-color: #FFF;

}

ul.side-nav.fixed:hover { /*overflow-y:hidden;*/

}

ul.side-nav.fixed li.user-details {

background: url(../images/user-bg.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

/*overflow: hidden;*/

margin-bottom: 15px;

padding: 15px 0px 0px 15px;

}

.user-details .row { margin: 0;

}

.user-task, .user-time { margin: 0;

font-size: 13px;

color: #fff;

}

ul.side-nav.fixed .profile-image { /*height: 50px;*/

}

ul.side-nav.fixed .profile-btn { margin: 0;

text-transform: capitalize;

padding: 0;

text-shadow: 1px 1px 1px #444;

font-size: 15px;

}

.user-roal { color: #fff;

margin-top: -16px;

font-size: 13px;

text-shadow: 1px 1px 1px #444;

}

.bold > a {

font-weight: bold;

}

nav.top-nav { height: 122px;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

(31)

27

nav.top-nav a.page-title { line-height: 122px;

font-size: 48px;

}

/*--- Cards

---*/

#card-stats .card-content { text-align: center;

}

#card-stats .card-stats-title, #card-stats .card-stats-title i { font-size: 1.2rem;

}

#card-stats .card-stats-number { font-size: 1.8rem;

line-height: 2.0rem;

margin: 0.2rem 0 0.2rem 0;

font-weight: 500;

}

/*--- Grid - Flat Site Mockup

---*/

.col.grid-example {

border: 1px solid #eee;

margin: 7px 0;

text-align: center;

line-height: 50px;

font-size: 28px;

background-color: tomato;

color: white;

padding: 0px;

}

.col.grid-example span { font-weight: 200;

line-height: 50px;

}

.icon_style{

position: absolute;

right: 10px;

top: 10px;

font-size: 20px;

color: white;

cursor:pointer;

}

footer.page-footer { padding-top: 0px;

}

Berikut isi script pada file header.php:

(32)

28

<head>

<title>ADMIN</title>

type="text/css" rel="stylesheet" media="screen,projection">

type="text/css" rel="stylesheet" media="screen,projection">

tables/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet"

media="screen,projection">

</head>

<body>

<h1 class="logo-wrapper"><a href="<?php echo base_url('admin');?>" class="brand-logo darken-1">XYZ</a></h1>

</div>

</nav>

</div>

</header>

<ul id="profile-dropdown"

class="dropdown-content">

base_url();?>admin/profil"><i class="mdi-action-face-unlock"></i>

Profile</a>

</li>

base_url();?>login/logout"><i class="mdi-hardware-keyboard-tab"></i>

Logout</a>

</li>

</ul>

<a class="btn-flat dropdown-button waves- effect waves-light white-text profile-btn" href="#" data-

activates="profile-dropdown"><?= $admin->nama?><i class="mdi-navigation- arrow-drop-down right"></i></a>

<p class="user-roal">Administrator</p>

</div>

</li>

<li class="bold"><a href="<?php echo base_url();

?>admin" class="waves-effect waves-cyan"><i class="mdi-action- dashboard"></i> Dashboard</a>

</li>

<li class="bold"><a href="<?php echo base_url();