Profile Form in Codeigniter with Image upload and Validation




In this tutorial, we learn how to create user Profile Form in Codeigniter with Image upload, Validation and insert user data in MySQL database. We will then retrieve the information from the database and display it on the user profile details page.
Follow following steps:
1. Database
Database: `forms`
-- --------------------------------------------------------
CREATE TABLE `profile` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `mobnum` varchar(255) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `educ` varchar(255) NOT NULL,
  `hobbies` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
---
INSERT INTO `profile` (`id`, `name`, `email`, `mobnum`, `gender`, `educ`, `hobbies`) VALUES
(1, 'John', 'john@gmail.com', '1111111111', 'Male', 'MBA/MCA', 'Photography, Mountain climbing'),
(2, 'Mary', 'mary@gmail.com', '1111112222', 'Female', 'BE', 'Mountain climbing, Reading'),
(3, 'Hina', 'hina234@gmail.com', '1234554321', 'Female', 'MBA/MCA', 'Photography, Mountain climbing, Reading, Endurance sports');
---
ALTER TABLE `profile`
  ADD PRIMARY KEY (`id`);
--
ALTER TABLE `profile`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;
2. Controller
<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
    public function __construct(){
parent::__construct();
$this->load->model('Profile_model');
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->load->library("pagination");
$this->load->library('session');
$this->load->helper('security');
    }
public function index()
{
$data['title'] = 'Profile using Codeigniter';
$data['description'] = 'Profile using Codeigniter';
$this->load->view('profile', $data);
}
public function setprofile()
{
        $this->Profile_model->setprofile();
redirect('Welcome/pro');
}
public function pro()
{
       $data['title'] = 'Profile Details';
       $data['page'] = 'pro';    
   $data['user_profile'] = $this->Profile_model->getprofile();
   $this->load->view('prodetails', $data);
}
}
3. Model
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Profile_model extends CI_Model
{
    function setprofile()
    {  
$data = array(
'name'=>$this->input->post('name'),
'email'=>$this->input->post('email'),
'mobnum'=>$this->input->post('mobnum'),
'gender'=>$this->input->post('gender'),
'educ'=>$this->input->post('educ'),
'hobbies' => substr(implode(', ', $this->input->post('hobbies')), 0)
);
$this->db->insert('profile',$data);
$id = $this->db->insert_id();
move_uploaded_file($_FILES['image']['tmp_name'], 'template/images/profile_'.$id.'.jpg');
        $this->session->set_flashdata('msg', 'Congratulations!! Your Profile Submitted Sucessfully.');
    }
    function getprofile()
{
return $this->db->select('*')
->from('profile')
->order_by('id', 'DESC')
->get()->result();
}
}
4. View :
1. profile.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="<?php echo base_url(); ?>template/css/bootstrap.min.css">
<link rel="stylesheet" src="<?php echo base_url(); ?>template/css/style.css">
<script src="<?php echo base_url(); ?>template/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>template/js/bootstrap.min.js"></script>
<style>
.profileform{
font-size: 12px;
    padding: 10px;
border: 1px solid lightgrey;
}
label{
width: 100%;
}
.secpadding{
padding: 20px;
}
</style>
<script>
function val()
    {
       if(document.getElementById("imgupload").value==null || document.getElementById("imgupload").value=="")
       {
    alert("Required At Least One Image");
return false;
       }
}
</script>
</head>
<body>
<script type="text/javascript">
    <?php if($this->session->flashdata('msg')): ?>
        alert('Congratulations!! Your Profile Submitted Sucessfully.');
    <?php endif; ?>
</script>
<section class="secpadding">
    <!-- Main Container -->
    <div class="container">
        <!-- Row -->
        <div class="row">
<div class="col-md-3 col-xs-12 col-sm-12">
            </div>
            <div class="col-md-6 col-lg-6 col-xs-12 col-sm-12">                         
                <form action="<?php echo base_url();?>Welcome/setprofile" method="post" enctype="multipart/form-data" onsubmit="return val()">                         
                <div class="profileform">
<div class="heading-panel">
                    <h3 class="main-title text-center">Create Profile</h3>
                </div>
    <div class="form-group">
<label class="control-label"><font color="#FF3300">*</font> Name </label>
                        <input class="form-control" name="name" placeholder="Enter Name" type="text" required>
</div>
                    <div class="form-group">
                        <label class="control-label"><font color="#FF3300">*</font> Email </label>
                        <input class="form-control" placeholder="Enter Email" name="email" type="email" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label"><font color="#FF3300">*</font> Mobile Number </label>
                        <input class="form-control" name="mobnum" type="text" maxlength="10" placeholder="Ex 8888888885" onkeypress='return event.charCode >= 48 && event.charCode <= 57' required>
                        <!-- allow only numeric input -->
   </div>
                    <div class="form-group">
                        <label class="control-label"><font color="#FF3300">*</font> Gender </label>
                     <div class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
<input type="radio" name="gender" value="Female" checked> Female
    </div>
    <div class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
    <input type="radio" name="gender" value="Male"> Male
    </div>
    <div class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
<input type="radio" name="gender" value="Other"> Other
    </div>
</div>
<div class="form-group">
                        <label class="control-label"><font color="#FF3300">*</font> Education</label>
                        <select class="form-control" name="educ" required>
                        <option selected=selected disabled="disabled">Choose...</option>
                        <option value="SSC">SSC</option>
<option value="HSC">HSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="MBA/MCA">MBA/MCA</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label"><font color="#FF3300">*</font> Hobbies </label>  
<div class="col-md-6 col-lg-6 col-xs-12 col-sm-12">
<input type="checkbox" name="hobbies[]" value="Photography"> Photography
</div>
<div class="col-md-6 col-lg-6 col-xs-12 col-sm-12">
                        <input type="checkbox" name="hobbies[]" value="Mountain climbing"> Mountain Climbing
</div>
<div class="col-md-6 col-lg-6 col-xs-12 col-sm-12">
                        <input type="checkbox" name="hobbies[]" value="Reading"> Reading
</div>
<div class="col-md-6 col-lg-6 col-xs-12 col-sm-12">
<input type="checkbox" name="hobbies[]" value="Endurance sports"> Endurance Sports
</div>
</div>
<div class="row">
                    <div class="col-md-6 col-lg-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <label class="control-label"><font color="#FF3300">*</font> Profile Image (500 x 500px)</label>         
                        <div class="col-md-4 col-lg-4 col-xs-12 col-sm-12 upload2">
                        <img id="file1" width="150" height="80">
                        <input type="file" name="image" required id="imgupload" style="display:none" onChange="document.getElementById('file1').src = window.URL.createObjectURL(this.files[0]),validate()">
                        <br><font color="#FF3300"><span id="file_error"></span></font>
                        <a href="#" class="upload" onclick="$('#imgupload').trigger('click'); return false;">  <i class="fa fa-upload" aria-hidden="true"></i> Upload </a>
                        </div>
</div>
</div>
</div>
<div class="form-group" align="center">
<button type="submit" id="submit" class="btn btn-theme">Save</button>
</div>
           </div>
                </form>                
            </div>
            <!-- end col -->
            <!-- Right Sidebar -->
            <div class="col-md-3 col-xs-12 col-sm-12">                
            </div>
            <!-- Middle Content Area  End --><!-- end col -->
        </div>
        <!-- Row End -->
    </div>
    <!-- Main Container End -->
</section>
</body>
</html>
2. Profile Details
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="<?php echo base_url(); ?>template/css/bootstrap.min.css">
<link rel="stylesheet" src="<?php echo base_url(); ?>template/css/style.css">
<script src="<?php echo base_url(); ?>template/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>template/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Profile Details
  <a href="<?php echo base_url();?>" class="btn btn-success pull-right">Back</a>
  </h2>                                                                    
  <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
<th>Profile Image</th>
        <th>Name</th>
        <th>Email</th>
        <th>Mobile Number</th>
        <th>Gender</th>
        <th>Education</th>
<th>Hobbies</th>
      </tr>
    </thead>
    <tbody>
 <?php $cnt = 0; foreach ($user_profile as $row):  $cnt+=1; ?>
      <tr>
        <td><?php echo $cnt;?></td>
<td><img src="<?php echo base_url();?>template/images/profile_<?php echo $row->id.'.jpg';?>" width="100px" height="70px"></td>
        <td><?php echo $row->name;?></td>
        <td><?php echo $row->email;?></td>
        <td><?php echo $row->mobnum;?></td>
        <td><?php echo $row->gender;?></td>
        <td><?php echo $row->educ;?></td>
<td><?php echo $row->hobbies;?></td>
      </tr>
  <?php endforeach;?>
    </tbody>
  </table>
  </div>
</div>
</body>
</html>

Comments

  1. Your blog is very nice and we hope you are providing more information in future time. Keep up the good work and keep sharing such useful content. You can also visit PNY advertising they are offering Web development service in lahore

    ReplyDelete
  2. Influx Infotech is Web Designing Company in India with the team of Expert Web Designers. We are developing Websites Website Design Company in India which loved by our clients.
    Web Design Agra
    www.influxinfotech.com

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular posts from this blog

Multi Item Slider in Codeigniter using JQuery

Category Filter in Codeigniter