API tools faq
paste
Advertisement
izzaqazraiey

register

izzaqazraiey
Nov 20th, 2019
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 9.58 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. include 'includes/header.php';
  3. include 'includes/navbar.php';
  4. ?>
  5. <br>
  6.  
  7. <style>
  8. * {
  9.  box-sizing: border-box;
  10. }
  11.  
  12. body {
  13.  background-color: #f1f1f1;
  14. }
  15.  
  16. #regForm {
  17.  background-color: #ffffff;
  18.  margin: 10px auto;
  19.  font-family: Raleway;
  20.  padding: 30px;
  21.  width: 70%;
  22.  min-width: 300px;
  23. }
  24.  
  25. h1 {
  26.  text-align: center;  
  27. }
  28.  
  29. input {
  30.  padding: 10px;
  31.  width: 100%;
  32.  font-size: 17px;
  33.  font-family: Raleway;
  34.  border: 1px solid #aaaaaa;
  35. }
  36.  
  37. /* Mark input boxes that gets an error on validation: */
  38. input.invalid {
  39.  background-color: #ffdddd;
  40. }
  41.  
  42. /* Hide all steps by default: */
  43. .tab {
  44.  display: none;
  45. }
  46.  
  47. button {
  48.  background-color: #4CAF50;
  49.  color: #ffffff;
  50.  border: none;
  51.  padding: 10px 20px;
  52.  font-size: 17px;
  53.  font-family: Raleway;
  54.  cursor: pointer;
  55. }
  56.  
  57. button:hover {
  58.  opacity: 0.8;
  59. }
  60.  
  61. #prevBtn {
  62.  background-color: #bbbbbb;
  63. }
  64.  
  65. /* Make circles that indicate the steps of the form: */
  66. .step {
  67.  height: 15px;
  68.  width: 15px;
  69.  margin: 0 2px;
  70.  background-color: #bbbbbb;
  71.  border: none;  
  72.  border-radius: 50%;
  73.  display: inline-block;
  74.  opacity: 0.5;
  75. }
  76.  
  77. .step.active {
  78.  opacity: 1;
  79. }
  80.  
  81. /* Mark the steps that are finished and valid: */
  82. .step.finish {
  83.  background-color: #4CAF50;
  84. }
  85. </style>
  86. <body>
  87.  
  88.    <form id="regForm" method="post" enctype="multipart/form-data">
  89.        <h1>Member Registration:</h1>
  90.            <!-- One "tab" for each step in the form: -->
  91.            <div class="tab">
  92.                <label for="matric">Matric No:</label>
  93.                    <p><input type=text id="matric" placeholder="Enter matric no" oninput="this.className = ''" name="matric"></p>
  94.                <label for="name">Name:</label>
  95.                    <p><input type=text id="name" placeholder="Enter name" oninput="this.className = ''" name="name"></p>
  96.                <label for="semester">Semester:</label>
  97.                    <p><input type=number id="semester" placeholder="Enter semester" oninput="this.className = ''" name="semester" min="1" max="8"></p>
  98.            </div>
  99.            <div class="tab">
  100.                <label for="email">Email:</label>
  101.                    <p><input type=email id="email" placeholder="Enter email" oninput="this.className = ''" name="email"></p>
  102.                <label for="inasis">Inasis:</label>
  103.                    <p><input type=text id="inasis" placeholder="Enter inasis" oninput="this.className = ''" name="inasis"></p>
  104.                <label for="phone">Phone:</label>
  105.                <p><input type=text id="phone" placeholder="Enter phone" oninput="this.className = ''" name="phone" minlength="10" maxlength="11"></p>
  106.            </div>
  107.            <div class="tab">
  108.                <label for="username">Username:</label>
  109.                    <p><input type=text id="username" placeholder="Enter username" oninput="this.className = ''" name="username"></p>
  110.                <label for="password">Password:</label>
  111.                    <p><input type=password id="password" placeholder="Enter password" oninput="this.className = ''" name="password"></p>
  112.                <label for="picture">Picture:</label>
  113.                    <div class="custom-file mb-3">
  114.                        <input  type="file" class="custom-file-input" id="picture" name="image">
  115.                        <label  style="width: 50%; text-align:center;"  class="custom-file-label" for="picture">Choose file</label>
  116.                    </div>
  117.            </div>            
  118.            <div style="overflow:auto;">
  119.                <div style="float:right;">
  120.                    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
  121.                    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
  122.                </div>
  123.            </div>
  124.            <!-- Circles which indicates the steps of the form: -->
  125.            <div style="text-align:center;margin-top:40px;">
  126.                <span class="step"></span>
  127.                <span class="step"></span>
  128.                <span class="step"></span>
  129.            </div>
  130.    </form>
  131.    <script>
  132.            // Add the following code if you want the name of the file appear on select
  133.            $(".custom-file-input").on("change", function() {
  134.              var fileName = $(this).val().split("\\").pop();
  135.              $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  136.            });
  137.            
  138.            var currentTab = 0; // Current tab is set to be the first tab (0)
  139.            showTab(currentTab); // Display the current tab
  140.  
  141.            function showTab(n) {
  142.              // This function will display the specified tab of the form...
  143.              var x = document.getElementsByClassName("tab");
  144.              x[n].style.display = "block";
  145.              //... and fix the Previous/Next buttons:
  146.              if (n == 0) {
  147.                document.getElementById("prevBtn").style.display = "none";
  148.              } else {
  149.                document.getElementById("prevBtn").style.display = "inline";
  150.              }
  151.              if (n == (x.length - 1)) {
  152.                document.getElementById("nextBtn").innerHTML = "Submit";
  153.              } else {
  154.                document.getElementById("nextBtn").innerHTML = "Next";
  155.              }
  156.              //... and run a function that will display the correct step indicator:
  157.              fixStepIndicator(n)
  158.            }
  159.  
  160.            function nextPrev(n) {
  161.              // This function will figure out which tab to display
  162.              var x = document.getElementsByClassName("tab");
  163.              // Exit the function if any field in the current tab is invalid:
  164.              if (n == 1 && !validateForm()) return false;
  165.              // Hide the current tab:
  166.              x[currentTab].style.display = "none";
  167.              // Increase or decrease the current tab by 1:
  168.              currentTab = currentTab + n;
  169.              // if you have reached the end of the form...
  170.              if (currentTab >= x.length) {
  171.                // ... the form gets submitted:
  172.                document.getElementById("regForm").submit();
  173.                return false;
  174.              }
  175.              // Otherwise, display the correct tab:
  176.              showTab(currentTab);
  177.            }
  178.  
  179.            function validateForm() {
  180.              // This function deals with validation of the form fields
  181.              var x, y, i, valid = true;
  182.              x = document.getElementsByClassName("tab");
  183.              y = x[currentTab].getElementsByTagName("input");
  184.              // A loop that checks every input field in the current tab:
  185.              for (i = 0; i < y.length; i++) {
  186.                // If a field is empty...
  187.                if (y[i].value == "") {
  188.                  // add an "invalid" class to the field:
  189.                  y[i].className += " invalid";
  190.                  // and set the current valid status to false
  191.                  valid = false;
  192.                }
  193.              }
  194.              // If the valid status is true, mark the step as finished and valid:
  195.              if (valid) {
  196.                document.getElementsByClassName("step")[currentTab].className += " finish";
  197.              }
  198.              return valid; // return the valid status
  199.            }
  200.  
  201.            function fixStepIndicator(n) {
  202.              // This function removes the "active" class of all steps...
  203.              var i, x = document.getElementsByClassName("step");
  204.              for (i = 0; i < x.length; i++) {
  205.                x[i].className = x[i].className.replace(" active", "");
  206.              }
  207.              //... and adds the "active" class on the current step:
  208.              x[n].className += " active";
  209.            }
  210.    </script>
  211.    <?php
  212.        require('includes/db_connect.php');
  213.        if (isset($_POST['submit'])) {
  214.            $matric=$_POST["matric"];
  215.            $name=$_POST["name"];                
  216.            $email=$_POST["email"];
  217.            $semester=$_POST["semester"];
  218.            $inasis=$_POST["inasis"];
  219.            $phone=$_POST["phone"];
  220.            $username=$_POST['username'];
  221.            $pass=$_POST["password"];
  222.            $password = password_hash("$pass" , PASSWORD_DEFAULT);
  223.            $regdate=date("Y-m-d h:i:sa");
  224.            $role="member";
  225.            
  226.            $image = $_FILES['image']['name'];
  227.            $ext = $_FILES['image']['type'];
  228.            $validExt = array ("image/gif",  "image/jpeg",  "image/pjpeg", "image/png");
  229.            if (empty($image)) {
  230.                echo "<script>alert('Attach an image');</script>";
  231.            }elseif ($_FILES['image']['size'] <= 0 || $_FILES['image']['size'] > 1024000 ){
  232.                echo "<script>alert('Image size is not proper');</script>";
  233.            }elseif (!in_array($ext, $validExt)){
  234.                echo "<script>alert('Not a valid image');</script>";
  235.            }else{
  236.                $folder  = 'pictures/';
  237.                $imgext = strtolower(pathinfo($image, PATHINFO_EXTENSION) );
  238.                $picture = rand(1000 , 1000000) .'.'.$imgext;
  239.                if(move_uploaded_file($_FILES['image']['tmp_name'], $folder.$picture)) {
  240.            
  241.                    $sql="INSERT INTO members VALUES ('$matric', '$name', '$email', '$semester', '$inasis', '$phone', '$username', '$password', '$picture', '$role', '$regdate')";
  242.                    $result=mysqli_query($conn,$sql);
  243.                    if ($result) {
  244.                        echo "<script> alert('You are registered successfully.');
  245.                       window.location.href='index.php';</script>";
  246.                    }
  247.                    else {
  248.                        echo "<script> alert('Error ..try again');</script>";
  249.                    }
  250.                }            
  251.            }
  252.        }
  253.        ?>
  254. </body>
  255. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!