Membuat Login Multiuser dengan Template AdminLTE + Codeigniter



Membuat login Multiuser dengan framework codeigniter yang di integrasikan menggunakan template AdminLTE , dalam kesempatan kali ini saya akan membagikan bagaimana membuat session multiuser dengan Codeigniter langsung ke tkp;

1. Buat tabel user kedalam database anda ( disini saya menggunakan Mysql )
INSERT INTO `user` (`u_id`, `nama`, `u_name`, `u_paswd`, `role`) VALUES (1, 'andrian', 'andrianext', '21232f297a57a5a743894a0e4a801fc3', 'admin'),(2, 'user admin', 'user', '21232f297a57a5a743894a0e4a801fc3', 'user');
2. Download source Codeigniter versi 2.2 Stable di : www.codeigniter.com/download
3. Extrak dan copy file CI yang sudah di download tersebut ke webserver local anda
4. Kalo menggunakan xampp tarus file tersebut di htdocs, rename nama project sesuai selera anda
5. Setelah itu akan terlihat direktori folder tersebut seperti ini :


6. Buka folder application- controllers, disitu buat contraller dengan nama login.php dan masukan script di bawah ini;

<?php
class Login extends CI_Controller {
    function __construct() {
        parent::__construct();
        session_start();
        $this->load->model(array('m_user'));
        if ($this->session->userdata('u_name')) {
            redirect('dashboard');
        }
    }
    function index() {
        $this->load->view('login');
    }
    function proses() {
        $this->form_validation->set_rules('username', 'username', 'required|trim|xss_clean');
        $this->form_validation->set_rules('password', 'password', 'required|trim|xss_clean');
        if ($this->form_validation->run() == FALSE) {
            $this->load->view('login');
        } else {
            $usr = $this->input->post('username');
            $psw = $this->input->post('password');
            $u = mysql_real_escape_string($usr);
            $p = md5(mysql_real_escape_string($psw));
            $cek = $this->m_user->cek($u, $p);
            if ($cek->num_rows() > 0) {
                //login berhasil, buat session
                foreach ($cek->result() as $qad) {
                    $sess_data['u_id'] = $qad->u_id;
                    $sess_data['nama'] = $qad->nama;
                    $sess_data['u_name'] = $qad->u_name;
                    $sess_data['role'] = $qad->role;
                    $this->session->set_userdata($sess_data);
                }
                redirect('dashboard');
            } else {
                $this->session->set_flashdata('result_login', '<br>Username atau Password yang anda masukkan salah.');
                redirect('login');
            }
        }
    }
    function logout() {
        $this->session->sess_destroy();
        redirect('login');
    }
}

7. Buat model di application- models , berinama m_user.php dan copykan script dibawah ini
<?php
class M_user extends CI_Model {
    private $table = "user";
    function cek($username, $password) {
        $this->db->where("u_name", $username);
        $this->db->where("u_paswd", $password);
        return $this->db->get("user");
    }
    function semua() {
        return $this->db->get("user");
    }
    function cekKode($kode) {
        $this->db->where("u_name", $kode);
        return $this->db->get("user");
    }
    function cekId($kode) {
        $this->db->where("u_id", $kode);
        return $this->db->get("user");
    }
    function getLoginData($usr, $psw) {
        $u = mysql_real_escape_string($usr);
        $p = md5(mysql_real_escape_string($psw));
        $q_cek_login = $this->db->get_where('users', array('username' => $u, 'password' => $p));
        if (count($q_cek_login->result()) > 0) {
            foreach ($q_cek_login->result() as $qck) {
                foreach ($q_cek_login->result() as $qad) {
                    $sess_data['logged_in'] = 'aingLoginWebYeuh';
                    $sess_data['u_id'] = $qad->u_id;
                    $sess_data['u_name'] = $qad->u_name;
                    $sess_data['nama'] = $qad->nama;
                    $sess_data['group'] = $qad->group;
                    $sess_data['rid'] = $qad->rid;
                    $this->session->set_userdata($sess_data);
                }
                redirect('dashboard');
            }
        } else {
            $this->session->set_flashdata('result_login', '<br>Username atau Password yang anda masukkan salah.');
            header('location:' . base_url() . 'login');
        }
    }
}


8. Setelah kita buat controller dan model untuk menu login kemudian kita buat view nya di application - views, dengan nama login.php dan copykan script seperti dibawah ini; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Andrianext | Log in</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- Bootstrap 3.3.2 -->
        <link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet" >
        <!-- Font Awesome Icons -->
        <link href="<?php echo base_url('assets/css/font-awesome.min.css'); ?>" rel="stylesheet">
        <!-- Theme style -->
        <link href="<?php echo base_url('assets/css/AdminLTE.min.css'); ?>" rel="stylesheet">    
        <!-- iCheck -->
        <link href="<?php echo base_url('assets/js/plugins/iCheck/square/blue.css'); ?>" rel="stylesheet">
    </head>
    <body class="login-page">
        <div class="login-box">
            <div class="login-logo">
                <a href="#" ><b>Andria</b>Next</a>
            </div><!-- /.login-logo -->
            <div class="login-box-body">
                <p class="login-box-msg">Sign in to start your session </p>
                <form action="<?php echo site_url('login/proses'); ?>" method="post">
                    <?php
                    if (validation_errors() || $this->session->flashdata('result_login')) {
                        ?>
                        <div class="alert alert-error">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>Warning!</strong>
                            <?php echo validation_errors(); ?>
                            <?php echo $this->session->flashdata('result_login'); ?>
                        </div>
                    <?php } ?>
                    <div class="form-group has-feedback">
                        <input type="text" name="username" class="form-control" placeholder="Username"/>
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" name="password" class="form-control" placeholder="Password"/>
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="checkbox icheck">
                                <label>
                                    <input type="checkbox"> Remember Me
                                </label>
                            </div>                    
                        </div><!-- /.col -->
                        <div class="col-xs-4">
                            <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                        </div><!-- /.col -->
                    </div>
                </form>            
                <div class="social-auth-links text-center">
                    <p>- OR -</p>
                    <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using Facebook</a>
                    <a href="#" class="btn btn-block btn-social btn-google-plus btn-flat"><i class="fa fa-google-plus"></i> Sign in using Google+</a>
                </div><!-- /.social-auth-links -->
                <a href="#">I forgot my password</a><br>
                <a href="register.html" class="text-center">Register a new membership</a>
            </div><!-- /.login-box-body -->
        </div><!-- /.login-box -->
        <!-- jQuery 2.1.3 -->
        <script src="<?php echo base_url('assets/js/plugins/jQuery/jQuery-2.1.3.min.js'); ?>"></script>
        <!-- Bootstrap 3.3.2 JS -->
        <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
        <!-- iCheck -->
        <script src="<?php echo base_url('assets/js/plugins/iCheck/icheck.min.js'); ?>"></script>  
        <script>
            $(function () {
                $('input').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%' // optional
                });
            });
        </script>
    </body>
</html>
9. Copykan folder assets yang berisi ccs dan javascript yang sudah di custume dari template bootstrap AdminLTE2.0, dan bisa di download di bawah ini.
10. Coba buka project anda misal ; http://localhost/andrianext/ ,


11. Masukan User: andrianext  , Password : admin sebagai login administrator/admin
12. Maka Hasilnya akan seperti gambar di bawah ini;

13. Dan kita coba login dengan user : user , Password : admin , lihat di gambar yang di lingkari merah,akan nampak perbedaan di jenis user login ya, Administrator / User.



14. Demikian tutorial untuk membuat menu login multi user, untuk source codenya anda bisa download di mari. http://adf.ly/1AFsNu


Seting Mysql Server di Ubuntu Server agar bisa di akses di luar host

Setelah Instal Mysql server di ubuntu server 14.04 secara default Mysql tidak dapat di akses dari luar host atau Mysql tidak mengijinkan user lain mengakses dai luar PC, artinya Mysql hanya dapat di akses dari localhost atau server itu sendiri. 
Dalam penggunaanya kebanyakan webserver yang kita punya ingin di koneksikan pada Database yang beda server, trus bila mysql ya tidak bisa di akses dari luar host bagaimana ??

Berikut ini cara seting Mysql Server yang telah di intall agar bisa di aksesdari luar host atau komputer lai dalam satu jaringan :
1. Edit file my.cnf  di  : /etc/mysql/my.cnf 
    Cari baris
    # Instead of skip-networking the default is now to listen only on
    # localhost which is more compatible and is not less secure.
       bind-address            = 127.0.0.1

2. Ubah bind-address defaultnya menjadi : bind-address        = 'IP Address server"
    misal bind-address = 192.168.1.10
3. Simpan dan restart service mysql anda.
    # /etc/init.d/mysql restart
4. Seteah itu buat konfigurasi untuk remote mysql
    login ke mysql
    #mysql -u root -p
      Enter password: "password"
     mysql>GRANT ALL PRIVILEGES ON * . * TO root@’%’ IDENTIFIED BY ‘MyPASSWORD’;

5. Pengguna root telah diberikan akses dari host manapun dan sekarang tinggal tambahkan iptables untuk port 3306 agar dapat di allow dari luar.
    #  /sbin/iptables -A INPUT -i eth0 -p tcp --destination-port 3306 -j ACCEPT

6. Seteleah itu kita coba akses dari luar host, contoh menggunakan aplikasu mysql client misal menggunakan navicat atau sqlyog.
   

Install ubuntu server 14.04 di Proxmox Virtual Machine

Install linux Ubuntu di mesin virtual Proxmox sama seperti install langsung di mesin/komputer fisik. Perbedaan ya di sini hanya di awal persiapan instalasinya, langsung saja berikut prosesnya:

1. Download file iso ubuntu server di
    # http://www.ubuntu.com/download/server
2. Login ke server Proxmox misal  ;
    # https://10.10.10.6:8006
    # user : root
    # password proxmox anda



3. Upload Iso file ubuntu yang telah di download 
    # klik local (V) >> Upload >> Select file iso ubuntu yang telah di download
    # klik upload, hasilnya nampak seperti gambar di bawah ini; 


4. Kemudian klik tombol Create VM
    # Isikan name ; ubuntuserver
    # Pilih type OS linux 3.x/2.6 kernel 
    # CD/DVD , select iso image ubuntu server
    # tentukan besar hardisk 
    # Seting besar RAM yang akan di gunakan 
      # Network >> pilih Brigde Mode
    # Finish
5. Setelah mesin virtual dibuat, kita masuk ke proses intalasi dengan klik tombol start 
   # klik console untuk melihat proses yang berjalan
6. Pilih install ubuntu server



 # Select other location, pilih Asia - Indonesia

   
   # Keyboard layout Inglish (US)

7. Configure DHCP Network tidak ditemukan , pilih configure Network manual


8. Masukan IP Addres yang di jadikan server



9. Isikan hostname : server

10. Isikan user name dan password
11. Partition disk 
     # Use entire disk : menggunakan seluruh ruang disk (pembagian untuk swap dan system otomatis)
     # Manual : menentukan disk sesuai kebutuhan misal :
       - Swap 1 GB dan sisanya system


12. Write the changes to disks  ; yes


13. Tunggu proses instalasi system sampai selesai



14. Pilih paket server yang akan di instal secara otomatis
15. Setelah semua selesainakan terakhir install grub boot loader : yes


16 . Reboot otomatis, server ubuntu siap di gunakan 
17. Login dengan user password yang telah dibuat, ketik
    #  apt-get update : untuk mengupdate system ubuntu server


demikian cara instalasi ubuntu server di proxmox, 

Cara Membuat/ mempercantik Kotak Pencarian/search box di blogspot dengan css

Search Box atau Kotak Pencarian salah satu bagian penting dari sebuat blog atau pun website.
Untuk membuat search box di blogspot sangatlah mudah yaitu ada 2 cara dengan klik LayOut, "Add Gadget", dan pilih Gadget "Search Box" atau "Kotak Pencarian" , kemuadian klik Save! dari situ akan terdapat menu search box standar dari blogspot, untuk mendapatkan menu search box yang lebih keren dengan cara kedua yaitu :



Klik LayOut "Add a Gadget", pilih "HTML Javascript", dan Masukan Kode dibawah ini kedalam konten javascript ;
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search here..." type="text" />
<button id="search-button" type="submit"><span>Search</span></button>
</form>
</div>
setelah itu Klik Save.
dan tambahkan kode css berikut ini di atas kode : ]]></b:skin>
 #search-box {position: relative;width: 100%;margin: 10px 0 0 0;}#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
Demikian lah cara untuk membuat kotak pencarian di blogspot, dan anda bisa mengkreasikan ya sendiri dengan mengubah kode css diatas sesuai keinginan anda.

Pemrograman

More »

Networking

More »