Assalammu'alaikum Warahmatullahi Wabarakatuh..
Pada kesempatan kali ini saya akan mencoba membagikan informasi yang saya pelajari mengenai pembuatan website dengan codeigniter dan database MySQL untuk halaman login admin.. Untuk tampilan yang saya gunakan dalam pembelajaran kali ini, saya menggunakan template dari google yang bisa kalian unduh disini .. Silahkan anda unduh atau bisa menggunakan tampilannya lainnya. Disini dalam pembelajaran saya anggap teman-teman menggunakan template yang sama dengan saya dan sudah di unduh..
Oke langsung saja silahkan anda extract lalu perhatikan script dengan nama login.php
Maka jika anda jalankan dibrowser dengan alamat http://localhost:latihan/login.html maka akan tampil seperti berikut :
Nah sekarang akan kita buat dengan menggunakan codeigniter caranya adalah :
Pertama :
silahkan anda buka folder codeigniter anda dan lakukan proses konfigurasi. Proses konfigurasi sudah saya posting disini
Kedua :
Jika anda sudah mengikuti proses konfigurasi dari artikel yang saya buat, tentu saja routes.php memiliki potongan script seperti ini
$route['default_controller'] = 'login';
Nah tugas kita membuat controllers bernama login seperti pada script diatas yang berwarna merah. Karena fungsi controllers sebagai pengatur link setiap halaman. Oke langsung saja kalian buka folder controllers lalu buat file dengan nama login.php nama yang sama seperti pada routes dan anda buka file welcome.php lalu copy pada script welcome.php dan pastekan pada file login.php maka akan seperti berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$this->load->view('welcome_message');
}
}
Nah perhatikan script diatas yang berwarna merah yakni tampilan_login itu merupakan view yang akan kita buat
Sehingga struktur controllers seperti berikut
Oke sudah selesai membuat controllers baru dengan nama login.php
Selanjutnya sesuai script login.php pada controllers yang terdapat view dengan nama tampilan_login, maka kita akan buat view nya. Pertama-tama kalian buka extract pada folder template->lalu pilih file login.php dan copy isi seluruhnya seperti gambar berikut;
Setelah itu anda buka folder view pada folder codeigniter lalu buat file dengan nama tampilan_login.php seperti pada gambar berikut :
Dan pastekan pastekan pada file tampilan_login.php , maka hasilnya seperti berikut ketika anda jalankan di browser dengan alamat http://localhost:8080/CI/
Bagaimana sudah berhasil? apabila belum berhasil silahkan komen, dan apabila saya terlalu singkat menjelaskan silahkan kritik. Dan apabila anda berhasil tentu saja halaman tersebut belum bisa berfungsi kan? nanti akan saya buatkan fungsinya.
Oia lupa jangan lupa pada script diatas sebelum script assets seperti <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> maka wajib untuk menambahkan menjadi <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css" /> seluruhnya sebelum script assets anda tambahkan <?php echo base_url();?> berfungsi untuk menampilkan file css javascript yang sudah dibuat..
Setelah selesai semua silahkan anda refresh, apakah tampilannya berubah? apabila berubah berarti ada yang salah dan silahkan cek script assets nya dan apabila tetap berarti anda sukses..
Oke selanjutnya saya ingin membuang beberapa tampilan yang belum akan kita buat dan hasil akhirnya seperti berikut :
Setelah selesai kita akan aktifkan halaman login ini, caranya adalah perhatikan script :
<form> l
lalu tambahkan menjadi seperti berikut
<form method="POST" action="<?php echo base_url();?>index.php/login/getlogin" onsubmit="return cekform();">
*Keterangan :
- Method : seperti default kita menggunakan POST
- Action : Itu merupakan aksi yang akan dijalankan yakni dari index.php akan memanggil controller bernama login yang akan kita buat getlogin untuk mengaktifkan fungsi loginnya.
Jadi : Index.php merupakan halaman pertama dari controllers yang bernama login dan membuat getlogin untuk fungsinya ..
- onsubmit : untuk mengecek validasi data login seperti username dan password kita beri nama validasi ini dengan nama cekform()..
Oke??
Oke sebelum kita menambahkan getlogin pada controllers login, saya ingin menyelesaikan script dihalaman view tampilan_login.php ini. Oke fokuskan perhatian anda kepada script
<input type="text" class="form-control" placeholder="Username" />
Akan ada tambahan menjadi
<input type="text" name="username" id="username" class="form-control" placeholder="Username" />
dan untuk password juga sama
<input type="password" class="form-control" placeholder="Password" />
Akan ada tambahan menjadi
<input type="password" name="password" id="password" class="form-control" placeholder="Password" />
Keterangan : Penambahan name dan id ini untuk membantu saat membuat fungsi pada getlogin ..
Oke selanjutnya ubah script button menjadi
<button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
Silahkan anda masukan username dan password secara asal, maka apabila klik button muncul seperti ini berarti anda berhasil:
Oke selanjutnya, kalian buka controllers login, lalu tambahkan script
public function getlogin()
{
$u = $this->input->post('username');
$p = $this->input->post('password');
$this->load->model('model_login');
$this->model_login->getlogin($u,$p);
}
dibawah kurung kurawal tutup class login atau keseluruhan script controllers login seperti berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function index()
{
$this->load->view('tampilan_login');
}
public function getlogin()
{
$u = $this->input->post('username');
$p = $this->input->post('password');
$this->load->model('model_login');
$this->model_login->getlogin($u,$p);
}
}
*Maksud dari script berwarna merah diatas yakni kita membuat parameter string $u dan $p untuk memproses inputan username dan password.
*Disana terdapat model_login yang berfungsi untuk memproses login dan memanggil database serta mencocokannya. Oke untuk lebih mudah kita buat modelnya.
- Cara nya dengan klik kanan pada folder model, lalu pilih new file dan buat nama model_login.php
Berikut script model_login
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Model_login extends CI_model {
public function getlogin($u,$p)
{
$this->db->where('username',$u);
$this->db->where('password',$p);
$query = $this->db->get('admin');
if($query->num_rows()>0)
{
foreach ($query->result() as $row)
{
$sess = array('username' => $row->username,
'password' => $row->password);
$this->session->set_userdata($sess);
redirect('home');
}
}
else
{
$this->session->set_flashdata('info','maaf data tidak valid');
redirect('login');
}
}
}
Kedua :
Jika anda sudah mengikuti proses konfigurasi dari artikel yang saya buat, tentu saja routes.php memiliki potongan script seperti ini
$route['default_controller'] = 'login';
Nah tugas kita membuat controllers bernama login seperti pada script diatas yang berwarna merah. Karena fungsi controllers sebagai pengatur link setiap halaman. Oke langsung saja kalian buka folder controllers lalu buat file dengan nama login.php nama yang sama seperti pada routes dan anda buka file welcome.php lalu copy pada script welcome.php dan pastekan pada file login.php maka akan seperti berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$this->load->view('welcome_message');
}
}
Selanjutnya silahkan anda Ubah pada penamaan class yang sebelumnya bernama Welcome seperti script berwarna merah menjadi Login
*Ingat penamaan class harus diawali huruf besar.
Selanjutnya ubah view pada script berwarna merah, yang sebelumnya welcome_message menjadi tampilan_login, maka keseluruhan script controllers login.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function index()
{
$this->load->view('tampilan_login');
}
}
atau seperti pada gambar berikut :
Nah perhatikan script diatas yang berwarna merah yakni tampilan_login itu merupakan view yang akan kita buat
Oke sudah selesai membuat controllers baru dengan nama login.php
Selanjutnya sesuai script login.php pada controllers yang terdapat view dengan nama tampilan_login, maka kita akan buat view nya. Pertama-tama kalian buka extract pada folder template->lalu pilih file login.php dan copy isi seluruhnya seperti gambar berikut;
Setelah itu anda buka folder view pada folder codeigniter lalu buat file dengan nama tampilan_login.php seperti pada gambar berikut :
Dan pastekan pastekan pada file tampilan_login.php , maka hasilnya seperti berikut ketika anda jalankan di browser dengan alamat http://localhost:8080/CI/
Bagaimana sudah berhasil? apabila belum berhasil silahkan komen, dan apabila saya terlalu singkat menjelaskan silahkan kritik. Dan apabila anda berhasil tentu saja halaman tersebut belum bisa berfungsi kan? nanti akan saya buatkan fungsinya.
Oia lupa jangan lupa pada script diatas sebelum script assets seperti <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> maka wajib untuk menambahkan menjadi <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css" /> seluruhnya sebelum script assets anda tambahkan <?php echo base_url();?> berfungsi untuk menampilkan file css javascript yang sudah dibuat..
Setelah selesai semua silahkan anda refresh, apakah tampilannya berubah? apabila berubah berarti ada yang salah dan silahkan cek script assets nya dan apabila tetap berarti anda sukses..
Oke selanjutnya saya ingin membuang beberapa tampilan yang belum akan kita buat dan hasil akhirnya seperti berikut :
Setelah selesai kita akan aktifkan halaman login ini, caranya adalah perhatikan script :
<form> l
lalu tambahkan menjadi seperti berikut
<form method="POST" action="<?php echo base_url();?>index.php/login/getlogin" onsubmit="return cekform();">
*Keterangan :
- Method : seperti default kita menggunakan POST
- Action : Itu merupakan aksi yang akan dijalankan yakni dari index.php akan memanggil controller bernama login yang akan kita buat getlogin untuk mengaktifkan fungsi loginnya.
Jadi : Index.php merupakan halaman pertama dari controllers yang bernama login dan membuat getlogin untuk fungsinya ..
- onsubmit : untuk mengecek validasi data login seperti username dan password kita beri nama validasi ini dengan nama cekform()..
Oke??
Oke sebelum kita menambahkan getlogin pada controllers login, saya ingin menyelesaikan script dihalaman view tampilan_login.php ini. Oke fokuskan perhatian anda kepada script
<input type="text" class="form-control" placeholder="Username" />
Akan ada tambahan menjadi
<input type="text" name="username" id="username" class="form-control" placeholder="Username" />
dan untuk password juga sama
<input type="password" class="form-control" placeholder="Password" />
Akan ada tambahan menjadi
<input type="password" name="password" id="password" class="form-control" placeholder="Password" />
Keterangan : Penambahan name dan id ini untuk membantu saat membuat fungsi pada getlogin ..
Oke selanjutnya ubah script button menjadi
<button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
Silahkan anda masukan username dan password secara asal, maka apabila klik button muncul seperti ini berarti anda berhasil:
Oke selanjutnya, kalian buka controllers login, lalu tambahkan script
public function getlogin()
{
$u = $this->input->post('username');
$p = $this->input->post('password');
$this->load->model('model_login');
$this->model_login->getlogin($u,$p);
}
dibawah kurung kurawal tutup class login atau keseluruhan script controllers login seperti berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function index()
{
$this->load->view('tampilan_login');
}
public function getlogin()
{
$u = $this->input->post('username');
$p = $this->input->post('password');
$this->load->model('model_login');
$this->model_login->getlogin($u,$p);
}
}
*Disana terdapat model_login yang berfungsi untuk memproses login dan memanggil database serta mencocokannya. Oke untuk lebih mudah kita buat modelnya.
- Cara nya dengan klik kanan pada folder model, lalu pilih new file dan buat nama model_login.php
Berikut script model_login
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Model_login extends CI_model {
public function getlogin($u,$p)
{
$this->db->where('username',$u);
$this->db->where('password',$p);
$query = $this->db->get('admin');
if($query->num_rows()>0)
{
foreach ($query->result() as $row)
{
$sess = array('username' => $row->username,
'password' => $row->password);
$this->session->set_userdata($sess);
redirect('home');
}
}
else
{
$this->session->set_flashdata('info','maaf data tidak valid');
redirect('login');
}
}
}
*Perhatikan script berwarna merah itu merupakan aksi apabila pada saat login memasukan username dan password tidak sesuai dengan database maka akan muncul informasi tersebut. Nah dimana informasi tersebut muncul?
Oke kalian buka lagi view tampilan_login dan fokuskan pada script
<input type="password" name="password" id="password" class="form-control" placeholder="Password" />
Lalu kalian enter dan masukan script berikut tepat dibawah script diatas
<?php
$info= $this->session->flashdata('info');
if(!empty($info))
{
echo $info;
}
?>
*Script diatas berfungsi untuk menampilkan pesan info yang tadi sudah kita buat pada script berwarna merah. Jika kalian bingung begini penampakan script diatas.
Oittt,, sebelum anda kembali ke browser. Ada lagi ini untuk mempercantik tampilan. Kalian buka view tampilan_login dan perhatikan script berikut :
<form method="POST" action="<?php echo base_url();?>index.php/login/getlogin" onsubmit="return cekform();">
diatas sudah saya jelaskan bahwa fungsi cekform untuk memastikan form username dan password harus di isi. Atau seperti ini tampilannya biar jelas..
Caranya dengan anda cari diatas scrip </head> lalu letakan percis diatas script tersebut
<script type="text/javascript">
function cekform()
{
if(!$("#username").val())
{
alert ('Maaf username tidak boleh kosong');
$("#username").focus();
return false
}
if(!$("#password").val())
{
alert ('Maaf password tidak boleh kosong');
$("#password").focus();
return false
}
}
</script>
Atau jika anda bingung perhatikan gambar berikut untuk memastikan posisi :
Oke sudah selesai proses kodingnya.. Untuk mengingatkan, kalian lihat kembali models model_login dan perhatikan script berikut
$query = $this->db->get('admin');
script berikut adalah memanggil tabel admin dari database keluhan yang sudah dibuat pada proses konfigurasi.. Seperti berikut :
Karena saya belum membuat proses registrasi pada tampilan web. Maka kita harus insert username dan password secara manual. Jika kalian sudah insert username dan password. Maka kita buka browser kita dan jalankan kembali tampilan login.. Berikut output :
1. Tampilan Login
2. Tampilan Validasi jika username dan password kosong
3. Tampilan jika username dan password salah
Dan apabila username dan password yang dimasukan benar, maka akan tampil seperti ini :
Mengapa Not Found? Karena kita belum membuat controllers home yang berisi view atau tampilannya. Nanti akan saya buat pada artikel selanjutnya. Cukup sekian informasi yang bisa saya bagikan mengenai proses login dengan menggunakan codeigniter dan database MySQL semoga bermanfaat. Salam sukses !!!
0 komentar:
Posting Komentar