Cara Mudah Membuat Login dan Register di CodeIgniter Dengan Ajax : Instalasi & Persiapan


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Cara Mudah Membuat Login dan Register di CodeIgniter Dengan Ajax : Instalasi & Persiapan - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat Proses Register & Login di Framework CodeIgniter Dengan Menggunakan Ajax dan Famework Bootstrap 4 sebagai tampilannya.

Dan nanti kita juga akan belajar membuat validasi dari inputan di Form menggunakan Library JavaScript yaitu Sweet Alert2.

Pada artikel pertama ini, kita semua akan belajar cara instalasi Framework CodeIgniter beserta persiapan-persiapan yang harus di lakukan saat pertama kali membuat project.

INSTALASI CODEIGNITER

Sekarang silahkan unduh Framework CodeIgniter dari situs resminya di www.codeigniter.com dan setelah berhasil terunduh, sekarang kalian extract zip dari Framework Codeigniter.

Silahkan kalian rename folder hasil dari extract Famework CodeIgniter dengan nama “ci-register-login-ajax” dan silahkan kalian pindahkan ke dalam folder C:/XAMPP/htdocs (jika kalian menggunakan XAMPP).

Untuk melihat apakah installasi project CodeIgniter kita berhasil atau tidak, kita bisa ketik http://localhost/ci-register-login-ajax di web browser, jika berhasil kurang lebih tampilannya seperti berikut ini :


Oke, kita lanjutkan ketahap selanjutnya yaitu mengatur beberapa config sebelum kita memulai koding kita, oke sekarang kita mulai. Silahkan buka file autoload.php didalam folder application/config dan silahkan cari kode dibawah ini :

$autoload['libraries'] = array('');

Dan ubahlah menjadi seperti berikut ini :

$autoload['libraries'] = array('database', 'session');

Kode diatas adalah library-library yang akan kita gunakan untuk memebuat project ini, diantaranya ada Library Database dan Library Session.

Dan silahkan cari juga kode berikut ini :

$autoload['helper'] = array('');

Dan ubahlah menjadi seperti berikut ini :

$autoload['helper'] = array('url');

Kode diatas merupakan helper dari URL di Framewok CodeIgniter.

Silahkan kalian save file autoload.php. Oke kita lanjutkan ketahap selanjutnya, sekarang silahkan kalian buka file config.php di dalam folder application/config, dan cariral kode dibawah ini :

$config['base_url'] = '';

Silahkan kalian ubah menjadi seperti berikut ini :

$config['base_url'] = "http://".$_SERVER['HTTP_HOST'].
str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

Kode diatas digunakan untuk menginisialisasi alamat dari project kita biar otomatis atau dinamis.

Karena sebelumnya kita sudah mengaktifkan Library Database dari CodeIgniter, maka sekarang kita harus mengatur koneksi Databasenya. Silahkan buka file database.php didalam folder application/config. Silahkan cari kode dibawah ini :

$db['default'] = array(
    'dsn'    => '',
    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',
    '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
);

Dan ubahlan menjadi seperti berikut ini :

$db['default'] = array(
    'dsn'    => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'db_ajax_ci',
    '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
);

Dari perubahan kode diatas, kita melakukan terhadap beberapa variabel yang tugasnya menyambungkan antara project kiita ke Database MySQL.

MEMBUAT DATABASE

Karena kita nanti akan praktek membuat proses Register dan Login tentu saja kita butuh yang namanya database, Database nanti yang kita gunakan untuk menyimpan sebuah data.

Sekarang silahkan buat database baru di http://lcoalhost/phpmyadmin dengan nama “db_ajax_ci” kurang lebih seperti gambar dibawah ini :


Setelah kita berhasil membuat sebuah database baru, sekarang kita lanjutkan membuat sebuah tabel baru, tabel ini nanti yang akan menyimpan data saat kita melakukan Registrasi.

Sekarang silahkan buat tabel baru dengan nama tbl_users dan silahkan berikan 4 kolom. Dan kurang lebih struktur tabelnya seperti berikut ini :


Dari gambar pembuatan tabel diatas, berikut penjelasan singkatnya:

  • id_user - digunakan sebagai PRIMARY KEY dan dijadikan AUTO INCREMENT dengan tipe data INT dan dengan Lenght / Value 11, dimana kolom ini sebagai perwakilan satu record / satu baris.
  • nama_lengkap - kolom ini digunakan untuk menyimpan data nama lengkap dengan tipe data VARCHAR dengan Lenght / Value 100.
  • username - kolom ini digunakan untuk menyimpan username dengan tipe data VARCHAR dengan Lenght / Value 100.
  • password - dan yang kolom terakhir ini adalah untuk menyimpan password, di kolom ini kita menggunakan tipe data VARCHAR dengan Lenght / Value 100 juga.

Oke sampai sini dulu pembahasannya, kita akan lanjutkan bagaimana cara membuat sebuah proses Register menggunakan teknik Ajax di CodeIgniter yang akan kita bahas di artikel selanjutnya. Terima Kasih


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR