Halo sobat blogger bagaimana kabar kalian ? Mudah – mudahan sehat selalu ya. Dalam kesempatan kali ini saya akan membagikan tutorial yang berjudul “Cara membuat Form register responsive di codeigniter”. Untuk membuat style nya disini saya menggunakan pure css (css murni) tanpa framework seperti Bootstrap dll. Mungkin untuk teman – teman yang sudah terbiasa dengan bootstrap bisa desain formnya menggunakan bootstrap. Namun dalam kesempatan kali ini saya akan menggunakan pure css agar teman – teman yang belum mahir css lebih paham.
Langsung saja ke intinya, untuk membuat Form register responsive di codeigniter ada beberapa tahap yang harus teman – teman ikut, tahap – tahapannya adalah sebagai berikut :
1. Buat database dan table nya.
Jika teman – teman belum membuat database untuk latihan teman – teman, kalian dapat mengikut langkah-langkah ini.
a) Buat Database
Pastikan dalam hal ini XAMPP teman-teman sudah on ya. Tahap pertama adalah buka terminal (untuk Linux user) atau cmd (untuk Windows user) .
Windows :
- ketik di cmd cd../../ (ENTER) untuk pindah ke C:>
- kemudian ketik cd xampp/mysql/bin (default instalasinya ada di drive c:) (enter)
- kemudian ketik mysql -u root (root: adalah default user mysql) (enter)
- jika sudah masuk ke database MySQL kemudian ketik
CREATE DATABSE latihan; (enter)
- seteleh membuat database maka pilih database yang akan kita gunakan dengan cara mengetik use latihan; (enter)
Linux:
Untuk masuk ke mysql dengan terminal ketik mysql -h 127.0.0.1 -u root atau jika mysql teman – teman di password maka tambahkan -p setelah root.
b) Buat Table
Untuk membuat table pada mysql ikuti langkah-langkah berikut ini:
- masih di terminal / cmd silahkan teman-teman ketik seperti berikut:
CREATE TABLE users (
id int(11) NOT NULL PRIMARY KEY auto_increment,
username VARCHAR(45) NOT NULL,
password VARCHAR(255) NOT NULL,
fullname VARCHAR(50) NOT NULL,
level CHAR(1) NOT NULL
);
Atau lebih jelasnya dapat dilihat pada gambar dibawah ini
2. Setelah membuat database dan table nya, kemudian download codeigniter pada laman ini. Disini
penulis menggunakan Codeigniter 3. Setelah download codeigniter silahkan extrak pada folder
htdocs kemudian rename nama folder codeigniternya menjadi latihan atau apapun yang teman - teman inginkan. Untuk pengguna linux folder htdocs terdapat di opt/lampp/htdocs sedangkan untuk pengguna windows defaultnya ada di C:/xampp/htdocs.
3. Kemudian buka folder projectnya bisa menggunakan Sublime Text atau Visual Studio Code disini penulis menggunakan VSCode.
4. Edit file database.php yang terdapat pada folder application/config/database.php rubah menjadi seperti berikut :
$active_group = 'default';$query_builder = TRUE;$db['default'] = array('dsn' => '','hostname' => 'localhost','username' => 'root','password' => '','database' => 'latihan','dbdriver' => 'mysqli','dbprefix' => '','pconnect' => FALSE,'db_debug' => (ENVIRONMENT !== 'production'),'cache_on' => FALSE,'cachedir' => '','char_set' => 'utf8','dbcollat' => 'utf8_general_ci','swap_pre' => '','encrypt' => FALSE,'compress' => FALSE,'stricton' => FALSE,'failover' => array(),'save_queries' => TRUE);
5. Edit file autoload.php yang terdapat pada folder application/config/autoload.php kemudian rubah pada bagian $autoload['libraries'] = array();
menjadi $autoload['libraries'] = array('database','session','form_validation');
kemudian rubah juga pada bagian $autoload['helper'] = array();
sehingga menjadi $autoload['helper'] = array('url');
6. Buat Controller baru pada folder application/controllers dengan nama Auth.php kemudian ketik kode dibawah ini.
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class Auth extends CI_Controller {public function __construct(){parent::__construct();$this->load->model('m_auth');$this->_salt ="abcde1234567,?}|+!*&^%$#@~890987654321abcde#@&!,?}|+!*&^%$#@~";}public function index(){$this->load->view('view_register');}public function register(){$this->form_validation->set_rules('username', 'username','trim|required|min_length[5]|max_length[45]');$this->form_validation->set_rules('password', 'password', 'trim|required|min_length[8]');$this->form_validation->set_rules('fullname', 'fullname', 'trim|required');$this->form_validation->set_rules('level', 'level', 'trim|required');if($this->form_validation->run() == FALSE) {echo "<script> alert('Register gagal') </script>";redirect('auth','refresh');} else {$data = array('username' => $this->input->post('username'),'password' => sha1($this->_salt.$this->input->post('password')),'fullname' => $this->input->post('fullname'),'level' => $this->input->post('level'));if($this->m_auth->register($data) === TRUE){echo "<script> alert('Selamat register berhasil') </script>";redirect('auth','refresh');} else {echo "<script> alert('Register gagal') </script>";redirect('auth','refresh');}}}}/* End of file Auth.php */
Sedikit penjelasan :
Pertama public function __contruct() digunakan untuk load secara otomatis seperti helper, library atau model. Contoh script diatas model m_auth di load ketika controller Auth dipanggil.
Untuk string $this->_salt pada kode diatas boleh di ganti dengan text yang teman - teman inginkan. Fungsi dari salt adalah untuk memperkuat enkripsi, semakin rumit makan semakin kuat enkripsinya.
7. Buat model dengan nama M_auth.php simpan pada direktori application/models/M_auth.php
Berikut ini skript pada M_auth.php:
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class M_auth extends CI_Model {public function register($data){return $this->db->insert('users', $data);}}/* End of file M_auth.php */
8. Setelah membuat model M_auth.php kemudian buatlah views dengan nama view_register.php simpan pada application/views/view_register.php .
Kemudian ketik script berikut ini :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Register</title><style>body {font-family: Arial, Helvetica, sans-serif;}form {border: 3px solid #f1f1f1;}input[type=text], input[type=password],select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #4CAF50;box-sizing: border-box;}button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;}button:hover {opacity: 0.8;}.cancelbtn {width: auto;padding: 10px 18px;background-color: #f44336;}.imgcontainer {text-align: center;margin: 24px 0 12px 0;}img.avatar {width: 20%;border-radius: 50%;}.container {padding: 16px;}span.psw {float: right;padding-top: 16px;}/* Change styles for span and cancel button on extra small screens */@media screen and (max-width: 300px) {span.psw {display: block;float: none;}.cancelbtn {width: 100%;}}</style></head><body><div class="container"><h3>Register Form</h3><form action="<?= site_url('auth/register')?>" method="POST"><label for="username">username</label><input type="text" name="username" placeholder="username" required /><label for="password">password</label><input type="password" name="password" placeholder="password" required /><label for="fullname">fullname</label><input type="text" name="fullname" placeholder="fullname" required /><label for="fullname">level</label><select name="level"><option value="" disabled selected>--pilih level--</option><option value="1" >admin</option><option value="2" >operator</option><option value="3" >user</option></select><button type="submit" name="register">Register</button></form></div></body></html>
Setelah semuanya selesai kemudian buka browser kemudian buka localhost/(nama project codeigniter)/index.php/auth. Contoh nama project codeigniter saya adalah tutorial maka saya ketik di url adalah localhost/tutorial/index.php/auth . Jika semuanya benar maka akantampil seperti gambar dibawah ini :
Sekian tutorial Cara membuat form register dengan PHP Codeigniter , MySQL, dan CSS mudah - mudahan bermanfaat untuk teman-teman. Source code dapat diunduh disini.
Apabila ada pertanyaan silahkan tinggalkan komentar.
No comments: