Cara Buat Web Sederhana dengan PHP CodeIgniter

Selamat datang kembali, Sobat Sederhana! Kali ini kita akan membahas tentang cara membuat website sederhana menggunakan bahasa pemrograman PHP dengan framework CodeIgniter. Bagi pemula, mungkin terdengar sulit, tapi jangan khawatir karena di artikel ini saya akan membahasnya secara detail dan mudah dipahami.

Pengenalan CodeIgniter

Sebelum memulai tutorial cara membuat website sederhana menggunakan PHP CodeIgniter, ada baiknya kita mengenal terlebih dahulu framework CodeIgniter. CodeIgniter merupakan salah satu framework PHP yang populer dikalangan web developer karena kemudahan penggunaannya serta performa yang cepat.

CodeIgniter memiliki kelebihan dari segi struktur kode serta database dan query builder yang membantu web developer untuk membangun website dengan lebih mudah dan cepat. Selain itu, CodeIgniter juga memiliki dokumentasi yang lengkap dan komunitas yang aktif.

Dalam tutorial kali ini, kita akan belajar cara membuat website sederhana dengan CodeIgniter versi 3.1.11.

Prasyarat Sebelum Memulai

Sebelum memulai tutorial cara membuat website sederhana dengan PHP CodeIgniter, ada beberapa prasyarat yang harus dipenuhi. Berikut adalah prasyaratnya:

No
Prasyarat
Keterangan
1
PHP 5.6 atau versi yang lebih tinggi
Karena CodeIgniter menggunakan PHP, maka pastikan Anda telah menginstall PHP versi 5.6 atau versi yang lebih tinggi di komputer Anda.
2
Web server
Anda membutuhkan web server seperti Apache atau Nginx untuk menjalankan aplikasi website Anda.
3
CodeIgniter Framework
Silakan download dan install framework CodeIgniter versi 3.1.11 di komputer Anda.
4
Text Editor
Anda membutuhkan text editor seperti Sublime Text, Atom, atau Visual Studio Code untuk menulis kode program.

Membuat Project CodeIgniter

Setelah Anda memenuhi prasyarat sebelum memulai tutorial cara membuat website sederhana dengan PHP CodeIgniter, selanjutnya kita akan membuat project CodeIgniter. Berikut langkah-langkahnya:

  1. Buat folder baru di direktori htdocs di dalam folder XAMPP dengan nama “coba-ci”.
  2. Download CodeIgniter versi 3.1.11 dan ekstrak file zipnya.
  3. Pindahkan semua file dan folder yang ada di dalam folder CodeIgniter ke folder “coba-ci” yang telah Anda buat sebelumnya.
  4. Buka file “application/config/config.php” dan ubah baris berikut:
$config['base_url'] = 'http://localhost/coba-ci/';

Ubah “http://localhost/coba-ci/” sesuai dengan nama folder yang telah Anda buat sebelumnya.

TRENDING 🔥  Cara Membuat Bubur Manado Sederhana

Setelah langkah-langkah di atas dilakukan, project CodeIgniter sudah berhasil dibuat dan siap digunakan.

Membuat Halaman Utama

Setelah membuat project CodeIgniter, selanjutnya kita akan membuat halaman utama. Halaman utama adalah halaman pertama yang dilihat oleh pengunjung ketika membuka website Anda. Berikut langkah-langkahnya:

  1. Buka file “application/config/routes.php” dan tambahkan baris berikut:
$route['default_controller'] = 'Welcome';$route['404_override'] = '';$route['translate_uri_dashes'] = FALSE;

Dalam contoh ini, controller default adalah “Welcome”.

  1. Buat file “application/controllers/Welcome.php” dan isikan kode berikut:
class Welcome extends CI_Controller {public function index(){$this->load->view('welcome_message');}}

Controller di atas akan memanggil view “welcome_message” yang akan kita buat selanjutnya.

  1. Buat file “application/views/welcome_message.php” dan isikan kode berikut:
<!DOCTYPE html><html><head><title>Halaman Utama</title></head><body><h1>Selamat Datang di Website Sederhana</h1><p>Ini adalah halaman utama.</p></body></html>

File di atas berisi kode HTML yang menampilkan judul halaman serta pesan sambutan.

Setelah langkah-langkah di atas dilakukan, buka browser Anda dan ketik “http://localhost/coba-ci/”. Jika sukses, halaman utama akan tampil di browser Anda.

Membuat Halaman Login

Selanjutnya, kita akan membuat halaman login. Halaman login adalah halaman yang digunakan oleh pengguna untuk masuk ke dalam sistem. Berikut langkah-langkahnya:

  1. Buat file “application/controllers/Auth.php” dan isikan kode berikut:
class Auth extends CI_Controller {public function index(){$this->load->view('auth/login');}}

Controller di atas akan memanggil view “auth/login” yang akan kita buat selanjutnya.

  1. Buat file “application/views/auth/login.php” dan isikan kode berikut:
<!DOCTYPE html><html><head><title>Halaman Login</title></head><body><h1>Halaman Login</h1><form method="post" action="#"><label for="username">Username:</label><input type="text" id="username" name="username"><br><label for="password">Password:</label><input type="password" id="password" name="password"><br><input type="submit" value="Login"></form></body></html>

File di atas berisi kode HTML yang menampilkan form login dengan input username dan password.

Setelah langkah-langkah di atas dilakukan, buka browser Anda dan ketik “http://localhost/coba-ci/auth”. Jika sukses, halaman login akan tampil di browser Anda.

Membuat Fungsi Login

Selanjutnya, kita akan membuat fungsi login. Fungsi login akan memeriksa apakah username dan password yang dimasukkan oleh pengguna benar atau tidak. Berikut langkah-langkahnya:

  1. Tambahkan kode berikut ke dalam file “application/views/auth/login.php”:
<?php echo form_open('auth/login'); ?><label for="username">Username:</label><input type="text" id="username" name="username"><br><label for="password">Password:</label><input type="password" id="password" name="password"><br><input type="submit" value="Login"><?php echo form_close(); ?>

Kode di atas menambahkan fungsi form validation ke dalam form login.

  1. Buat file “application/controllers/Auth.php” dan isikan kode berikut:
class Auth extends CI_Controller {public function login(){$this->load->library('form_validation');$this->form_validation->set_rules('username', 'Username', 'required');$this->form_validation->set_rules('password', 'Password', 'required');if ($this->form_validation->run() === FALSE) {$this->load->view('auth/login');} else {redirect('dashboard');}}public function logout(){redirect('auth/login');}}

Kode di atas menambahkan fungsi form validation untuk memeriksa apakah username dan password yang dimasukkan oleh pengguna benar atau tidak. Jika benar, maka akan diarahkan ke halaman dashboard.

TRENDING 🔥  Cara Buat Hiasan Dinding Sederhana dari Kertas

Setelah langkah-langkah di atas dilakukan, buka browser Anda dan ketik “http://localhost/coba-ci/auth/login”. Jika sukses, akan muncul pesan error karena form validation masih kosong.

Membuat Halaman Dashboard

Selanjutnya, kita akan membuat halaman dashboard. Halaman dashboard adalah halaman yang digunakan oleh pengguna setelah berhasil login. Berikut langkah-langkahnya:

  1. Buat file “application/controllers/Dashboard.php” dan isikan kode berikut:
class Dashboard extends CI_Controller {public function index(){$this->load->view('dashboard/index');}}

Controller di atas akan memanggil view “dashboard/index” yang akan kita buat selanjutnya.

  1. Buat file “application/views/dashboard/index.php” dan isikan kode berikut:
<!DOCTYPE html><html><head><title>Halaman Dashboard</title></head><body><h1>Halaman Dashboard</h1><p>Selamat datang, {{username}}!</p><a href="auth/logout">Logout</a></body></html>

File di atas berisi kode HTML yang menampilkan pesan selamat datang serta tombol logout.

  1. Buka file “application/controllers/Auth.php” dan ubah kode fungsi “login” seperti berikut:
class Auth extends CI_Controller {public function login(){$this->load->model('user_model');$this->load->library('form_validation');$this->form_validation->set_rules('username', 'Username', 'required');$this->form_validation->set_rules('password', 'Password', 'required');if ($this->form_validation->run() === FALSE) {$this->load->view('auth/login');} else {$username = $this->input->post('username');$password = $this->input->post('password');$user = $this->user_model->get_user($username, $password);if ($user) {$data = array('username' => $user['username']);$this->session->set_userdata($data);redirect('dashboard');} else {$this->session->set_flashdata('message', 'Username atau password salah.');redirect('auth/login');}}}public function logout(){$this->session->unset_userdata('username');redirect('auth/login');}}

Kode di atas menambahkan fungsi untuk memeriksa apakah username dan password yang dimasukkan oleh pengguna benar atau tidak. Jika benar, maka akan diarahkan ke halaman dashboard.

Setelah langkah-langkah di atas dilakukan, buka browser Anda dan ketik “http://localhost/coba-ci/dashboard”. Jika sukses, akan muncul pesan error karena belum ada data yang di-passing ke dalam halaman tersebut.

Membuat Model User

Selanjutnya, kita akan membuat model user. Model user adalah model yang digunakan untuk memperoleh data user dari database. Berikut langkah-langkahnya:

  1. Buat file “application/models/User_model.php” dan isikan kode berikut:
class User_model extends CI_Model {public function __construct(){$this->load->database();}public function get_user($username, $password){$query = $this->db->get_where('users', array('username' => $username, 'password' => $password));return $query->row_array();}}

Kode di atas membuat fungsi “get_user” yang akan digunakan untuk mengambil data user berdasarkan username dan password dari tabel “users” di database.

TRENDING 🔥  Cara Memasak Kornet Pronas Sederhana

Menghubungkan Ke Database

Selanjutnya, kita akan menghubungkan ke database. Berikut langkah-langkahnya:

  1. Buka file “application/config/database.php” dan isikan kode berikut:
$active_group = 'default';$query_builder = TRUE;$db['default'] = array('dsn' => '','hostname' => 'localhost','username' => 'root','password' => '','database' => 'ci_sederhana','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);

Kode di atas menghubungkan ke database “ci_sederhana” yang telah dibuat sebelumnya pada XAMPP.

Cara Menggunakan

Dalam tutorial ini, kita telah belajar cara membuat website sederhana menggunakan PHP CodeIgniter. Anda bisa mengembangkan website Anda sendiri dengan fitur-fitur lebih lanjut seperti validasi form, pagination, dan lain sebagainya.

FAQ

  • Apakah CodeIgniter gratis?
  • Ya, CodeIgniter merupakan framework open source dan gratis digunakan.

  • Apa saja keunggulan CodeIgniter dibandingkan dengan framework PHP lainnya?
  • CodeIgniter memiliki struktur kode yang simpel, performa yang cepat, serta dokumentasi yang lengkap.

  • Apakah framework PHP wajib digunakan untuk membuat website?
  • Tidak, namun penggunaan framework akan memudahkan pengembangan website dan membuat kode program terstruktur dengan baik.

Semoga Bermanfaat dan sampai jumpa di artikel menarik lainnya!

Cara Buat Web Sederhana dengan PHP CodeIgniter