Difference between revisions of "Login CodeIgniter"

From belajarwiki
Jump to navigation Jump to search
Line 151: Line 151:
 
===View Login===
 
===View Login===
 
<pre>
 
<pre>
−
<!DOCTYPE html>
+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
−
<html lang="en">
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
−
<head>
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
−
    <meta charset="UTF-8">
+
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/login.css">
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
 
−
    <title>Form Login</title>
+
<div class="container login-container">
−
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  
+
    <div class="row">
−
</head>
+
        <div class="col-md-6 login-form-1">
−
<body>
+
            <h3>Login for Form 1</h3>
−
    <br>
+
            <form>
−
    <div class="w3-container">
+
                <div class="form-group">
−
        <div class="w3-row">
+
                    <input type="text" class="form-control" placeholder="Your Email *" value="" />
−
            <div class="w3-col" style="width:30%"><p></p></div>
 
−
            <div class="w3-col" style="width:40%">
 
−
                <div class="w3-card-4">
 
−
                    <div class="w3-container w3-blue">
 
−
                        <h2>Silahkan Login</h2>
 
−
                    </div>
 
−
                    <form class="w3-container" method="POST" action="<?php echo site_url('login/auth');?>">
 
−
                        <p>     
 
−
                            <label class="w3-text-blue"><b>Username</b></label>
 
−
                            <input class="w3-input w3-border w3-sand" name="username" type="text">
 
−
                        </p>
 
−
                        <p>     
 
−
                            <label class="w3-text-blue"><b>Password</b></label>
 
−
                            <input class="w3-input w3-border w3-sand" name="pass" type="password">
 
−
                        </p>
 
−
                        <p>
 
−
                            <button class="w3-btn w3-blue">Masuk</button>
 
−
                        </p>
 
−
                    </form>
 
 
                 </div>
 
                 </div>
−
                 <div class="w3-panel w3-blue w3-display-container">
+
                 <div class="form-group">
−
                     <?php echo $this->session->flashdata('msg');?>
+
                    <input type="password" class="form-control" placeholder="Your Password *" value="" />
−
                 </div>                
+
                </div>
−
            </div>
+
                <div class="form-group">
−
            <div class="w3-col" style="width:30%"><p></p></div>
+
                    <input type="submit" class="btnSubmit" value="Login" />
 +
                </div>
 +
                <div class="form-group">
 +
                     <a href="#" class="ForgetPwd">Forget Password?</a>
 +
                </div>
 +
            </form>
 +
        </div>
 +
        <div class="col-md-6 login-form-2">
 +
            <h3>Login for Form 2</h3>
 +
            <form>
 +
                <div class="form-group">
 +
                    <input type="text" class="form-control" placeholder="Your Email *" value="" />
 +
                 </div>
 +
                <div class="form-group">
 +
                    <input type="password" class="form-control" placeholder="Your Password *" value="" />
 +
                </div>
 +
                <div class="form-group">
 +
                    <input type="submit" class="btnSubmit" value="Login" />
 +
                </div>
 +
                <div class="form-group">
 +
 
 +
                    <a href="#" class="ForgetPwd" value="Login">Forget Password?</a>
 +
                </div>
 +
            </form>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
−
</body>
+
</div>
−
</html>
+
</pre>
 +
 
 +
Dengan CSS nya
 +
<pre>
 +
.login-container{
 +
    margin-top: 5%;
 +
    margin-bottom: 5%;
 +
}
 +
.login-form-1{
 +
    padding: 5%;
 +
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
 +
}
 +
.login-form-1 h3{
 +
    text-align: center;
 +
    color: #333;
 +
}
 +
.login-form-2{
 +
    padding: 5%;
 +
    background: #0062cc;
 +
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
 +
}
 +
.login-form-2 h3{
 +
    text-align: center;
 +
    color: #fff;
 +
}
 +
.login-container form{
 +
    padding: 10%;
 +
}
 +
.btnSubmit
 +
{
 +
    width: 50%;
 +
    border-radius: 1rem;
 +
    padding: 1.5%;
 +
    border: none;
 +
    cursor: pointer;
 +
}
 +
.login-form-1 .btnSubmit{
 +
    font-weight: 600;
 +
    color: #fff;
 +
    background-color: #0062cc;
 +
}
 +
.login-form-2 .btnSubmit{
 +
    font-weight: 600;
 +
    color: #0062cc;
 +
    background-color: #fff;
 +
}
 +
.login-form-2 .ForgetPwd{
 +
    color: #fff;
 +
    font-weight: 600;
 +
    text-decoration: none;
 +
}
 +
.login-form-1 .ForgetPwd{
 +
    color: #0062cc;
 +
    font-weight: 600;
 +
    text-decoration: none;
 +
}
 +
 
 
</pre>
 
</pre>
  

Revision as of 07:54, 22 November 2021

Database

Create Database

CREATE DATABASE my_db;

Create Table

CREATE TABLE `user` (
 `user_id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(32) NOT NULL,
 `username` varchar(64) NOT NULL,
 `password` varchar(255) NOT NULL,
 `role` int(11) NOT NULL,
 `user_status` int(11) NOT NULL,
 PRIMARY KEY (`user_id`)
);

Insert Data

Jika menggunakan SHA 

INSERT INTO user VALUES
('1','User','user',SHA2('user123', 224),'2','1'),
('2','Admin','admin',SHA2('admin123', 224),'1','1');


Jika menggunakan MD5 

INSERT INTO user VALUES
('1','User','user',MD5('user123'),'2','1'),
('2','Admin','admin',MD5('admin123'),'1','1');

Controller

Login

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
    function __construct(){
        parent::__construct();
        $this->load->model('Model_login','Model_login');
    }   

    function index(){
        if($this->session->userdata('logged') !=TRUE){
            $this->load->view('view-login');
        }else{
            $url=base_url('home');
            redirect($url);
        };
    }   

    function auth(){
        $username = $this->input->post('username');
        $password = $this->input->post('pass');               
        $validasi = $this->Model_login->query_validasi_username($username);
        if($validasi->num_rows() > 0){
            $validate_pswd=$this->Model_login->query_validasi_password($username,$password);
            if($validate_pswd->num_rows() > 0){
                $x = $validate_pswd->row_array();
                if($x['user_status']=='1'){
                    $this->session->set_userdata('logged',TRUE);
                    $this->session->set_userdata('user',$username);
                    $id=$x['user_id'];
                    if($x['role']=='1'){ //Administrator
                        $name = $x['user_name'];
                        $this->session->set_userdata('access','Administrator');
                        $this->session->set_userdata('id',$id);
                        $this->session->set_userdata('name',$name);
                        redirect('home');
                    }else if($x['role']=='2'){ //User
                        $name = $x['user_name'];
                        $this->session->set_userdata('access','User');
                        $this->session->set_userdata('id',$id);
                        $this->session->set_userdata('name',$name);
                        redirect('home');
                    }
                }else{
                    $url=base_url('login');
                    echo $this->session->set_flashdata('msg','<span onclick="this.parentElement.style.display=`none`" class="w3-button w3-large w3-display-topright">×</span>
                    <h3>Uupps!</h3>
                    <p>Akun kamu telah di blokir. Silahkan hubungi admin.</p>');
                    redirect($url);
                }
            }else{
                $url=base_url('login');
                echo $this->session->set_flashdata('msg','<span onclick="this.parentElement.style.display=`none`" class="w3-button w3-large w3-display-topright">×</span>
                    <h3>Uupps!</h3>
                    <p>Password yang kamu masukan salah.</p>');
                redirect($url);
            }
        }else{
            $url=base_url('login');
            echo $this->session->set_flashdata('msg','<span onclick="this.parentElement.style.display=`none`" class="w3-button w3-large w3-display-topright">×</span>
            <h3>Uupps!</h3>
            <p>Email yang kamu masukan salah.</p>');
            redirect($url);
        }
    }

    function logout(){
        $this->session->sess_destroy();
        $url=base_url('login');
        redirect($url);
    }
}

Home

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

class Home extends CI_Controller {
	function __construct(){
		parent::__construct();
		if($this->session->userdata('logged') !=TRUE){
                    $url=base_url('login');
                    redirect($url);
		};
	}
	
	public function index()
	{
		$this->load->view('view-home');
	}
}


Model

Login

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

class Model_login extends CI_Model{

    function query_validasi_username($username){
    	$result = $this->db->query("SELECT * FROM user WHERE username='$username' LIMIT 1");
        return $result;
    }

    function query_validasi_password($username,$password){
    	$result = $this->db->query("SELECT * FROM user WHERE username='$username' AND user_password=SHA2('$password', 224) LIMIT 1");
        return $result;
    }

}

View

View Login

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/login.css">

<div class="container login-container">
    <div class="row">
        <div class="col-md-6 login-form-1">
            <h3>Login for Form 1</h3>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Your Email *" value="" />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Your Password *" value="" />
                </div>
                <div class="form-group">
                    <input type="submit" class="btnSubmit" value="Login" />
                </div>
                <div class="form-group">
                    <a href="#" class="ForgetPwd">Forget Password?</a>
                </div>
            </form>
        </div>
        <div class="col-md-6 login-form-2">
            <h3>Login for Form 2</h3>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Your Email *" value="" />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Your Password *" value="" />
                </div>
                <div class="form-group">
                    <input type="submit" class="btnSubmit" value="Login" />
                </div>
                <div class="form-group">

                    <a href="#" class="ForgetPwd" value="Login">Forget Password?</a>
                </div>
            </form>
        </div>
    </div>
</div>

Dengan CSS nya 

.login-container{
    margin-top: 5%;
    margin-bottom: 5%;
}
.login-form-1{
    padding: 5%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-1 h3{
    text-align: center;
    color: #333;
}
.login-form-2{
    padding: 5%;
    background: #0062cc;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-2 h3{
    text-align: center;
    color: #fff;
}
.login-container form{
    padding: 10%;
}
.btnSubmit
{
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    border: none;
    cursor: pointer;
}
.login-form-1 .btnSubmit{
    font-weight: 600;
    color: #fff;
    background-color: #0062cc;
}
.login-form-2 .btnSubmit{
    font-weight: 600;
    color: #0062cc;
    background-color: #fff;
}
.login-form-2 .ForgetPwd{
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.login-form-1 .ForgetPwd{
    color: #0062cc;
    font-weight: 600;
    text-decoration: none;
}

View Home

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
</head>
<body>
    <div class="w3-bar w3-border w3-light-grey w3-card-4">
        <a href="#" class="w3-bar-item w3-blue w3-button">Home</a>
        <?php if($this->session->userdata('access')=='Administrator'){ ?>
            <a href="#" class="w3-bar-item w3-button">Daftar Satu</a>
            <a href="#" class="w3-bar-item w3-button">Daftar Dua</a>
            <a href="#" class="w3-bar-item w3-button">Daftar Tiga</a>
        <?php } if($this->session->userdata('access')=='User'){ ?>
            <a href="#" class="w3-bar-item w3-button">Daftar Empat</a>
        <?php }; ?>
        <a href="<?php echo site_url('login/logout');?>" class="w3-bar-item w3-button w3-red w3-right">Keluar</a>
    </div>
    <div class="w3-container">
        <h1>Hai <?php echo $this->session->userdata('name'); ?></h1>
        <h3>Ini adalah halaman untuk  <?php echo $this->session->userdata('access'); ?></h3>
    </div>
</body>
</html>
Retrieved from "https://kontenbelajar.com/wiki/index.php?title=Login_CodeIgniter&oldid=152"