USER REGISTRATION And LOGIN & LOGOUT - CI4
step 1- App/config App.php
namespace Config;
use CodeIgniter\Config\BaseConfig;
class App extends BaseConfig
{
/**
* --------------------------------------------------------------------------
* Base Site URL
* --------------------------------------------------------------------------
*
* URL to your CodeIgniter root. Typically, this will be your base URL,
* WITH a trailing slash:
*
* http://example.com/
*/
// public string $baseURL = 'http://localhost:8080/';
public string $baseURL = 'http://127.0.0.1/vegatask/public/';
Step 2- Env and Database Define :
Create uploads folder in apublic/assets/ as apublic/assets/uploads for image save.
<?php
namespace Config;
use CodeIgniter\Database\Config;
/**
* Database Configuration
*/
class Database extends Config
{
/**
* The directory that holds the Migrations
* and Seeds directories.
*/
public string $filesPath = APPPATH . 'Database' . DIRECTORY_SEPARATOR;
/**
* Lets you choose which connection group to
* use if no other is specified.
*/
public string $defaultGroup = 'default';
/**
* The default database connection.
*/
public array $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => 'root',
'database' => 'vegatask',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => true,
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
'numberNative' => false,
];
/**
* This database connection is used when
* running PHPUnit database tests.
*/
public array $tests = [
'DSN' => '',
'hostname' => '127.0.0.1',
'username' => '',
'password' => '',
'database' => ':memory:',
'DBDriver' => 'SQLite3',
'DBPrefix' => 'db_', // Needed to ensure we're working correctly with prefixes live. DO NOT REMOVE FOR CI DEVS
'pConnect' => false,
'DBDebug' => true,
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
'foreignKeys' => true,
'busyTimeout' => 1000,
];
Step 3 - Create model to Define Table fields UsersModel.php :
<?php
namespace App\Models;
use CodeIgniter\Model;
class UsersModel extends Model{
protected $table ='users';
protected $primaryKey = 'id';
protected $allowedFields =['name','mobile','email','img_name','is_deleted','password'];
}
Step 4- Defines Route Routes.php:
<?php
use CodeIgniter\Router\RouteCollection;
/**
* @var RouteCollection $routes
*/
$routes->get('/alldata', 'Home::index');
$routes->get('/','LoginController::ajaxform');
$routes->get('/form', 'Home::form');
$routes->post('/savedata','Home::savedata');
$routes->get('edit/(:any)','Home::Edit/$1');
$routes->post('update/(:any)','Home::updatedata/$1');
$routes->get('remove/(:any)','Home::remove/$1');
$routes->get('login','LoginController::ajaxform');
$routes->get('userdata','LoginController::userdata');
$routes->post('logindata','LoginController::logindata');
$routes->get('logout','LoginController::logout');
Step 5- Define for Login custom_helper.php
<?php
use App\Models\UsersModel;
function isLogged($email,$password){
$model = new UsersModel();
$data = $model->where('email',$email)->where('password',$password)->find()[0];
if(isset($data)){
return [
'id' => $data['id'],
'email' => $data['email'],
'is_loggedin' => true
];
}
}
?>
Step 6 - Create Controller LoginController.php
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\UsersModel;
class LoginController extends BaseController
{
public function __construct(){
helper(['custom']);
}
public function userdata(){
$session = session();
if (null !==$session->get('is_loggedin')) {
$model = new usersModel();
$data['records'] = $model->where('is_deleted',0)->where('id',$session->get('id'))->findAll()[0];
return view('dashboard',$data);
}{
return redirect()->to('/login');
}
}
public function ajaxform(){
$session = session();
if (null ===$session->get('is_loggedin')) {
return view('loginform');
}
if (null !==$session->get('is_loggedin')) {
return redirect()->to('userdata');
}
}
public function logindata(){
$session = session();
$rules = [
'email' => 'required|max_length[254]|valid_email',
'password' => 'required',
];
if(!$this->validate($rules)){
$data['validation'] = $this->validator;
return view('loginform', $data);
}else{
$email = $this->request->getPost('email');
$password = $this->request->getPost('password');
$data = isLogged($email,$password);
$session->set($data);
if(isset($data) && !empty($data)){
return redirect()->to(base_url('userdata'));
}else{
return redirect()->to(base_url('/login'));
}
}
}
public function logout(){
$session = session();
if(null !== $session->get('is_loggedin')){
$session->destroy();
return redirect()->to(base_url('login'));
}
}
}
Step 6 - Create Controller Home.php for Registration :
<?php
namespace App\Controllers;
use App\Models\UsersModel;
class Home extends BaseController
{
public function index()
{
$model = new usersModel();
$data['records'] = $model->where('is_deleted',0)->findAll();
return view('welcome_message',$data);
}
public function form(){
$session = session();
if (null ===$session->get('is_loggedin')) {
return view('form');
}
if (null !==$session->get('is_loggedin')) {
return redirect()->to(base_url('userdata'));
}
}
public function savedata(){
$session = session();
$rules = [
'name' => 'required|max_length[30]',
'email' => 'required|max_length[254]|valid_email',
'phone' => 'required|numeric|max_length[10]',
'password' =>'required',
'file' => [
'uploaded[file]',
'mime_in[file,image/jpg,image/jpeg,image/png,image/gif]',
'max_size[file,4096]',
]
];
if(!$this->validate($rules)){
$data['validation'] = $this->validator;
return view('form', $data);
}else{
$email = $this->request->getPost('email');
$model = new usersModel();
$data = $model->where('is_deleted',0)->where('email',$email)->findAll();
if(!empty($data)){
session()->setFlashdata('exist','Email already exist.............');
return redirect()->to(base_url('/form'));
}else{
$name = $this->request->getPost('name');
$phone = $this->request->getPost('phone');
$password = $this->request->getPost('password');
$file = $this->request->getFile('file');
$fname = $file->getName();
$file->move("../public/assets/uploads");
chmod("../public/assets/uploads/".$fname,0777);
$data = array(
'name' => $name,
'email' => $email,
'mobile' => $phone,
'password' => $password,
'img_name' => $fname
);
$model = new UsersModel();
$save = $model->insert($data);
if(isset($save)){
session()->setFlashdata('added','Record added successfully. Please Login.....');
return redirect()->to(base_url('/form'));
}
}
}
}
public function Edit($id=null){
$model = new usersModel();
$data['data'] = $model->where('id',$id)->where('is_deleted',0)->findAll()[0];
return view('editform',$data);
}
public function updatedata($id=null){
$session = session();
$model = new usersModel();
$rules = [
'name' => 'required|max_length[30]',
'email' => 'required|max_length[254]|valid_email',
'phone' => 'required|numeric|max_length[10]',
'password' => 'required',
'file' => [
'uploaded[file]',
'mime_in[file,image/jpg,image/jpeg,image/png,image/gif]',
'max_size[file,4096]',
]
];
if(!$this->validate($rules)){
$data['validation'] = $this->validator;
$model = new usersModel();
$data['data'] = $model->where('id',$id)->where('is_deleted',0)->findAll()[0];
return view('editform', $data);
}else{
$model = new usersModel();
$email = $this->request->getPost('email');
$data = $model->where('id !=',$id)->where('is_deleted',0)->where('email',$email)->findAll()[0];
if(!empty($data)){
session()->setFlashdata('exist','Email already exist.............');
return redirect()->to(base_url('/edit/'.$id));
}else{
$name = $this->request->getPost('name');
$phone = $this->request->getPost('phone');
$password = $this->request->getPost('password');
$file = $this->request->getFile('file');
$filename = $file->getName($file);
$file->move("../public/assets/uploads");
chmod('../public/assets/uploads/'.$filename,0777);
$data = array(
'id' => $id,
'name' => $name,
'email' => $email,
'mobile' => $phone,
'password' => $password,
'img_name' => $filename
);
$resonse = $model->where('is_deleted',0)->update($id,$data);
if($resonse){
session()->setFlashdata('update','Record updated successfully..!');
return redirect()->to(base_url('edit/'.$id));
}else{
session()->setFlashdata('missing','Record is Missing..!');
return redirect()->to(base_url('edit/'.$id));
}
}
}
}
public function remove($id=null){
$data = array(
'id' => $id,
'is_deleted' => 1
);
$model = new usersModel();
$resonse = $model->where('is_deleted',0)->update($id,$data);
if($resonse){
session()->setFlashdata('deleted','Record Deleted successfully..!');
return redirect()->to(base_url('/'));
}
}
}
Step 7 - Create View Page about User registration And Login :
1- header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="<?= base_url('assets/uploads/vega-6-logo.png') ?>" alt="img" hieght="150" width="150"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item active">
<a class="nav-link" href="<?//= base_url('/');?>">Home <span class="sr-only">(current)</span></a>
</li> -->
<?php $session = session(); if(null === $session->get('is_loggedin')){ ?>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('form');?>">Registration</a>
</li>
<?php }?>
<?php $session = session(); if(null === $session->get('is_loggedin')){ ?>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('login');?>">Login</a>
</li>
<?php }?>
<?php if(null !== $session->get('is_loggedin')){ ?>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#profileModal" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('logout');?>">logout</a>
</li>
<?php }?>
</ul>
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</nav>
</div>
</body>
</html>
2 view- siderbar.php
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sidebar Menu with sub-menu | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.btn{
position: absolute;
top: 15px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
/* background: #1b1b1b; */
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click{
left: 260px;
}
.btn span{
color: white;
font-size: 28px;
line-height: 45px;
}
.btn.click span:before{
content: '\f00d';
}
.sidebar{
position: fixed;
width: 250px;
height: 100%;
left: -250px;
background: #343A40;
transition: left 0.4s ease;
}
.sidebar.show{
left: 0px;
}
.sidebar .text{
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #343A40;
letter-spacing: 1px;
}
/* nav ul{
background: #1b1b1b;
height: 100%;
width: 100%;
list-style: none;
} */
nav ul li{
line-height: 60px;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* nav ul li:last-child{
border-bottom: 1px solid rgba(255,255,255,0.05);
} */
nav ul li a{
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a{
color: cyan;
background: #343A40;
border-left-color: cyan;
}
nav ul li a:hover{
background: #1e1e1e;
}
nav ul ul{
position: static;
display: none;
}
nav ul .feat-show.show{
display: block;
}
nav ul .serv-show.show1{
display: block;
}
nav ul ul li{
line-height: 42px;
border-top: none;
}
nav ul ul li a{
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a{
color: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover{
color: cyan!important;
background: #1e1e1e!important;
}
nav ul li a span{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate{
transform: translateY(-50%) rotate(-180deg);
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 600;
}
.content p{
font-size: 30px;
font-weight: 500;
}
</style>
</head>
<body>
<nav class="sidebar show">
<div class="text">
Side Menu
</div>
<ul>
<li class="active"><a href="#">Dashboard</a></li>
<li>
<a href="#" class="feat-btn">Features
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li><a href="#">Pages</a></li>
<li><a href="#">Elements</a></li>
</ul>
</li>
<li>
<a href="#" class="serv-btn">Services
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li><a href="#">App Design</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Shortcuts</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<div class="content">
<div class="header">
Sidebar Menu with sub-menu
</div>
<p>
HTML CSS & Javascript (Full Tutorial)
</p>
</div>
<script>
// $('.btn').click(function(){
// $(this).toggleClass("click");
// $('.sidebar').toggleClass("show");
// });
$('.feat-btn').click(function(){
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function(){
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
3 view - loginform.php
<?= $this->include('header')?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="<?= base_url('assets/js/custom.js')?>"></script>
</head>
<body>
<div class="container mt-4">
<div class="row col-lg-12">
<div class="col-lg-12 alert alert-success alert-dismissible fade show text-center mb-3 d-none" role="alert">
<i id="inserted" class="mdi mdi-check-all me-2"></i>
</div>
<br/>
</div>
<?php $validation = \Config\Services::validation(); ?>
<div class="row col-lg-8 m-auto">
<h2 class="text m-4 font-weight-bold">Login Form</h2>
</div>
<div class="col-lg-10 m-auto">
<form action="<?php echo base_url('/logindata')?>" method="post" enctype="multipart/form-data">
<div class="form-group ">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="aemail" placeholder="Email">
<?php if($validation->getError('email')){?>
<div class="alert alert-danger mt-2 col-sm-12">
<?= $validation->getError('email')?>
</div>
<?php }?>
</div>
</div>
<div class="form-group">
<label for="Phone" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" id="password" placeholder="Enter Your Password">
<?php if($validation->getError('password')){?>
<div class="alert alert-danger mt-2 col-sm-12">
<?= $validation->getError('password')?>
</div>
<?php }?>
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
<input type="submit" class="btn btn-primary" id="ajaxsubmit" value="Login" placeholder="save">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
4 view- user registration form.php
<?= $this->include('header')?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- ajaxForm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
<!-- End ajaxForm -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="<?= base_url('assets/js/custom.js')?>"></script>
</head>
<body>
<div class="container mt-4">
<?php $validation = \Config\Services::validation(); ?>
<div class="col-lg-12">
<?php if (session()->getFlashdata('added') !== NULL) { ?>
<div class="col-lg-12 alert alert-success alert-dismissible fade show text-center mb-3" role="alert">
<i class="mdi mdi-check-all me-2"></i>
<?php echo session()->getFlashdata('added'); ?>
</div>
<?php } ?>
</div>
<div class="col-lg-12">
<?php if (session()->getFlashdata('exist') !== NULL) { ?>
<div class="col-lg-12 alert alert-warning alert-dismissible fade show text-center mb-3" role="alert">
<i class="mdi mdi-check-all me-2"></i>
<?php echo session()->getFlashdata('exist'); ?>
</div>
<?php } ?>
</div>
<div class="row">
<h2 class="text m-4 font-weight-bold">Registration Form</h2>
<div class="mt-5 mb-2" style="margin-left:530px">
<a class="btn btn-primary" href="<?php echo base_url('/')?>">Back</a>
</div>
</div>
<form action="<?php echo base_url('/savedata')?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 col-form-label">name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" id="name" placeholder="name">
</div>
<?php if($validation->getError('name')) {?>
<div class='alert alert-danger mt-2 col-sm-10'>
<?= $error = $validation->getError('name'); ?>
</div>
<?php }?>
</div>
<div class="form-group ">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="Email">
</div>
<?php if($validation->getError('email')){ ?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('email')?>
</div>
<?php }?>
</div>
<div class="form-group">
<label for="Phone" class="col-sm-2 col-form-label">Phone</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="phone" id="phone" placeholder="Phone">
</div>
<?php if($validation->getError('phone')){?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('phone')?>
</div>
<?php }?>
</div>
<div class="form-group ">
<label for="password" class="col-sm-2 col-form-label">password</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" id="password" placeholder="Create password">
</div>
<?php if($validation->getError('password')){ ?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('password')?>
</div>
<?php }?>
</div>
<div class="form-group">
<label for="Phone" class="col-sm-2 col-form-label">Photo</label>
<div class="col-sm-10">
<input type="file" class="form-control" name="file" id="file" placeholder="File">
</div>
<div class="col-sm-10 m-2 progress d-none">
<div class="progress-bar bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<div class="col-sm-10 m-2 alert alert-success d-none">
<span></span>
</div>
<?php if($validation->getError('phone')){?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('file')?>
</div>
<?php }?>
</div>
<div class="form-group row">
<div class="col-sm-8 d-flex">
<input type="submit" class="btn btn-primary" id="submit" value="submit" placeholder="save">
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('form').ajaxForm({
beforeSend:function(){
if($('#file').val() !='') {
$('.progress').removeClass('d-none');
var percentVal = "0%";
$('.bar').css('width',percentVal);
}
},
uploadProgress:function(event,position,total,percentagecomplete){
if($('#file').val() !='') {
var percentVal = percentagecomplete+"%";
$('.bar').css('width',percentVal);
}
},
complete:function(){
if($('#file').val() !='') {
$('.progress').removeClass('d-none');
console.log($('#file').val());
}
else{
console.log('Choose File');
}
}
});
});
</script>
</body>
</html>
5 view - editform.php
<?= $this->include('header')?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- ajaxForm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
<!-- End ajaxForm -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="<?= base_url('assets/js/custom.js')?>"></script>
</head>
<body>
<div class="container mt-4">
<?php $validation = \Config\Services::validation(); ?>
<div class="col-lg-12">
<?php if (session()->getFlashdata('added') !== NULL) { ?>
<div class="col-lg-12 alert alert-success alert-dismissible fade show text-center mb-3" role="alert">
<i class="mdi mdi-check-all me-2"></i>
<?php echo session()->getFlashdata('added'); ?>
</div>
<?php } ?>
</div>
<div class="col-lg-12">
<?php if (session()->getFlashdata('exist') !== NULL) { ?>
<div class="col-lg-12 alert alert-warning alert-dismissible fade show text-center mb-3" role="alert">
<i class="mdi mdi-check-all me-2"></i>
<?php echo session()->getFlashdata('exist'); ?>
</div>
<?php } ?>
</div>
<div class="row">
<h2 class="text m-4 font-weight-bold">Registration Form</h2>
<div class="mt-5 mb-2" style="margin-left:530px">
<a class="btn btn-primary" href="<?php echo base_url('/')?>">Back</a>
</div>
</div>
<form action="<?php echo base_url('/savedata')?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 col-form-label">name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" id="name" placeholder="name">
</div>
<?php if($validation->getError('name')) {?>
<div class='alert alert-danger mt-2 col-sm-10'>
<?= $error = $validation->getError('name'); ?>
</div>
<?php }?>
</div>
<div class="form-group ">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="Email">
</div>
<?php if($validation->getError('email')){ ?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('email')?>
</div>
<?php }?>
</div>
<div class="form-group">
<label for="Phone" class="col-sm-2 col-form-label">Phone</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="phone" id="phone" placeholder="Phone">
</div>
<?php if($validation->getError('phone')){?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('phone')?>
</div>
<?php }?>
</div>
<div class="form-group ">
<label for="password" class="col-sm-2 col-form-label">password</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" id="password" placeholder="Create password">
</div>
<?php if($validation->getError('password')){ ?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('password')?>
</div>
<?php }?>
</div>
<div class="form-group">
<label for="Phone" class="col-sm-2 col-form-label">Photo</label>
<div class="col-sm-10">
<input type="file" class="form-control" name="file" id="file" placeholder="File">
</div>
<div class="col-sm-10 m-2 progress d-none">
<div class="progress-bar bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<div class="col-sm-10 m-2 alert alert-success d-none">
<span></span>
</div>
<?php if($validation->getError('phone')){?>
<div class="alert alert-danger mt-2 col-sm-10">
<?= $validation->getError('file')?>
</div>
<?php }?>
</div>
<div class="form-group row">
<div class="col-sm-8 d-flex">
<input type="submit" class="btn btn-primary" id="submit" value="submit" placeholder="save">
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('form').ajaxForm({
beforeSend:function(){
if($('#file').val() !='') {
$('.progress').removeClass('d-none');
var percentVal = "0%";
$('.bar').css('width',percentVal);
}
},
uploadProgress:function(event,position,total,percentagecomplete){
if($('#file').val() !='') {
var percentVal = percentagecomplete+"%";
$('.bar').css('width',percentVal);
}
},
complete:function(){
if($('#file').val() !='') {
$('.progress').removeClass('d-none');
console.log($('#file').val());
}
else{
console.log('Choose File');
}
}
});
});
</script>
</body>
</html>
6 veiw read- welcome_message.php
<?= $this->include('header')?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="row col-lg-12">
<?php if (session()->getFlashdata('added') !== NULL) { ?>
<div class="col-lg-12 alert alert-success alert-dismissible fade show text-center mb-3" role="alert">
<i class="mdi mdi-check-all me-2"></i>
<?php echo session()->getFlashdata('added'); ?>
</div>
<?php } ?>
<br/>
<?php if (session()->getFlashdata('deleted') !== NULL) { ?>
<div class="col-lg-12 alert alert-danger alert-dismissible fade show text-center mb-3" role="alert">
<i class="mdi mdi-check-all me-2"></i>
<?php echo session()->getFlashdata('deleted'); ?>
</div>
<?php } ?>
<br/>
</div>
<div class="form-group">
<div class="d-flex flex-row">
<div class="col-sm-4">
<a href="<?= base_url('form')?>" class="text btn btn-primary">Form</a>
</div>
</div>
<div class="col-lg-12 mt-4">
<table id="myTable">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Photo</th>
<th>Action</th>
</tr>
</thead>
<?php
$i=1;
foreach($records as $each) {?>
<tr>
<td> <?= $i ?></td>
<td><?= $each['name'] ?></td> <br>
<td><?= $each['email'] ?></td> <br>
<td><?= $each['mobile'] ?></td> <br>
<td><img src="<?= base_url('assets/uploads/'.$each['img_name']) ?>" alt="img" hieght="150" width="150"></td><br>
<td>
<div class="row">
<div>
<a class="text-dark font-weight-bold m-4 px-4 py-3 bg-danger rounded" href="<?= base_url('edit/'.$each['id'])?>">Edit</a>
</div>
<div>
<a class="text-dark font-weight-bold m-4 p-3 bg-warning rounded" href="<?= base_url('remove/'.$each['id'])?>" >Delete</a>
</div>
</div>
</td>
</tr>
<?php $i++; } ?>
</table>
</div>
</div>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
$('#myTable_filter').addClass('d-none');
} );
</script>
</body>
</html>
No comments:
Post a Comment