CodeIgniter Simple CRUD Tutorial

Submitted by: 
Language: 
Visitors have accessed this post 10222 times.

Installing CodeIgniter

If you don't have CodeIgniter installed yet, you can use this link to download the latest version of CodeIgniter which is 3.1.7 that I've used in this source code.

After downloading, extract the file in the folder of your server. Since I'm using XAMPP as my localhost server, I've put the folder in htdocs folder of my XAMPP.

Then, you can test whether you have successfully installed codeigniter by typing your app name in your browser. In my case, I named my app as codeigniter_crud so I'm using the below code.

  1. localhost/codeigniter_crud/

codeigniter welcome message

Creating our Database

First we are going to create our database for this source code.

1. Open your phpMyAdmin.
2. Create a new database named codeigniter.
3. Click the database that we created, click SQL tab then paste the below code or import the included .sql file in the downloadable of this source code located in db folder.

  1. CREATE TABLE `users` (
  2. `username` varchar(30) NOT NULL,
  3. `password` varchar(30) NOT NULL,
  4. `fname` varchar(100) NOT NULL,

database mysql

Connecting our App to MySQL

Next, we're going to connect our codeigniter application to the database that we created earlier.

1. In your codeigniter app folder, open database.php located in application/config folder.

2. Update database.php with your credential the same as what I did in the image below.

database is where we define the database that we created earlier.

database config codeigniter

Configuring our Base URL

Next, we configure our base url to tell codeigniter that this is the URL of our site/application. We're gonna be using this a lot that's why we need to configure this.

1. In your codeigniter app folder, open config.php located in application/config folder.
2. Find and edit the ff line:

  1. $config['base_url'] = '<a href="http://localhost/codeigniter_crud/';

" rel="nofollow">http://localhost/codeigniter_crud/';
[/geshifilter-php]

where codeigniter_crud is the name of your app folder.

Creating our Model

Next, we create the model for our app. Take note that the first letter of your model name should be in CAPITAL letter and the name of the model should be the same as the file name to avoid confusion.

Create a file named Users_model.php in application/models folder of our app and put the ff codes.

  1. <?php
  2. class Users_model extends CI_Model {
  3. function __construct(){
  4. parent::__construct();
  5. $this->load->database();
  6. }
  7.  
  8. public function getAllUsers(){
  9. $query = $this->db->get('users');
  10. return $query->result();
  11. }
  12.  
  13. public function insertuser($user){
  14. return $this->db->insert('users', $user);
  15. }
  16.  
  17. public function getUser($id){
  18. $query = $this->db->get_where('users',array('id'=>$id));
  19. return $query->row_array();
  20. }
  21.  
  22. public function updateuser($user, $id){
  23. $this->db->where('users.id', $id);
  24. return $this->db->update('users', $user);
  25. }
  26.  
  27. public function deleteuser($id){
  28. $this->db->where('users.id', $id);
  29. return $this->db->delete('users');
  30. }
  31.  
  32. }
  33. ?>

Creating our Controller

Next step is to create our controller. Controllers follow the same naming convention as models.

Create a file named Users.php in application/controllers folder of our app and put the ff codes.

  1. <?php
  2. defined('BASEPATH') OR exit('No direct script access allowed');
  3.  
  4. class Users extends CI_Controller {
  5.  
  6. function __construct(){
  7. parent::__construct();
  8. $this->load->helper('url');
  9. $this->load->model('users_model');
  10. }
  11.  
  12. public function index(){
  13. $data['users'] = $this->users_model->getAllUsers();
  14. $this->load->view('user_list.php', $data);
  15. }
  16.  
  17. public function addnew(){
  18. $this->load->view('addform.php');
  19. }
  20.  
  21. public function insert(){
  22. $user['username'] = $this->input->post('username');
  23. $user['password'] = $this->input->post('password');
  24. $user['fname'] = $this->input->post('fname');
  25.  
  26. $query = $this->users_model->insertuser($user);
  27.  
  28. if($query){
  29. header('location:'.base_url().$this->index());
  30. }
  31.  
  32. }
  33.  
  34. public function edit($id){
  35. $data['user'] = $this->users_model->getUser($id);
  36. $this->load->view('editform', $data);
  37. }
  38.  
  39. public function update($id){
  40. $user['username'] = $this->input->post('username');
  41. $user['password'] = $this->input->post('password');
  42. $user['fname'] = $this->input->post('fname');
  43.  
  44. $query = $this->users_model->updateuser($user, $id);
  45.  
  46. if($query){
  47. header('location:'.base_url().$this->index());
  48. }
  49. }
  50.  
  51. public function delete($id){
  52. $query = $this->users_model->deleteuser($id);
  53.  
  54. if($query){
  55. header('location:'.base_url().$this->index());
  56. }
  57. }
  58. }
  59.  
  60.  
  61. ?>

Creating our Default Route

Next, we are going to set our default route so that whenever we haven't set up a controller to use, this default controller will be used instead.

Open routes.php located in application/config folder and set the default route to our user controller. Note: While we name controllers using CAPITAL letter in this first letter, we refer to them in SMALL letter.

  1. $route['default_controller'] = 'users';

Creating our Views

Lastly, we create the views of our app. Take note that I've use Bootstrap in the views. You may download bootstrap using this link.

Create the ff files inside application/views folder.

user_list.php

This is where we show the data in our table.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>CodeIgniter Simple CRUD Tutorial</title>
  6. <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1 class="page-header text-center">CodeIgniter Simple CRUD Tutorial</h1>
  11. <div class="row">
  12. <div class="col-sm-8 col-sm-offset-2">
  13. <a href="<?php echo base_url(); ?>index.php/users/addnew" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New</a><br><br>
  14. <table class="table table-bordered table-striped">
  15. <thead>
  16. <tr>
  17. <th>ID</th>
  18. <th>Username</th>
  19. <th>Password</th>
  20. <th>FullName</th>
  21. <th>Action</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <?php
  26. foreach($users as $user){
  27. ?>
  28. <tr>
  29. <td><?php echo $user->id; ?></td>
  30. <td><?php echo $user->username; ?></td>
  31. <td><?php echo $user->password; ?></td>
  32. <td><?php echo $user->fname; ?></td>
  33. <td><a href="<?php echo base_url(); ?>index.php/users/edit/<?php echo $user->id; ?>" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> Edit</a> || <a href="<?php echo base_url(); ?>index.php/users/delete/<?php echo $user->id; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a></td>
  34. </tr>
  35. <?php
  36. }
  37. ?>
  38. </tbody>
  39. </table>
  40. </div>
  41. </div>
  42. </div>
  43. </body>
  44. </html>

addform.php

This contains our add new row form.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>CodeIgniter Simple CRUD Tutorial</title>
  6. <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1 class="page-header text-center">CodeIgniter Simple CRUD Tutorial</h1>
  11. <div class="row">
  12. <div class="col-sm-4 col-sm-offset-4">
  13. <h3>Add Form
  14. <span class="pull-right"><a href="<?php echo base_url(); ?>" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Back</a></span>
  15. </h3>
  16. <hr>
  17. <form method="POST" action="<?php echo base_url(); ?>index.php/users/insert">
  18. <div class="form-group">
  19. <label>Username:</label>
  20. <input type="text" class="form-control" name="username">
  21. </div>
  22. <div class="form-group">
  23. <label>Password:</label>
  24. <input type="text" class="form-control" name="password">
  25. </div>
  26. <div class="form-group">
  27. <label>FullName:</label>
  28. <input type="text" class="form-control" name="fname">
  29. </div>
  30. <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
  31. </form>
  32. </div>
  33. </div>
  34. </div>
  35. </body>
  36. </html>

editform.php

This contains our edit form.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>CodeIgniter Simple CRUD Tutorial</title>
  6. <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1 class="page-header text-center">CodeIgniter Simple CRUD Tutorial</h1>
  11. <div class="row">
  12. <div class="col-sm-4 col-sm-offset-4">
  13. <h3>Edit Form
  14. <span class="pull-right"><a href="<?php echo base_url(); ?>" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Back</a></span>
  15. </h3>
  16. <hr>
  17. <?php extract($user); ?>
  18. <form method="POST" action="<?php echo base_url(); ?>index.php/users/update/<?php echo $id; ?>">
  19. <div class="form-group">
  20. <label>Username:</label>
  21. <input type="text" class="form-control" value="<?php echo $username; ?>" name="username">
  22. </div>
  23. <div class="form-group">
  24. <label>Password:</label>
  25. <input type="text" class="form-control" value="<?php echo $password; ?>" name="password">
  26. </div>
  27. <div class="form-group">
  28. <label>FullName:</label>
  29. <input type="text" class="form-control" value="<?php echo $fname; ?>" name="fname">
  30. </div>
  31. <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</button>
  32. </form>
  33. </div>
  34. </div>
  35. </div>
  36. </body>
  37. </html>

That ends the explanation for this source code. Happy Coding :)


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Nice and effective tutorial

Hi sir?
i am new students of web. i have download the source code. its only view. it is not working as development. can u solve my problem

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.