• Tidak ada hasil yang ditemukan

8.1 Membuat Database

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

script tersebut dapat juga menggunakan script <?php echo

21

$petugas->nama?>.

Hasil dari tampilan Home petugas sebagai berikut:

8.4.3 Controller

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

parent::__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:

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

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

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

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

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

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.

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

class m_barang extends CI_Model{

function jumlahBarang(){

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

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

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

return $query;

} }

?>

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

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

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

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

return $query;

}

function jumlahPenjualan(){

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

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 {

24

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

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

text-align: center;

}

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

25

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

border-top: 1px solid #e0e0e0;

margin: 1em 0;

26

ul.side-nav.fixed li.active {

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

}

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

-webkit-background-size: cover;

27

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

Berikut isi script pada file header.php:

28

<html lang="en">

<html lang="en">

Dokumen terkait