SHARE
TWEET

Untitled

a guest Jun 8th, 2017 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <h1> Table </h1>
  6.  
  7. <?php
  8. $servername = "localhost";
  9. $username = "root";
  10. $password = "";
  11. $dbname = "LoginDB";
  12. $fName = $_POST["fName"];
  13. $fPsw = $_POST["fPsw"];
  14. // Create connection
  15. $conn = new mysqli($servername, $username, $password, $dbname);
  16. // Check connection
  17. if ($conn->connect_error) {
  18.      die("Connection failed: " . $conn->connect_error);
  19. }
  20.  
  21. $sql = "SELECT * FROM `data` WHERE Name = '".$fName."'";
  22. $result = $conn->query($sql);
  23. $row = $result->fetch_assoc();
  24.     if ($result->num_rows > 0 && $row["Password"] == $fPsw) {
  25.          // output data of each row
  26.            
  27.                  echo "Hello ".$row["Role"]." ". $row["Name"];
  28.            
  29.            
  30.          
  31.     } else {
  32.          echo "0 results";
  33.     }
  34.  
  35. $conn->close();
  36. ?>
  37.  
  38. </body>
  39. </html>
  40. <!DOCTYPE html>
  41. <html>
  42. <style>
  43. /* Full-width input fields */
  44. input[type=text], input[type=password] {
  45.     width: 100%;
  46.     padding: 12px 20px;
  47.     margin: 8px 0;
  48.     display: inline-block;
  49.     border: 1px solid #ccc;
  50.     box-sizing: border-box;
  51. }
  52.  
  53. /* Set a style for all buttons */
  54. button {
  55.     background-color: #4CAF50;
  56.     color: white;
  57.     padding: 14px 20px;
  58.     margin: 8px 0;
  59.     border: none;
  60.     cursor: pointer;
  61.     width: 100%;
  62. }
  63.  
  64. button:hover {
  65.     opacity: 0.8;
  66. }
  67.  
  68. /* Extra styles for the cancel button */
  69. .cancelbtn {
  70.     width: auto;
  71.     padding: 10px 18px;
  72.     background-color: #f44336;
  73. }
  74.  
  75. /* Center the image and position the close button */
  76. .imgcontainer {
  77.     text-align: center;
  78.     margin: 24px 0 12px 0;
  79.     position: relative;
  80. }
  81.  
  82. img.avatar {
  83.     width: 40%;
  84.     border-radius: 50%;
  85. }
  86.  
  87. .container {
  88.     padding: 16px;
  89. }
  90.  
  91. span.psw {
  92.     float: right;
  93.     padding-top: 16px;
  94. }
  95.  
  96. /* The Modal (background) */
  97. .modal {
  98.     display: none; /* Hidden by default */
  99.     position: fixed; /* Stay in place */
  100.     z-index: 1; /* Sit on top */
  101.     left: 0;
  102.     top: 0;
  103.     width: 100%; /* Full width */
  104.     height: 100%; /* Full height */
  105.     overflow: auto; /* Enable scroll if needed */
  106.     background-color: rgb(0,0,0); /* Fallback color */
  107.     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  108.     padding-top: 60px;
  109. }
  110.  
  111. /* Modal Content/Box */
  112. .modal-content {
  113.     background-color: #fefefe;
  114.     margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  115.     border: 1px solid #888;
  116.     width: 80%; /* Could be more or less, depending on screen size */
  117. }
  118.  
  119. /* The Close Button (x) */
  120. .close {
  121.     position: absolute;
  122.     right: 25px;
  123.     top: 0;
  124.     color: #000;
  125.     font-size: 35px;
  126.     font-weight: bold;
  127. }
  128.  
  129. .close:hover,
  130. .close:focus {
  131.     color: red;
  132.     cursor: pointer;
  133. }
  134.  
  135. /* Add Zoom Animation */
  136. .animate {
  137.     -webkit-animation: animatezoom 0.6s;
  138.     animation: animatezoom 0.6s
  139. }
  140.  
  141. @-webkit-keyframes animatezoom {
  142.     from {-webkit-transform: scale(0)}
  143.     to {-webkit-transform: scale(1)}
  144. }
  145.    
  146. @keyframes animatezoom {
  147.     from {transform: scale(0)}
  148.     to {transform: scale(1)}
  149. }
  150.  
  151. /* Change styles for span and cancel button on extra small screens */
  152. @media screen and (max-width: 300px) {
  153.     span.psw {
  154.        display: block;
  155.        float: none;
  156.     }
  157.     .cancelbtn {
  158.        width: 100%;
  159.     }
  160. }
  161. </style>
  162. <body>
  163.  
  164. <h2>Modal Login Form</h2>
  165.  
  166. <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
  167.  
  168. <div id="id01" class="modal">
  169.  
  170.   <form class="modal-content animate" action="welcome.php" method="post">
  171.     <div class="imgcontainer">
  172.       <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  173.     </div>
  174.  
  175.     <div class="container">
  176.       <label><b>Username</b></label>
  177.       <input type="text" placeholder="Enter Username" name="fName" required>
  178.  
  179.       <label><b>Password</b></label>
  180.       <input type="password" placeholder="Enter Password" name="fPsw" required>
  181.        
  182.       <button type="submit">Login</button>
  183.     </div>
  184.  
  185.     <div class="container" style="background-color:#f1f1f1">
  186.       <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
  187.      
  188.     </div>
  189.   </form>
  190. </div>
  191.  
  192. <script>
  193. // Get the modal
  194. var modal = document.getElementById('id01');
  195.  
  196. // When the user clicks anywhere outside of the modal, close it
  197. window.onclick = function(event) {
  198.     if (event.target == modal) {
  199.         modal.style.display = "none";
  200.     }
  201. }
  202. </script>
  203.  
  204. </body>
  205. </html>
RAW Paste Data
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
 
Top