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>
Digital Care SEO is one stop website designing & development company of Bhopal.
ReplyDeleteDigital Marketing Company in Bhopal
SEO Company in Bhopal
Website Designing Company in Bhopal
mobile app development company in bhopal
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
ReplyDeleteInflux 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.
ReplyDeleteWeb Design Agra
www.influxinfotech.com
Very interesting blog. Php Development Services
ReplyDeleteThis comment has been removed by the author.
ReplyDelete