Register dan Reset Password dengan Verifikasi Email Menggunakan PHP MySQL

Selamat malam bagaimana kabar kalian kali ini kami akan share bagaimana membuat form register dan reset password dengan verifikasi email menggunakan php mysql.



Kenapa perlu verifikasi email ?

Hal ini merupakan bagian dari security dari sebuah aplikasi, pada project kami yaitu aplikasi manajemen pemeliharaan gedung berbasis web, Pada aplikasi dan project pertama kami ini, kami belum menerapkan security di atas dan yang terjadi adalah banyak user yang hanya mendaftarkan email palsu mereka bahkan bukan mereka yang mempunyai email tersebut karena tidak adanya verifikasi aktivasi akun.

Disamping security di atas kmai juga menggunakan google captcha ketika user melakukan register, kemudian kami juga menerapkan security yang menurut kami sangat penting untuk di terapkan dalam aplikasi atau project anda yaitu ketika user melakukan reset password maka anda akan dikirmkan link reset password melalui email user. Untuk verifikasi email kami menggunakan SMTP (Simple mail transfer protocol).

Pada tutorial dibawah kami mempunyai banyak file karena kami memisahkan banyak file kemudian kami kumpulkan dalam satu folder, tujuannya adalah untuk mengurangi code yang ada dalam satu file.

Apa yang kami jelaskan di atas merupakan spesifikasi dari project sederhana yang kami akan share di bawah. Daripada kami banyak bicara langsung cara mari kita mulai dari awal.

1. Buat database dengan nama ecom kemudian masukkan struktur databse dibawah ini.
 CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `email` varchar(200) NOT NULL,
  `password` varchar(60) NOT NULL,
  `type` int(1) NOT NULL,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL,
  `address` text NOT NULL,
  `contact_info` varchar(100) NOT NULL,
  `photo` varchar(200) NOT NULL,
  `status` int(1) NOT NULL,
  `activate_code` varchar(15) NOT NULL,
  `reset_code` varchar(15) NOT NULL,
  `created_on` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

2. Buat file dengan nama conn.php file ini berfungsi sebagai koneksi kedatabse.
 <?php
Class Database{
 private $server = "mysql:host=localhost;dbname=YOUR-DATABSE";
 private $username = "root";
 private $password = "";
 private $options  = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,);
 protected $conn;
 public function open(){
  try{
   $this->conn = new PDO($this->server, $this->username, $this->password, $this->options);
   return $this->conn;
  }
  catch (PDOException $e){
   echo "There is some problem in connection: " . $e->getMessage();
  } 
 }
 
 public function close(){
  $this->conn = null;
 }
}
$pdo = new Database();

?> 

3. Buat file dengan nama header.php, file ini kami gunakan untuk menyimpan direktory css yang kami gunakan dalam tutorial sederhana ini.
 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Login dan Register</title>
 <!-- Tell the browser to be responsive to screen width -->
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <!-- Bootstrap 3.3.7 -->
 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
 <!-- DataTables -->
 <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
 <!-- Theme style -->
 <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
   <!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
     <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
     <!-- Magnify -->
     <link rel="stylesheet" href="magnify/magnify.min.css">

     <!-- Google Font -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">


     <!-- Google Recaptcha -->
     <script src='https://www.google.com/recaptcha/api.js'></script>

     <!-- Custom CSS -->
     <style type="text/css">
     /* Small devices (tablets, 768px and up) */
     @media (min-width: 768px){ 
      #navbar-search-input{ 
        width: 60px; 
      }
      #navbar-search-input:focus{ 
        width: 100px; 
      }
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px){ 
      #navbar-search-input{ 
        width: 150px; 
      }
      #navbar-search-input:focus{ 
        width: 250px; 
      } 
    }

    .word-wrap{
      overflow-wrap: break-word;
    }
    .prod-body{
      height:300px;
    }

    .box:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
    .register-box{
      margin-top:20px;
    }

    #trending{
      list-style: none;
      padding:10px 5px 10px 15px;
    }
    #trending li {
      padding-left: 1.3em;
    }
    #trending li:before {
      content: "\f046";
      font-family: FontAwesome;
      display: inline-block;
      margin-left: -1.3em; 
      width: 1.3em;
    }

    /*Magnify*/
    .magnify > .magnify-lens {
      width: 100px;
      height: 100px;
    }

  </style>

</head> 

4. Buat file dengan nama navbar.php file merupakan tampilan dari header.
 <header class="main-header">
  <nav class="navbar navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <a href="index.php" class="navbar-brand"><b>REGISTER DAN RESET PASSWORD DENGAN VERIF EMAIL</b></a>

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
          <i class="fa fa-bars"></i>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->

      <!-- /.navbar-collapse -->
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <?php
          if(isset($_SESSION['user'])){
            $image = (!empty($user['photo'])) ? 'images/'.$user['photo'] : 'img/user-location.png';
            echo '
            <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="'.$image.'" class="user-image" alt="User Image">
            <span class="hidden-xs">'.$user['firstname'].' '.$user['lastname'].'</span>
            </a>
            <ul class="dropdown-menu">
            <!-- User image -->
            <li class="user-header">
            <img src="'.$image.'" class="img-circle" alt="User Image">

            <p>
            '.$user['firstname'].' '.$user['lastname'].'
            <small>Member since '.date('M. Y', strtotime($user['created_on'])).'</small>
            </p>
            </li>
            <li class="user-footer">
            <div class="pull-left">
            <a href="#" class="btn btn-default btn-flat">Profile</a>
            </div>
            <div class="pull-right">
            <a href="logout.php" class="btn btn-default btn-flat">Sign out</a>
            </div>
            </li>
            </ul>
            </li>
            ';
          }
          else{
            echo "
            <li><a href='login.php'>LOGIN</a></li>
            <li><a href='signup.php'>SIGNUP</a></li>
            ";
          }
          ?>
        </ul>
      </div>
    </div>
  </nav>
</header> 

5. activate.php file ini yang berfungsi ketika user baru melakukan register, file ini berisi script untuk mengaktifkan emai yang kita daftarkan
 <?php include 'includes/session.php'; ?>
<?php
$output = '';
if(!isset($_GET['code']) OR !isset($_GET['user'])){
 $output .= '
 <div class="alert alert-danger">
 <h4><i class="icon fa fa-warning"></i> Error!</h4>
 Code to activate account not found.
 </div>
 <h4>You may <a href="signup.php">Signup</a> or back to <a href="index.php">Homepage</a>.</h4>
 '; 
}
else{
 $conn = $pdo->open();

 $stmt = $conn->prepare("SELECT *, COUNT(*) AS numrows FROM users WHERE activate_code=:code AND id=:id");
 $stmt->execute(['code'=>$_GET['code'], 'id'=>$_GET['user']]);
 $row = $stmt->fetch();

 if($row['numrows'] > 0){
  if($row['status']){
   $output .= '
   <div class="alert alert-danger">
   <h4><i class="icon fa fa-warning"></i> Error!</h4>
   Account already activated.
   </div>
   <h4>You may <a href="login.php">Login</a> or back to <a href="index.php">Homepage</a>.</h4>
   ';
  }
  else{
   try{
    $stmt = $conn->prepare("UPDATE users SET status=:status WHERE id=:id");
    $stmt->execute(['status'=>1, 'id'=>$row['id']]);
    $output .= '
    <div class="alert alert-success">
    <h4><i class="icon fa fa-check"></i> Success!</h4>
    Account activated - Email: <b>'.$row['email'].'</b>.
    </div>
    <h4>You may <a href="login.php">Login</a> or back to <a href="index.php">Homepage</a>.</h4>
    ';
   }
   catch(PDOException $e){
    $output .= '
    <div class="alert alert-danger">
    <h4><i class="icon fa fa-warning"></i> Error!</h4>
    '.$e->getMessage().'
    </div>
    <h4>You may <a href="signup.php">Signup</a> or back to <a href="index.php">Homepage</a>.</h4>
    ';
   }

  }
  
 }
 else{
  $output .= '
  <div class="alert alert-danger">
  <h4><i class="icon fa fa-warning"></i> Error!</h4>
  Cannot activate account. Wrong code.
  </div>
  <h4>You may <a href="signup.php">Signup</a> or back to <a href="index.php">Homepage</a>.</h4>
  ';
 }

 $pdo->close();
}
?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition skin-blue layout-top-nav">
 <div class="wrapper">

  <?php include 'includes/navbar.php'; ?>
  
  <div class="content-wrapper">
   <div class="container">

    <!-- Main content -->
    <section class="content">
     <div class="row">
      <div class="col-sm-9">
       <?php echo $output; ?>
      </div>
      <div class="col-sm-3">
       <?php include 'includes/sidebar.php'; ?>
      </div>
     </div>
    </section>
    
   </div>
  </div>
  
  <?php include 'includes/footer.php'; ?>
 </div>

 <?php include 'includes/scripts.php'; ?>
</body>
</html> 

6. cart_view.php merupakan tampilan utama yang dituju ketika user berhasil melakukan login.
 <?php include 'includes/session.php'; ?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition skin-blue layout-top-nav">
 <div class="wrapper">
  <?php include 'includes/navbar.php'; ?>
  <div class="content-wrapper">
   <div class="container">

   </div>
  </div>
 </div>
 <?php include 'includes/scripts.php'; ?>
</body>
</html> 

7. Buat file dengan nama index.php file merupakan tampilan utama ketika membuka aplikasi.
 <?php include 'includes/session.php'; ?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition skin-blue layout-top-nav">
 <div class="wrapper">
  <?php include 'includes/navbar.php'; ?>
  <div class="content-wrapper">
   <div class="container">
   </div>
  </div>
 </div>
 <?php include 'includes/scripts.php'; ?>
</body>
</html> 

8. login.php file ini berfungsi sebagai form login bagi user.
 <?php include 'includes/session.php'; ?>
<?php
if(isset($_SESSION['user'])){
  header('location: cart_view.php');
}
?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition login-page">
  <div class="login-box">
   <?php
    if(isset($_SESSION['error'])){
      echo "
      <div class='callout callout-danger text-center'>
      <p>".$_SESSION['error']."</p> 
      </div>
      ";
      unset($_SESSION['error']);
    }
    if(isset($_SESSION['success'])){
      echo "
      <div class='callout callout-success text-center'>
      <p>".$_SESSION['success']."</p> 
      </div>
      ";
      unset($_SESSION['success']);
    }
    ?>
    <div class="login-box-body">
     <p class="login-box-msg">Sign in to start your session</p>

     <form action="verify.php" method="POST">
        <div class="form-group has-feedback">
          <input type="email" class="form-control" name="email" placeholder="Email" required>
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" name="password" placeholder="Password" required>
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
         <div class="col-xs-4">
           <button type="submit" class="btn btn-primary btn-block btn-flat" name="login"><i class="fa fa-sign-in"></i> Sign In</button>
         </div>
       </div>
     </form>
     <br>
     <a href="password_forgot.php">I forgot my password</a><br>
     <a href="signup.php" class="text-center">Register a new membership</a><br>
     <a href="index.php">Home</a>
   </div>
 </div>
 <?php include 'includes/scripts.php' ?>
</body>
</html> 

9. logout.php pasti kalian tahu fungsinya lah ya.
 <?php
session_start();
session_destroy();
header('location: index.php');
?> 

10. password_forgot.php file ini berfungsi sebgaai form reset password.
 <?php include 'includes/session.php'; ?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition login-page">
  <div class="login-box">
   <?php
    if(isset($_SESSION['error'])){
      echo "
      <div class='callout callout-danger text-center'>
      <p>".$_SESSION['error']."</p> 
      </div>
      ";
      unset($_SESSION['error']);
    }
    if(isset($_SESSION['success'])){
      echo "
      <div class='callout callout-success text-center'>
      <p>".$_SESSION['success']."</p> 
      </div>
      ";
      unset($_SESSION['success']);
    }
    ?>
    <div class="login-box-body">
     <p class="login-box-msg">Enter email associated with account</p>

     <form action="reset.php" method="POST">
        <div class="form-group has-feedback">
          <input type="email" class="form-control" name="email" placeholder="Email" required>
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="row">
         <div class="col-xs-4">
           <button type="submit" class="btn btn-primary btn-block btn-flat" name="reset"><i class="fa fa-mail-forward"></i> Send</button>
         </div>
       </div>
     </form>
     <br>
     <a href="login.php">I rememberd my password</a><br>
     <a href="index.php">Home</a>
   </div>
 </div>
 
 <?php include 'includes/scripts.php' ?>
</body>
</html> 

11. password_new.php file ini berfungsi sebagai script untuk memasukkan password baru.
 <?php
include 'includes/session.php';

if(!isset($_GET['code']) OR !isset($_GET['user'])){
 header('location: index.php');
 exit(); 
}

$path = 'password_reset.php?code='.$_GET['code'].'&user='.$_GET['user'];

if(isset($_POST['reset'])){
 $password = $_POST['password'];
 $repassword = $_POST['repassword'];

 if($password != $repassword){
  $_SESSION['error'] = 'Passwords did not match';
  header('location: '.$path);
 }
 else{
  $conn = $pdo->open();

  $stmt = $conn->prepare("SELECT *, COUNT(*) AS numrows FROM users WHERE reset_code=:code AND id=:id");
  $stmt->execute(['code'=>$_GET['code'], 'id'=>$_GET['user']]);
  $row = $stmt->fetch();

  if($row['numrows'] > 0){
   $password = password_hash($password, PASSWORD_DEFAULT);

   try{
    $stmt = $conn->prepare("UPDATE users SET password=:password WHERE id=:id");
    $stmt->execute(['password'=>$password, 'id'=>$row['id']]);

    $_SESSION['success'] = 'Password successfully reset';
    header('location: login.php');
   }
   catch(PDOException $e){
    $_SESSION['error'] = $e->getMessage();
    header('location: '.$path);
   }
  }
  else{
   $_SESSION['error'] = 'Code did not match with user';
   header('location: '.$path);
  }

  $pdo->close();
 }

}
else{
 $_SESSION['error'] = 'Input new password first';
 header('location: '.$path);
}

?> 

12. password_reset.php file ini berfungsi sebagai form untuk reset password.
 <?php include 'includes/session.php'; ?>
<?php
if(!isset($_GET['code']) OR !isset($_GET['user'])){
  header('location: index.php');
  exit(); 
}
?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition login-page">
  <div class="login-box">
   <?php
    if(isset($_SESSION['error'])){
      echo "
      <div class='callout callout-danger text-center'>
      <p>".$_SESSION['error']."</p> 
      </div>
      ";
      unset($_SESSION['error']);
    }
    ?>
    <div class="login-box-body">
     <p class="login-box-msg">Enter new password</p>

     <form action="password_new.php?code=<?php echo $_GET['code']; ?>&user=<?php echo $_GET['user']; ?>" method="POST">
        <div class="form-group has-feedback">
          <input type="password" class="form-control" name="password" placeholder="New password" required>
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" name="repassword" placeholder="Re-type password" required>
          <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
        </div>
        <div class="row">
         <div class="col-xs-4">
           <button type="submit" class="btn btn-primary btn-block btn-flat" name="reset"><i class="fa fa-check-square-o"></i> Reset</button>
         </div>
       </div>
     </form>
   </div>
 </div>
 
 <?php include 'includes/scripts.php' ?>
</body>
</html> 

13. register.php file ini berfisi script yang berfungsi dan mengeksekusi fungsi register.
 <?php
 use PHPMailer\PHPMailer\PHPMailer;
 use PHPMailer\PHPMailer\Exception;

 include 'includes/session.php';

 if(isset($_POST['signup'])){
  $firstname = $_POST['firstname'];
  $lastname = $_POST['lastname'];
  $email = $_POST['email'];
  $password = $_POST['password'];
  $repassword = $_POST['repassword'];

  $_SESSION['firstname'] = $firstname;
  $_SESSION['lastname'] = $lastname;
  $_SESSION['email'] = $email;

  if(!isset($_SESSION['captcha'])){
   require('recaptcha/src/autoload.php');  
   $recaptcha = new \ReCaptcha\ReCaptcha('YOUR SECRET KEY', new \ReCaptcha\RequestMethod\SocketPost());
   $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

   if (!$resp->isSuccess()){
      $_SESSION['error'] = 'Please answer recaptcha correctly';
      header('location: signup.php'); 
      exit(); 
     } 
     else{
      $_SESSION['captcha'] = time() + (10*60);
     }

  }

  if($password != $repassword){
   $_SESSION['error'] = 'Passwords did not match';
   header('location: signup.php');
  }
  else{
   $conn = $pdo->open();

   $stmt = $conn->prepare("SELECT COUNT(*) AS numrows FROM users WHERE email=:email");
   $stmt->execute(['email'=>$email]);
   $row = $stmt->fetch();
   if($row['numrows'] > 0){
    $_SESSION['error'] = 'Email already taken';
    header('location: signup.php');
   }
   else{
    $now = date('Y-m-d');
    $password = password_hash($password, PASSWORD_DEFAULT);

    //generate code
    $set='123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $code=substr(str_shuffle($set), 0, 12);

    try{
     $stmt = $conn->prepare("INSERT INTO users (email, password, firstname, lastname, activate_code, created_on) VALUES (:email, :password, :firstname, :lastname, :code, :now)");
     $stmt->execute(['email'=>$email, 'password'=>$password, 'firstname'=>$firstname, 'lastname'=>$lastname, 'code'=>$code, 'now'=>$now]);
     $userid = $conn->lastInsertId();

     $message = "
      <h2>Thank you for Registering.</h2>
      <p>Your Account:</p>
      <p>Email: ".$email."</p>
      <p>Password: ".$_POST['password']."</p>
      <p>Please click the link below to activate your account.</p>
      <a href='YOUR-HOST/ecommerce/activate.php?code=".$code."&user=".$userid."'>Activate Account</a>
     ";

     //Load phpmailer
        require 'vendor/autoload.php';

        $mail = new PHPMailer(true);                             
        try {
            //Server settings
            $mail->isSMTP();                                     
            $mail->Host = 'YOUR-HOST';                      
           $mail->SMTPAuth = true;                               
           $mail->Username = 'YOUR-EMAIL-SMTP';     
           $mail->Password = 'PASSWORD-HOST';                    
           $mail->SMTPOptions = array(
                'ssl' => array(
                'verify_peer' => false,
                'verify_peer_name' => false,
                'allow_self_signed' => true
                )
            );                         
            $mail->SMTPSecure = 'ssl';                           
            $mail->Port = 465;                                   

            $mail->setFrom('YOUR-EMAIL-SMTP');
            
            //Recipients
            $mail->addAddress($email);              
            $mail->addReplyTo('YOUR-EMAIL-SMTP');
           
            //Content
            $mail->isHTML(true);                                  
            $mail->Subject = 'ECommerce Site Sign Up';
            $mail->Body    = $message;

            $mail->send();

            unset($_SESSION['firstname']);
            unset($_SESSION['lastname']);
            unset($_SESSION['email']);

            $_SESSION['success'] = 'Account created. Check your email to activate.';
            header('location: signup.php');

        } 
        catch (Exception $e) {
            $_SESSION['error'] = 'Message could not be sent. Mailer Error: '.$mail->ErrorInfo;
            header('location: signup.php');
        }


    }
    catch(PDOException $e){
     $_SESSION['error'] = $e->getMessage();
     header('location: register.php');
    }

    $pdo->close();

   }

  }

 }
 else{
  $_SESSION['error'] = 'Fill up signup form first';
  header('location: signup.php');
 }

?> 

14. reset.php file ini berisi script untuk mengirimkan email reset password ke email user yang melakuakn reset password.
 <?php
 use PHPMailer\PHPMailer\PHPMailer;
 use PHPMailer\PHPMailer\Exception;

 include 'includes/session.php';

 if(isset($_POST['reset'])){
  $email = $_POST['email'];

  $conn = $pdo->open();

  $stmt = $conn->prepare("SELECT *, COUNT(*) AS numrows FROM users WHERE email=:email");
  $stmt->execute(['email'=>$email]);
  $row = $stmt->fetch();

  if($row['numrows'] > 0){
   //generate code
   $set='123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
   $code=substr(str_shuffle($set), 0, 15);
   try{
    $stmt = $conn->prepare("UPDATE users SET reset_code=:code WHERE id=:id");
    $stmt->execute(['code'=>$code, 'id'=>$row['id']]);
    
    $message = "
     <h2>Password Reset</h2>
     <p>Your Account:</p>
     <p>Email: ".$email."</p>
     <p>Please click the link below to reset your password.</p>
     <a href='https://ecommerce.arman.my.id/password_reset.php?code=".$code."&user=".$row['id']."'>Reset Password</a>
    ";

    //Load phpmailer
       require 'vendor/autoload.php';

       $mail = new PHPMailer(true);                             
       try {
           //Server settings
           $mail->isSMTP();                                     
             $mail->Host = 'YOUR-HOST';                      
           $mail->SMTPAuth = true;                               
           $mail->Username = 'YOUR-EMAIL-SMTP';     
           $mail->Password = 'PASSWORD-HOST';                     
           $mail->SMTPOptions = array(
               'ssl' => array(
               'verify_peer' => false,
               'verify_peer_name' => false,
               'allow_self_signed' => true
               )
           );                         
           $mail->SMTPSecure = 'ssl';                           
           $mail->Port = 465;                                   

           $mail->setFrom('YOUR-EMAIL-SMTP');
           
           //Recipients
           $mail->addAddress($email);              
           $mail->addReplyTo('YOUR-EMAIL-SMTP');
          
           //Content
           $mail->isHTML(true);                                  
           $mail->Subject = 'ECommerce Site Password Reset';
           $mail->Body    = $message;

           $mail->send();

           $_SESSION['success'] = 'Password reset link sent';
        
       } 
       catch (Exception $e) {
           $_SESSION['error'] = 'Message could not be sent. Mailer Error: '.$mail->ErrorInfo;
       }
   }
   catch(PDOException $e){
    $_SESSION['error'] = $e->getMessage();
   }
  }
  else{
   $_SESSION['error'] = 'Email not found';
  }

  $pdo->close();

 }
 else{
  $_SESSION['error'] = 'Input email associated with account';
 }

 header('location: password_forgot.php');

?> 

15. signup.php file ini berfungsi sebagai form register
 <?php include 'includes/session.php'; ?>
<?php
  if(isset($_SESSION['user'])){
    header('location: cart_view.php');
  }

  if(isset($_SESSION['captcha'])){
    $now = time();
    if($now >= $_SESSION['captcha']){
      unset($_SESSION['captcha']);
    }
  }

?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition register-page">
<div class="register-box">
   <?php
      if(isset($_SESSION['error'])){
        echo "
          <div class='callout callout-danger text-center'>
            <p>".$_SESSION['error']."</p> 
          </div>
        ";
        unset($_SESSION['error']);
      }

      if(isset($_SESSION['success'])){
        echo "
          <div class='callout callout-success text-center'>
            <p>".$_SESSION['success']."</p> 
          </div>
        ";
        unset($_SESSION['success']);
      }
    ?>
   <div class="register-box-body">
     <p class="login-box-msg">Register a new membership</p>

     <form action="register.php" method="POST">
          <div class="form-group has-feedback">
            <input type="text" class="form-control" name="firstname" placeholder="Firstname" value="<?php echo (isset($_SESSION['firstname'])) ? $_SESSION['firstname'] : '' ?>" required>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="text" class="form-control" name="lastname" placeholder="Lastname" value="<?php echo (isset($_SESSION['lastname'])) ? $_SESSION['lastname'] : '' ?>"  required>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
          </div>
        <div class="form-group has-feedback">
          <input type="email" class="form-control" name="email" placeholder="Email" value="<?php echo (isset($_SESSION['email'])) ? $_SESSION['email'] : '' ?>" required>
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" name="password" placeholder="Password" required>
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" name="repassword" placeholder="Retype password" required>
            <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
          </div>
          <?php
            if(!isset($_SESSION['captcha'])){
              echo '
                <di class="form-group" style="width:100%;">
                  <div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>
                </di>
              ';
            }
          ?>
          <hr>
        <div class="row">
       <div class="col-xs-4">
             <button type="submit" class="btn btn-primary btn-block btn-flat" name="signup"><i class="fa fa-pencil"></i> Sign Up</button>
          </div>
        </div>
     </form>
      <br>
      <a href="login.php">I already have a membership</a><br>
      <a href="index.php">Home</a>
   </div>
</div>
 
<?php include 'includes/scripts.php' ?>
</body>
</html> 

16. verify.php file ini berisi script yang berfungsi untuk verifikasi user yang melakukan pendaftaran.
 <?php
include 'includes/session.php';
$conn = $pdo->open();

if(isset($_POST['login'])){
 
 $email = $_POST['email'];
 $password = $_POST['password'];

 try{

  $stmt = $conn->prepare("SELECT *, COUNT(*) AS numrows FROM users WHERE email = :email");
  $stmt->execute(['email'=>$email]);
  $row = $stmt->fetch();
  if($row['numrows'] > 0){
   if($row['status']){
    if(password_verify($password, $row['password'])){
     if($row['type']){
      $_SESSION['admin'] = $row['id'];
     }
     else{
      $_SESSION['user'] = $row['id'];
     }
    }
    else{
     $_SESSION['error'] = 'Incorrect Password';
    }
   }
   else{
    $_SESSION['error'] = 'Account not activated.';
   }
  }
  else{
   $_SESSION['error'] = 'Email not found';
  }
 }
 catch(PDOException $e){
  echo "There is some problem in connection: " . $e->getMessage();
 }

}
else{
 $_SESSION['error'] = 'Input login credentails first';
}

$pdo->close();

header('location: login.php');

?> 

Kalian bisa melihat demonya pada video yang telah kami buat, kalian juga bisa melihat demonya dengan mencobanya langsung bahkan kalian bisa mendownloadnya langsung secara free.



DEMO       DOWNLOAD

Semoga apa yang kami share diatas bermanfaat bagi anda jangan lupa share dengan orang terdekat anda, support kami juga dengan menekan iklan yang muncul pada website kami. Silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

Related Post

Cara Mengolah Website Anda diselah waktu kerja Anda



Selamat sore bagaimana kabar kalian, tentunya kami ingin mendengar kabar gembira, karena di akhir pekan ini tentunya kalian berkumpul bersama keluarga dan orang terdekat anda.

Minggu ini merupakan minggu pertama dimana saya memulai pekerjaan baru menjadi SEO analyze dan Digital Marketing pada sebuah perusahaan swasta. Tentu ini adalah kabar gembira bagi kami dan tentu bagian kalian yang mengalami ini.

Tak lepas dari kebahagian di atas tentunya kami mempunyai tugas yang lebih besar dari sebelumnya, yaitu kerja di perusahaan orang dengan kerja yang lebih berat, pergi pagi pulang sore, bahkan kadang saya bermalam di kantor juga.

Biasanya pada saat kami bangun pagi, kami membuat secangkir teh kemudian menyalakan laptop dan megecek apa saja yang mesti diperbaiki ataupun ditambahkan, Error yang terjadi kami atasi dan menyusun planning apa yang mesti dilakukan untuk meningkatkan peringkat website ini.

What about people who work Full Day?

Tentunya segala kebiasaan yang dilakukan untuk mengolah website akan berkurang dan pastinya kirang maksimal.

What happened to your website?

Pengalaman kami website yang jarang aktif dan di olah secara berkalan akan menimbulkan efek yang kurang bagus, bagi dari SEO dan menurunnya peringkat website anda di search engine.

Kadang ada yang bertanya kepada kami what is your website now? 

Jangan ragu untuk menjawabnya website saya selalu baik dan selalu berkembang.

How is advertising revenue?

Diawal dibuatnya website ini pada akhir tahun 2016 yang lalu, kami tidak begitu berambisi untuk mendapatkan penghasilan yang besar kami hanya ingin apa yang kami share di website ini bermanfaat bagi orang lain dan hal yang paling membuat kami bangga dengan memiliki dan mendirikan website ini adalah saat pengunung website berkomentar "his article really helped us".

Dihari yang bahaga ini kami akan mencoba berbagi bagaimana saya mengolah website di selah waktu bekerja yang padat.

1. Tentukan Planning di waktu Istirahat

Bagi anda yang super sibuk dalam dunia kerja, ada bagusnya anda meluangkan sedikit waktu untuk memikirkan atau menyusun planning apa yang akan anda lakukan untuk mengembangkan website anda.

10 menit adalah waktu yang cukup untuk melakukan itu, kalo perlu minta saran keteman kerja kalian bagaimana website anda terlihat bagus tanpa mengurangi SEO yang anda lakukan.

2. Luangkan Waktu yang lebih dihari libur

Dihari libur adalah waktu terbaik yang anda punya untuk mengolah website anda, biasanya kami mengolah website kami secara full pada hari minggu. anda tidak perlu ragu dengan terjadinya error terhadap website anda karena waktu anda banyak dihari itu untuk memprbaiki segala kemungkinan yang terjadi

3. Perbaiki masalah dan Error yang ada di Pagi hari sebelum

Ini adalah kebiasaan kami dan sellau kami lakukan setiap pagi sebelum kami berangkat kerja kami sellau mengecek bagaimana google menelusuri website kami, apakah terdapat error yang mesti diperbaiki dan segala hal yang berkaitan dengan mesin telusur.

4. Beri kabar kepengunjung setia website kalian bahwa kalian akan kembali pada hari (-)

Bagi website yang besar dan mempunyai pengunjung dan langganan yang banyak maka hal ini perlu anda lakukan untuk memberi kabar dan pengertian terhadap para pengunjung setia website anda.

5. Balas komentar pengunjung disela-sela kalian membuka smartphone

Jika kalian membuka smartphone tidak ada salahnya kalian membalas komentar para views anda, Kami sarankan anda membalas komentar dengan pembahasan yang ringan, jangan sampai anda memfokuskan pikiran anda ke komentar dan mengganggu aktivitas pekerjaan kalian.

Sekian share kali ini semoga apa yang kami share bermanfaa bagi anda, Jika terdapat typo dan kalimatnya tidak tersusun dengan baik, kami mohon maaf karena kami sedang berada di kantor.

Salam blogger:)

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

Related Post

Kode Warna HTML Lengkap

Selamat pagi, bagaimana kabar anda, baik bukan? Kali ini kami akan share kombinasi dari banyak warna pilihan yang kalian bisa pilih untuk mempercantik dan memperindah desain anda.

Dengan adanya kode warna lengkap dibawah kami harapkan bisa menambah penegtahuan anda mengenai perpaduan warna yang cocok dan tidak mengganggu pandangan desain anda.

GOLD
Color HTML / CSS Hex Code Decimal Code
lightgoldenrodyellow #FAFAD2 rgb(250,250,210)
palegoldenrod #EEE8AA rgb(238,232,170)
khaki #F0E68C rgb(240,230,140)
goldenrod #DAA520 rgb(218,165,32)
gold #FFD700 rgb(255,215,0)
orange #FFA500 rgb(255,165,0)
darkorange #FF8C00 rgb(255,140,0)
peru #CD853F rgb(205,133,63)
chocolate #D2691E rgb(210,105,30)
saddlebrown #8B4513 rgb(139,69,19)
sienna #A0522D rgb(160,82,45)
Golden yellow #FFDF00 rgb(255,223,0)
Metallic gold #D4AF37 rgb(212,175,55)
Old gold #CFB53B rgb(207,181,59)
Vegas gold #C5B358 rgb(197,179,88)
Pale gold #E6BE8A rgb(230,190,138)
Golden brown #996515 rgb(153,101,21)

BLACK
Color HTML / CSS Hex Code Decimal Code
black #000000 rgb(0,0,0)
dimgray / dimgray #696969 rgb(105,105,105)
gray / grey #808080 rgb(128,128,128)
darkgray / darkgrey #A9A9A9 rgb(169,169,169)
silver #C0C0C0 rgb(192,192,192)

BLUE
Color HTML / CSS Hex Code Decimal Code
aliceblue #F0F8FF rgb(240,248,255)
lavender #E6E6FA rgb(230,230,250)
powderblue #B0E0E6 rgb(176,224,230)
lightblue #ADD8E6 rgb(173,216,230)
lightskyblue #87CEFA rgb(135,206,250)
skyblue #87CEEB rgb(135,206,235)
deepskyblue #00BFFF rgb(0,191,255)
lightsteelblue #B0C4DE rgb(176,196,222)
dodgerblue #1E90FF rgb(30,144,255)
cornflowerblue #6495ED rgb(100,149,237)
steelblue #4682B4 rgb(70,130,180)
cadetblue #5F9EA0 rgb(95,158,160)
mediumslateblue #7B68EE rgb(123,104,238)
slateblue #6A5ACD rgb(106,90,205)
darkslateblue #483D8B rgb(72,61,139)
royalblue #4169E1 rgb(65,105,225)
blue #0000FF rgb(0,0,255)
mediumblue #0000CD rgb(0,0,205)
darkblue #00008B rgb(0,0,139)
navy #000080 rgb(0,0,128)
midnightblue #191970 rgb(25,25,112)
blueviolet #8A2BE2 rgb(138,43,226)
indigo #4B0082 rgb(75,0,130)

BROWN
Color HTML / CSS Hex Code Decimal Code
cornsilk #FFF8DC rgb(255,248,220)
blanchedalmond #FFEBCD rgb(255,235,205)
bisque #FFE4C4 rgb(255,228,196)
navajowhite #FFDEAD rgb(255,222,173)
wheat #F5DEB3 rgb(245,222,179)
burlywood #DEB887 rgb(222,184,135)
tan #D2B48C rgb(210,180,140)
rosybrown #BC8F8F rgb(188,143,143)
sandybrown #F4A460 rgb(244,164,96)
goldenrod #DAA520 rgb(218,165,32)
peru #CD853F rgb(205,133,63)
chocolate #D2691E rgb(210,105,30)
saddlebrown #8B4513 rgb(139,69,19)
sienna #A0522D rgb(160,82,45)
brown #A52A2A rgb(165,42,42)
maroon #800000 rgb(128,0,0)

CYAN
Color HTML / CSS Hex Code Decimal Code
lightcyan #E0FFFF rgb(224,255,255)
cyan #00FFFF rgb(0,255,255)
aqua #00FFFF rgb(0,255,255)
aquamarine #7FFFD4 rgb(127,255,212)
mediumaquamarine #66CDAA rgb(102,205,170)
paleturquoise #AFEEEE rgb(175,238,238)
turquoise #40E0D0 rgb(64,224,208)
mediumturquoise #48D1CC rgb(72,209,204)
darkturquoise #00CED1 rgb(0,206,209)
lightseagreen #20B2AA rgb(32,178,170)
cadetblue #5F9EA0 rgb(95,158,160)
darkcyan #008B8B rgb(0,139,139)
teal #008080 rgb(0,128,128)

GREEN
Color HTML / CSS Hex Code Decimal Code
lawngreen #7CFC00 rgb(124,252,0)
chartreuse #7FFF00 rgb(127,255,0)
limegreen #32CD32 rgb(50,205,50)
lime #00FF00 rgb(0.255.0)
forestgreen #228B22 rgb(34,139,34)
green #008000 rgb(0,128,0)
darkgreen #006400 rgb(0,100,0)
greenyellow #ADFF2F rgb(173,255,47)
yellowgreen #9ACD32 rgb(154,205,50)
springgreen #00FF7F rgb(0,255,127)
mediumspringgreen #00FA9A rgb(0,250,154)
lightgreen #90EE90 rgb(144,238,144)
palegreen #98FB98 rgb(152,251,152)
darkseagreen #8FBC8F rgb(143,188,143)
mediumseagreen #3CB371 rgb(60,179,113)
lightseagreen #20B2AA rgb(32,178,170)
seagreen #2E8B57 rgb(46,139,87)
olive #808000 rgb(128,128,0)
darkolivegreen #556B2F rgb(85,107,47)
olivedrab #6B8E23 rgb(107,142,35)

GRAY
Color HTML / CSS Hex Code Decimal Code
gainsboro #DCDCDC rgb(220,220,220)
lightgray / lightgrey #D3D3D3 rgb(211,211,211)
silver #C0C0C0 rgb(192,192,192)
darkgray / darkgrey #A9A9A9 rgb(169,169,169)
gray / grey #808080 rgb(128,128,128)
dimgray / dimgrey #696969 rgb(105,105,105)
lightslategray / lightslategrey #778899 rgb(119,136,153)
slategray / slategrey #708090 rgb(112,128,144)
darkslategray / darkslategrey #2F4F4F rgb(47,79,79)
black #000000 rgb(0,0,0)

MAROON
Color HTML / CSS Hex Code Decimal Code
maroon #800000 rgb(128,0,0)
darkred #8B0000 rgb(139,0,0)
brown #A52A2A rgb(165,42,42)
firebrick #B22222 rgb(178,34,34)
crimson #DC143C rgb(220,20,60)

ORANGE
Color HTML / CSS Hex Code Decimal Code
coral #FF7F50 rgb(255,127,80)
tomato #FF6347 rgb(255,99,71)
orangered #FF4500 rgb(255,69,0)
gold #FFD700 rgb(255,215,0)
orange #FFA500 rgb(255,165,0)
darkorange #FF8C00 rgb(255,140,0)

PINK
Color HTML / CSS Hex Code Decimal Code
pink #FFC0CB rgb(255,192,203)
lightpink #FFB6C1 rgb(255,182,193)
hotpink #FF69B4 rgb(255,105,180)
deeppink #FF1493 rgb(255,20,147)
palevioletred #DB7093 rgb(219,112,147)
mediumvioletred #C71585 rgb(199,21,133)

PURPLE
Color HTML / CSS Hex Code Decimal Code
lavender #E6E6FA rgb(230,230,250)
thistle #D8BFD8 rgb(216,191,216)
plum #DDA0DD rgb(221,160,221)
violet #EE82EE rgb(238,130,238)
orchid #DA70D6 rgb(218,112,214)
fuchsia #FF00FF rgb(255,0,255)
magenta #FF00FF rgb(255,0,255)
mediumorchid #BA55D3 rgb(186,85,211)
mediumpurple #9370DB rgb(147,112,219)
blueviolet #8A2BE2 rgb(138,43,226)
darkviolet #9400D3 rgb(148,0,211)
darkorchid #9932CC rgb(153,50,204)
darkmagenta #8B008B rgb(139,0,139)
purple #800080 rgb(128,0,128)
indigo #4B0082 rgb(75,0,130)

RED
Color HTML / CSS Hex Code Decimal Code
lightsalmon #FFA07A rgb(255,160,122)
salmon #FA8072 rgb(250,128,114)
darksalmon #E9967A rgb(233,150,122)
lightcoral #F08080 rgb(240,128,128)
indianred #CD5C5C rgb(205,92,92)
crimson #DC143C rgb(220,20,60)
firebrick #B22222 rgb(178,34,34)
red #FF0000 rgb(255,0,0)
darkred #8B0000 rgb(139,0,0)
maroon #800000 rgb(128,0,0)
tomato #FF6347 rgb(255,99,71)
orangered #FF4500 rgb(255,69,0)
palevioletred #DB7093 rgb(219,112,147)

WHITE
Color HTML / CSS Hex Code Decimal Code
white #FFFFFF rgb(255,255,255)
snow #FFFAFA rgb(255,250,250)
honeydew #F0FFF0 rgb(240,255,240)
mintcream #F5FFFA rgb(245,255,250)
azure #F0FFFF rgb(240,255,255)
aliceblue #F0F8FF rgb(240,248,255)
ghostwhite #F8F8FF rgb(248,248,255)
whitesmoke #F5F5F5 rgb(245,245,245)
seashell #FFF5EE rgb(255,245,238)
beige #F5F5DC rgb(245,245,220)
oldlace #FDF5E6 rgb(253,245,230)
floralwhite #FFFAF0 rgb(255,250,240)
ivory #FFFFF0 rgb(255,255,240)
antiquewhite #FAEBD7 rgb(250,235,215)
linen #FAF0E6 rgb(250,240,230)
lavenderblush #FFF0F5 rgb(255,240,245)
mistyrose #FFE4E1 rgb(255,228,225)
navajowhite #FFDEAD rgb(255,222,173)

YELLOW
Color HTML / CSS Hex Code Decimal Code
lightyellow #FFFFE0 rgb(255,255,224)
lemonchiffon #FFFACD rgb(255,250,205)
lightgoldenrodyellow #FAFAD2 rgb(250,250,210)
papayawhip #FFEFD5 rgb(255,239,213)
moccasin #FFE4B5 rgb(255,228,181)
peachpuff #FFDAB9 rgb(255,218,185)
palegoldenrod #EEE8AA rgb(238,232,170)
khaki #F0E68C rgb(240,230,140)
darkkhaki #BDB76B rgb(189,183,107)
yellow #FFFF00 rgb(255,255,0)
olive #808000 rgb(128,128,0)
greenyellow #ADFF2F rgb(173,255,47)
yellowgreen #9ACD32 rgb(154,205,50)
Light yellow1 #FFFFCC rgb(255,255,204)
Light yellow2 #FFFF99 rgb(255,255,153)
Light yellow3 #FFFF66 rgb(255,255,102)
Light yellow4 #FFFF33 rgb(255,255,51)
Yellow #FFFF00 rgb(255,255,0)
Dark yellow1 #CCCC00 rgb(204,204,0)
Dark yellow2 #999900 rgb(153,153,0)
Dark yellow3 #666600 rgb(102,102,0)
Dark yellow4 #333300 rgb(51,51,0)

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGew/24kUMI4BOrU/s512-c/photo.jpg

Related Post

Reset Password Dengan Konfirmasi Menggunakan PHP MySQLi

Kalian pasti reset password baik itu reset pasword email dan password yang terdapat aplikasi mobile anda bahkan beberapa aplikasi yang anda gunakan.

Ketika anda masih ingat ketika anda melakukan reset password pasti anda diminta memasukkan password baru kemudian anda diwajibkan memasukkan password lama sebagai konfirmasi. lihat gambar dibawah ini sebagai bayangan.

reset password dengan konfirmasi


Nah kali ini kmai akan mencoba reset password yang sama yaitu menggunakan konfirmasi dengan memasukkan password baru kemudian sistem akan meminta anda memasukkan password lama anda sebagai konfirmasi, ketika anda memasukkan password lama dengan tidak tepat reset password yang anda lakukan akan ditolak oleh sistem.

Langsung saja mari kita mulai dari awal. Let's it...

1. Database

Buat database dengan nama password kemduian masukkan struktur database dibawah ini.
 CREATE TABLE `user` (
  `user_id` int(11) NOT NULL,
  `username` varchar(20) NOT NULL,
  `password` varchar(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

2. Koneksi Database

Buat file dengan nama conn.php file ini berfungsi untuk koneksi kedatabase
 <?php
$conn = new mysqli('localhost', 'root', '', 'password') or die(mysqli_error());

if(!$conn){
 die("Error: Failed to connect to database");
}
?> 

3. Save User

Buat file dengan nama save_user.php file ini berisi script untuk memasukkan data user kedatabase.
 <?php
 require_once 'conn.php';
 if(ISSET($_POST['save'])){
  $username = $_POST['username'];
  $password = $_POST['password'];

  
  $conn->query("INSERT INTO `user` VALUES('', '$username', '$password')") or die($conn->error());
  
  header('location: index.php');
 }
?> 

4. Update Password

Buat file dengan nama update_password.php file ini berisi script yang berfungsi untuk update password.
 <?php
require_once 'conn.php';

if(ISSET($_POST['update'])){
 $user_id = $_POST['user_id'];
 $username = $_POST['username'];
 $newpassword = $_POST['newpassword'];
 $confirmpassword = $_POST['confirmpassword'];
 $oldpassword = $_POST['oldpassword'];


 if($newpassword == $confirmpassword){
  $query = $conn->query("SELECT * FROM `user` WHERE `user_id` = '$user_id' && `password` = '$oldpassword'") or die($conn->error());
  $valid = $query->num_rows;

  if($valid > 0){
   $conn->query("UPDATE `user` SET `username` = '$username', `password` = '$newpassword' WHERE `user_id` = '$user_id'") or die($conn->error());
   echo "<script>alert('Password updated')</script>";
   echo "<script>window.location = 'index.php'</script>";
  }else{
   echo "<script>alert('Password does not match to old password')</script>";
   echo "<script>window.location = 'index.php'</script>";
  }

 }else{
  echo "<script>alert('Password does not match')</script>";
  echo "<script>window.location = 'index.php'</script>";
 }
 
}
?> 

5. Form

Buat file dengan nama index.php file ini berisi script yang berfungsi sebagai script form utama dan form modal yang memanggil masing-masing fungsi dari save_user php dan update_password.php
 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Reset Password Dengan Konfirmasi</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#form_modal"><span class="glyphicon glyphicon-plus"></span> Add user</button>
  <br /><br />
  <table class="table table-bordered">
   <thead class="alert-info">
    <tr>
     <th>Username</th>
     <th>Password</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody style="background-color:#2794da;">
    <?php
    require 'conn.php';
    $query = $conn->query("SELECT * FROM `user`") or die($conn->error());
    while($fetch = $query->fetch_array()){
     ?>
     <tr>
      <td><?php echo $fetch['username']?></td>
      <td><?php echo str_replace($fetch['password'], "SECRET", $fetch['password'])?></td>
      <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#update_modal<?php echo $fetch['user_id']?>">Change Password</button></td>
     </tr>
     
     <div class="modal fade" id="update_modal<?php echo $fetch['user_id']?>" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
       <form action="update_password.php" method="POST" enctype="multipart/form-data">
        <div class="modal-content">
         <div class="modal-body">
          <div class="col-md-2"></div>
          <div class="col-md-8">
           <div class="form-group">
            <label>Username</label>
            <input type="hidden" name="user_id" value="<?php echo $fetch['user_id']?>"/>
            <input class="form-control" type="text" name="username" value="<?php echo $fetch['username']?>" required="required" />
           </div>
           <div class="form-group">
            <label>New Password</label>
            <input class="form-control" type="password" maxlength="12" name="newpassword" required="required"/>
           </div>
           <div class="form-group">
            <label>Confirm Password</label>
            <input class="form-control" type="password" maxlength="12" name="confirmpassword" required="required"/>
           </div>
           <div class="form-group">
            <label>Old Password</label>
            <input class="form-control" type="password" maxlength="12" name="oldpassword" required="required"/>
           </div>
          </div>
         </div>
         <div style="clear:both;"></div>
         <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
          <button name="update" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Update</button>
         </div>
        </div>
       </form>
      </div>
     </div>
     
     
     
     <?php
    }
    ?>
   </tbody>
  </table>
 </div>
 <div class="modal fade" id="form_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
   <form action="save_user.php" method="POST" enctype="multipart/form-data">
    <div class="modal-content">
     <div class="modal-body">
      <div class="col-md-2"></div>
      <div class="col-md-8">
       <div class="form-group">
        <label>Username</label>
        <input class="form-control" type="text" name="username" required="required" />
       </div>
       <div class="form-group">
        <label>Password</label>
        <input class="form-control" type="password" maxlength="12" name="password" required="required"/>
       </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
      <button name="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
     </div>
    </div>
   </form>
  </div>
 </div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</html> 

Kalian bisa mendownload file dan melihat demonya dibawah ini.

DEMO      DOWNLOAD

Sekain share kali ini semoga apa yang kami share bermanfaat bagi anda semua, silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

Related Post

3 Langkah Memasukkan Google Maps Kedalam Website

Apakah anda pernah melihat google maps pada sebuah website? Kami rasa mereke embed dari google maps atau bagi yang expert hanya mengambil atitide dan longitude-nya.

Bagi seorang web developer yang telah expert mereka tidak embed alamat website merek dari google mapsnya langsung, tetapi mereka hanya mengambil Atitude dan Longitude kemudian dimasukkan kedalam database mereka dan mereka tampilkan kedalam website mereka.

Tetapi bagi kalian dan kami yang belum expert hal seperti itu sangat susah dilakukan, Tapi tenang saja kami mempunyai solusinya, dimana kalian hanya melakukan 3 langkah untuk memasukkan google maps kedalam website kalian.

Tetapi sebelum kita memulai kita haru membuat form terlebih dahulu, form ini sebagai tempat menyimpan google maps yang telah kita embed. Form dibawah kami beri nama index.html
 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Cara Memasukkan Google Maps Kedalam Website</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <br /><br />
  <!--Tempat Google Maps Embed-->

  <!--Google Maps Ended-->
 </div>

</body> 
</html> 

1. Silahkan klik link berikut https://www.embedgooglemap.net/

Kemudian anda masukkan alamat anda, untuk lebih detail silahkan lihat gambar dibawah.

cara memasukkan google maps kedalam website
Setelah anda menemukan details alamat anda silahkan klik button Get HTML-Code, lihat gambar yang kami ber nimor 2.

2. Copy url yang anda dapatkan setelah anda menekan button pada nomor 2, untuk detailnya silahkan lihat gambar dibawah.

cara memasukkan google maps kedalam aplikasi


3. Pasang kedalam website atau form yang telah kita buat di atas.

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Cara Memasukkan Google Maps Kedalam Website</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <br /><br />
  <!--Tempat Google Maps Embed-->
  <center>
   <div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="400" id="gmap_canvas" src="https://maps.google.com/maps?q=Malino&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><style>.mapouter{text-align:right;height:500px;width:600px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:600px;}</style></div>
  </center>
  <!--Google Maps Ended-->
 </div>

</body> 
</html> 

Selesai.. Jika klaian ingin melihat hasil dari apa yang kami share di atas silahkan klik button demo dibawah ini.


Sekian share kalia ini semoga apa yang kami share di atas bermanfaat bagi anda, Jangan lupa tinggalkan komentar dan mulai berdiskusi dengan kami.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

Related Post

Hapus Data Tanpa Refresh Halaman Menggunakan MySQLi

Selamat pagi bagaimana kabar kalian, bagaimana anda menikmati liburan panjang kalian?

Apakah anda ingin belajar menjadi programmer web, jika jawabannya adaah Ya! maka kalian harus mempelajari tutorial dibawah ini, dan kami berharap kalian bisa memahaminya dan mengimplementasikannya dalam aplikasi atau project kalian.
Hapus Data Tanpa Refresh Halaman Menggunakan MySQLi


Kali ini kami akan share bagaimana menghapus data database tanpa resfresh menggunakan MySQL. Mari kita mulai dari awal, Let's it...

Membuat Database
Buat database dengan nama user.sql kemudian masukkan struktur database dibawah ini.
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


CREATE TABLE `member` (
  `mem_id` int(11) NOT NULL,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL,
  `age` int(3) NOT NULL,
  `address` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `member` (`mem_id`, `firstname`, `lastname`, `age`, `address`) VALUES
(2, 'Arman', 'Basir', 10, 'Mamampang, Garassi'),
(3, 'Muksin', 'Basir', 29, 'Malino, Gowa');


ALTER TABLE `member`
  ADD PRIMARY KEY (`mem_id`);

ALTER TABLE `member`
  MODIFY `mem_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT; 

Koneksi database
Buat file dengan nama conn.php file berfungsi koneksi kedatabase.
 <?php
 $conn = mysqli_connect('localhost', 'root', '', 'user') or die(mysqli_error());
 if(!$conn){
  die("Error: Failed to connect to database");
 }
?> 

Buat Tampilan Form
Buat file dengan nama index.php file ini berisi script sebagai form atau tampilan utama web base di atas menggunakan bootstrap, untuk tabel kami mengunakan data table dan kami menggunakan modal untuk notification dan form add user.
 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>

</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Hapus Data Tanpa Refresh Halaman Menggunakan MySQLi</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <button type="button" class="btn btn-success" data-target="#form_modal" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Add User</button> 
  <br /><br />
  <table id="example" class="table table-striped table-bordered" style="width:100%">
   <thead>
    <tr>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Age</th>
     <th>Address</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody>
    <?php
    require 'conn.php';
    $query = mysqli_query($conn, "SELECT * FROM `member` ORDER BY `lastname` ASC") or die(mysqli_error());
    while($fetch = mysqli_fetch_array($query)){
     ?>
     <tr class="del_mem<?php echo $fetch['mem_id']?>">
      <td><?php echo $fetch['firstname']?></td>
      <td><?php echo $fetch['lastname']?></td>
      <td><?php echo $fetch['age']?></td>
      <td><?php echo $fetch['address']?></td>
      <td><button type="button" class="btn btn-danger btn_del" id="<?php echo $fetch['mem_id']?>"><span class="glyphicon glyphicon-remove"></span> Delete</button></td>
     </tr>
     <?php
    }
    ?>
   </tbody>
  </table>
 </div>
 <div class="modal fade" id="modal_confirm" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
   <div class="modal-content">
    <div class="modal-header">
     <h3 class="modal-title">Notification</h3>
    </div>
    <div class="modal-body">
     <center><h4>Apakah anda benar-benar ingin menghapusnya?</h4></center>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
     <button type="button" class="btn btn-success" id="btn_yes">Yes</button>
    </div>
   </div>
  </div>
 </div>
 <div class="modal fade" id="form_modal" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <form method="POST" action="save_member.php">
     <div class="modal-header">
      <h3 class="modal-title">Add User</h3>
     </div>
     <div class="modal-body">
      <div class="col-md-2"></div>
      <div class="col-md-8">
       <div class="form-group">
        <label>Firstname</label>
        <input type="text" name="firstname" class="form-control" required="required"/>
       </div>
       <div class="form-group">
        <label>Lastname</label>
        <input type="text" name="lastname" class="form-control" required="required" />
       </div>
       <div class="form-group">
        <label>Age</label>
        <input type="number" name="age" class="form-control" min="0" max="200" required="rquired" />
       </div>
       <div class="form-group">
        <label>Address</label>
        <input type="text" name="address" class="form-control" required="required"/>
       </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div class="modal-footer">
      <button name="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
      <button class="btn btn-danger" type="button" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
     </div>
    </div>
   </form>
  </div>
 </div>
</div>

<script>
 $(document).ready(function() {
  $('#example').DataTable();
 } );
</script>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body> 
</html> 

Buat Notificaton Delete
Buat file dengan nama delete_member.php file ini berisi script untuk menghapus database.
 <?php
 require_once 'conn.php';
 $mem_id = $_POST['mem_id'];
 mysqli_query($conn, "DELETE FROM `member` WHERE `mem_id` = $mem_id") or die(mysqli_error());
?> 

Kemdian buat file dengan nama script.js file ini disimpan dalam directori js
 $(document).ready(function(){
 $('.btn_del').on('click', function(){
  var mem_id = $(this).attr('id');
  $("#modal_confirm").modal('show');
  $('#btn_yes').attr('name', mem_id);
 });
 $('#btn_yes').on('click', function(){
  var id = $(this).attr('name');
  $.ajax({
   type: "POST",
   url: "delete_member.php",
   data:{
    mem_id: id
   },
   success: function(){
    $("#modal_confirm").modal('hide');
    $(".del_mem" + id).empty();
    $(".del_mem" + id).html("<td colspan='6'><center>Deleting...</center></td>");
    setTimeout(function(){
     $(".del_mem" + id).fadeOut('slow');
    }, 1000);
   }
  });
 });
}); 

Fungsi Save User
Buat file dengan nama save_member.php file ini memiliki fungsi untuk memasukkan data kedalam database.
 <?php
require_once 'conn.php';

$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$age = $_POST['age'];
$address = $_POST['address'];
$civil_status = $_POST['civil_status'];

mysqli_query($conn, "INSERT INTO `member` VALUES('', '$firstname', '$lastname', '$age', '$address')") or die(mysqli_error());

header("location: index.php");
?> 

Jika kalian malas untuk mengikuti satu per satu tutorial di atas silahkan download filenya dibawah ini.


Sekain share kali ini semoga apa yang kami share bermanfaat bagi anda, Kalian bisa meninggalkan komentar dibawah dan mulai berdiskusi dengan kami.

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGew/24kUMI4BOrU/s512-c/photo.jpg

Related Post

close