Home » Menu Login Web » Menu Login Web Pada CI

Menu Login Web Pada CI

in - on 07.23 - No comments

Assalamualaikum.. hmmm dah lama nie gk posting, pst shbt shering information merindukan posting2 shering informasi. nah kali ini admin bermaksud berbagi informasi tetang cara membuat web dengan menggunakan CI. yang kali ini pembahsan kita tentang menu Login
Salah satu hal penting dalam pembuatan aplikasi berbasis web adalah Form Login, ada banyak cara yang dapat digunakan, pada kesempatan kali ini penulis berusaha untuk mengenalkan bagaimana cara pembuatan Form Login dengan menggunakan framework CodeIgniter. Form Login yang dibuat menggunakan kelas database dan session.

  1. Instal aplikasi Web Server, Database Server, dan PHP pada SO.Windows Pada tahap ini penulis menggunakan tool Wampserver 2.0, yang memaketkan ketiga aplikasi diatas. Unduh tool tersebut di url:  www.wampserver.com.
  2. Instal framework CodeIgniter, Unduh CodeIgniter di url: www.codeigniter.com, kemudian ekstrak paket tersebut dan letakan di root folder Web Server (c:\wamp\www\loginci).
  3. Pastikan alamat url localhost sudah dapat di-akses, Jalankan aplikasi Mozila Web Browser di sistem Anda, ketik alamat url http://localhost/loginci/, pada textbox address lalu enter, jika tampil halaman web berikut berarti sukses.
  4. Instal text editor, Unduh aplikasi editor Intype di url: http://www.intype.info, lalu instal aplikasi tsb di sistem.
  5. Instal tool MySql Manager, Unduh aplikasi SQLyog di url http://www.webyog.com, lalu instal aplikasi tsb di sistem.

Pembuatan Database:
Untuk menyeleksi user dalam proses login kita akan membuat sebuah database pustaka dan tabel user, dengan struktur sbb:
01./* membuat database dan tabel */
02.CREATE DATABASE dbpustaka;
03.USE dbpustaka;
04.CREATE TABLE `tabel_user` (
05.`id` int(10) NOT NULL AUTO_INCREMENT,
06.`nmlogin` varchar(10) DEFAULT NULL,
07.`nmuser` varchar(25) DEFAULT NULL,
08.`psuser` varchar(64) DEFAULT NULL,
09.PRIMARY KEY (`id`)
10.) ENGINE=MyISAM DEFAULT CHARSET=latin1;
11.INSERT INTO tabel_user values (1,'user1','User One',md5('123'));
12.INSERT INTO tabel_user values (2,'user2','User Two',md5('345'));
13./* membuat user untuk koneksi ke database pustaka */
14.GRANT SELECT,INSERT,UPDATE,DELETE ON dbpustaka.* TO pustaka@`localhost` identified by '123';

Eksekusi kode SQL diatas ke MySql Database Server, dengan cara sbb:

  1. Jalankan aplikasi SQLyog
  2. Lakukan koneksi ke server localhost
  3. Copy kan kode SQL diatas ke editor Query SQLyog
  4. Lalu tekan tombol: Shift+F9

Konfigurasi Program:
Jalankan aplikasi editor Intype, buka projek dengan cara klik menu Project->Open Project
arahkan ke folder c:\wamp\www\loginci. Kemudian lakukan langkah-langkah sbb:
Buka program: application\config\autoload.php
Ubah baris berikut:
1.$autoload['libraries'] = array();
2.$autoload['helper'] = array();
3.// menjadi:
4.$autoload['libraries'] = array('database', 'session');
5.$autoload['helper'] = array('url');
Buka program: application\config\config.php
Ubah baris berikut:
1.$config['base_url']    = "";
2.// menjadi:
3.$config['base_url']    = "http://localhost/loginci/";
Buka program: application\config\database.php
Ubah baris berikut:
01.$db['default']['hostname'] = "";
02.$db['default']['username'] = "";
03.$db['default']['password'] = "";
04.$db['default']['database'] = "";
05.// menjadi:
06.$db['default']['hostname'] = "localhost";
07.$db['default']['username'] = "pustaka";
08.$db['default']['password'] = "123";
09.$db['default']['database'] = "dbpustaka";

Mulai Koding:
Buat program header.php, simpan di folder: application\views\
ketik kode berikut:
1.<html>
2.<head>
3.<title>Form Login</title>
4.</head>
5.<body>
Buat program footer.php, simpan di folder: application\views\
ketik kode berikut:
1.<br />
2.<p>CopyRight: FormLogin</p>
3.</body>
4.</html>
Buat program form_login.php, simpan di folder: application\views\
ketik kode berikut:
01.<?php if($this->session->flashdata('message')) : ?>
02.<p><?php echo $this->session->flashdata('message'); ?></p>
03.<?php endif; ?>
04.<form method="post">
05.<fieldset>
06.<legend>Login</legend>
07.User Name: <input type="text" name="username" value="" /><br />
08.User Pass: <input type="password" name="userpass" value="" /><br />
09.<input type="submit" name="btnlogin" value="Login" />
10.</fieldset>
11.</form>
Buat program sukses_login.php, simpan di folder: application\views\
ketik kode berikut:
1.<h1>Sukses Login</h1>
2.<?php if($this->session->userdata('nmuser')) : ?>
3.<p><?php echo 'Nama User : '.$this->session->userdata('nmuser').'<br />'; ?></p>
4.<p><a href="/logout/">LOGOUT</a></p>
5.<?php endif; ?>
Buat program main.php, simpan di folder: application\controllers\
ketik kode berikut:
01.class Main extends CI_Controller {
02. 
03. 
04.function __construct()  {
05.parent::__construct();
06.}
07. 
08. 
09.function index()  {
10.if($this->input->post('btnlogin'))
11.{
12.$username = $this->input->post('username');
13.$userpass = $this->input->post('userpass');
14.$rs = $this->db->query("select nmuser from tabel_user
15.where nmlogin = '$username' and psuser = md5('$userpass')");
16.if($rs->num_rows()>0)  {
17.$row = $rs->row();
18.$this->session->set_userdata('nmuser', $row->nmuser);
19.redirect('main/sukses_login/');
20.} else {
21.$this->session->set_flashdata('message', 'User dan Password Salah');
22.redirect('main/index');
23.}
24.}
25. 
26. 
27.$this->load->view('header');
28.$this->load->view('form_login');
29.$this->load->view('footer');
30.}
31. 
32. 
33.function sukses_login()
34.{
35.$this->load->library(array('session'));
36.$this->load->view('header');
37.$this->load->view('sukses_login');
38.$this->load->view('footer');
39.}
40. 
41. 
42.function logout()
43.{
44.$this->load->library(array('session'));
45.$this->session->sess_destroy();
46.redirect('main/index/');
47.}
48.}

Selesai.
Label:

Posting Komentar