Tutorial Membuat Toko Online Menggunakan Codeigniter: Register dan Login Member [Bagian 2]
Register atau Sign Up digunakan untuk mendaftarkan diri (menjadi member) dengan melakukan pendaftaran melalui registrasi dengan mengisi biodata. Sedangkan login atau Sign in adalah proses untuk masuk ke dalam sebuah layanan online yang biasanya berisi username dan password.
Kedua hal tersebut sudah seperti pasangan yang serasi di dalam sistem layanan online, khususnya website. Dalam kasus pembuatan website toko online, tentu dengan hadirnya kedua proses ini sangat dibutukan ketika seorang customer harus mendaftar menjadi member di toko tersebut untuk bisa melanjutkan tahap selanjutnya, yaitu pengiriman dan pembayaran barang.
Baca Juga:
- Tutorial Instalasi PHP Framework Codeigniter
- Tutorial Konfigurasi Codeigniter
- Cara Menampilkan Database Dalam Codeigniter
- Tutorial Membuat Toko Online Menggunakan Codeigniter: Halaman Utama [Bagian 1]
Sesuai janji penulis yaitu akan melanjutkan pembuatan website toko online ke tahap selanjutnya mengenai pembuatan register dan login.
PEMBUATAN REGISTER DAN LOGIN
1. Membuat table users di dalam database toko.
CREATE TABLE `users` ( `id` int(10) NOT NULL, `username` varchar(25) NOT NULL, `email` varchar(50) NOT NULL, `password` varchar(60) NOT NULL, `group` tinyint(1) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `users` ADD PRIMARY KEY (`id`);
Logika Program:
- Table users ini berguna untuk menyimpan data member maupun admin di website toko online. Struktur dari table ini terdiri atas field id (primary key), username, email, password dan group.
Berikut ini tampilan struktur dari table users.
2. Membuat file Regis.php di dalam folder C:\xampp\htdocs\toko-online\application\controllers.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Regis extends CI_Controller{ public function __construct(){ parent::__construct(); $this->load->model('model_regis'); } public function index(){ $username=$this->input->post('username'); $email=$this->input->post('email'); $password=$this->input->post('password'); $group=$this->input->post('group'); $this->model_regis->tambah($username,$email,$password,$group); redirect('regis/member'); } public function member(){ $this->load->view('form_regis'); } public function tambah(){ $this->load->view('form_login'); } } ?>
Logika Program:
- public function index berfungsi untuk mendefinisikan field dari table users supaya dapat masuk ketika di-input kedalam table tersebut. Selain itu juga berguna untuk memanggil model_regis dengan nama function tambah untuk menambahkan member baru dari website toko online.
- public function member berfungsi untuk menampilan file form_login.php yang terdapat di folder views.
- public function tambah berfungsi ketika user telah selesai mengisi biodata diri di menu register, maka mereka dapat kembali ke menu login untuk masuk ke dashboard member dan melanjutkan proses belanja online.
3. Membuat file Model_regis.php di dalam folder C:\xampp\htdocs\toko-online\application\models.
<?php class Model_regis extends CI_Model{ public function tambah($username, $email, $password, $group){ $data = array( 'username' => $username, 'email' => $email, 'password' => $password, 'group' => $group, ); $this->db->insert('users',$data); } } ?>
Logika Program:
- public function index tambah berfungsi untuk membuat data array untuk menyimpan nilai ketika user meng-input biodata diri seperti username, email, password dan group. Setelah itu menambahkan data yang di-input kedalam table users.
4. Membuat file form_regis.php di dalam folder C:\xampp\htdocs\toko-online\application\views.
<!DOCTYPE html> <html lang="en"> <head> <title>Toko Online | Inwepo</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <style> .register{ margin-left: 17%; } </style> </head> <body> <?php $this->load->view('layout/top_menu') ?> <div><?=validation_errors()?></div> <div><?=$this->session->flashdata('error')?></div> <?=form_open('regis', ['class'=>'form-horizontal'])?> <div class="form-group"> <label class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" class="form-control" name="username" placeholder="Username"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="text" class="form-control" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" name="password" placeholder="Password"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Group</label> <div class="col-sm-10"> <select name="group"> <option>--Pilih-- <option value="2">Member </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> <div class="register"> <a href="<?php echo base_url();?>index.php/login"><button class="btn btn-warning">Back to Login</button></a> </div> </body> </html>
Nah, untuk melihat tampilan dari menu register ini, pembaca dapat mengetikan URL http://localhost/toko-online/index.php/regis. Berikut ini tampilan dari register:
5. Membuat file Login.php di dalam folder C:\xampp\htdocs\toko-online\application\controllers.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Login extends CI_Controller { public function index() { $this->form_validation->set_rules('username','Username','required|alpha_numeric'); $this->form_validation->set_rules('password','Password','required|alpha_numeric'); if($this->form_validation->run() == FALSE) { $this->load->view('form_login'); } else { $this->load->model('model_users'); $valid_user = $this->model_users->check_credential(); if($valid_user == FALSE) { $this->session->set_flashdata('error','Wrong Username / Password!'); redirect('login'); } else { // if the username and password is a match $this->session->set_userdata('username', $valid_user->username); $this->session->set_userdata('group', $valid_user->group); switch($valid_user->group){ case 1 : //admin redirect('admin/products'); break; case 2 : //member redirect(base_url()); break; default: break; } } } } public function logout() { $this->session->sess_destroy(); redirect('login'); } }
Logika Program:
- public function index berfungsi untuk membuat form validasi pada saat proses login. Serta menampilkan file login.php yang terdapat pada folder view. Di dalam function ini berguna untuk memberi aturan login dengan memasukan username dan password untuk masuk ke dashboard member. Hadirnya potongan program ini juga dapat mengatur session yang masuk untuk menentukan member ataupun admin dengan field group. Caranya dengan menggunakan kondisi seperti ini: Jika group bernilai 1 maka dinyatakan admin, sedangkan jika group bernilai 2 maka dinyatakan member.
- public function logout berfungsi untuk keluar dari dashboard member ataupun admin dan akan kembali ke halaman utama.
6. Membuat file Model_users di dalam folder C:\xampp\htdocs\toko-online\application\models.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Model_users extends CI_Model { public function check_credential() { $username = set_value('username'); $password = set_value('password'); $hasil = $this->db->where('username', $username) ->where('password', $password) ->limit(1) ->get('users'); if($hasil->num_rows() > 0){ return $hasil->row(); } else { return array(); } } }
Logika Program:
- public function check_credential berfungsi untuk mengecek proses login dengan mencocokan data username dan password. Jika data valid maka proses login berhasil dan dapat masuk ke menu selanjutnya.
7. Membuat file form_login.php di dalam folder C:\xampp\htdocs\toko-online\application\views.
<!DOCTYPE html> <html lang="en"> <head> <title>Toko Online | Inwepo</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <style> .register{ margin-left: 17%; } </style> </head> <body> <?php $this->load->view('layout/top_menu') ?> <div><?=validation_errors()?></div> <div><?=$this->session->flashdata('error')?></div> <?=form_open('login', ['class'=>'form-horizontal'])?> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" class="form-control" name="username"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" name="password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> <div class="register"> <a href="<?php echo base_url();?>index.php/regis"><button class="btn btn-danger">Register</button></a> </div> </body> </html>
Setelah terbentuk file diatas, pembaca dapat melakukan tahap uji coba dengan cara mengetikan URL http://localhost/toko-online/index.php/login. Berikut ini tampilan form login tersebut.
Pada proses login juga sistem telah dapat menentukan user yang masuk dengan cara mengetahui data tersebut di dalam field group. Jika record bernilai 1 maka dinyatakan sebagai admin, sedangkan jika bernilai 2 dinyatakan sebagai member.
Ini artinya secara tidak langsung, penulis telah memberikan materi multi-level untuk proses login ini. Tahap selanjutnya adalah proses pembuatan dashboard member. Jadi ketika sistem telah mengetahui jika group bernilai 2, maka sistem akan langsung mengarahkan ke dashboard member untuk order barang.
Maka dari itu, ikuti terus proses pembuatan website toko online ini ya, sahabat setia inwepo. 😀 Untuk download file lengkapnya ada di bagian 6 akhir.
Tutorial Selanjutnya: Tutorial Membuat Toko Online Menggunakan Codeigniter: Order Member [Bagian 3]