article

Saturday, December 15, 2018

Create A CSS Administrator Login Form Design

Create A CSS Administrator Login Form Design

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create A CSS Administrator Login Form Design and Login system using PHP with MYSQL database</title>
<style>
#login-form {
    margin:106px auto 0px auto;
    width:560px;
    border:solid 12px #E0E0E0;
    background:#E0E0E0;
    border-radius:12px;
    -moz-border-radius:12px;
    webkit-border-radius:12px;
}
#login-form{
border-color:#4BB2C5;
}
#login-inner {
    border-radius:5px;
    -moz-border-radius:5px;
    webkit-border-radius:5px;
    margin:0 auto;
    padding:30px;
    width:500px;
}
#login-form #wrapper{
    height: 50px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    text-align:center;
    width:494px;
    margin:0px auto 30px auto;
    font-size:1.2em;
    background-image: url('img/bg.jpg');
}
#login-form #wrapper p{
    padding-top:4px;
    margin:0;
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:2.2em;
    color:#FFF;
    font-weight:bold;
    text-shadow:#111 0px 1px 1px;
}
.field-separator{
    width:560px;
    margin:0px auto 20px auto;
}
#login-form label{
    color:#111;
    display:block;
    font-size:1em;
    margin-bottom:2px;
    font-weight:bold
}
#login-form input.txt {
    background:url('img/login_input_bg.png') repeat-x scroll left top #F7FCFF;
    border:1px solid #CCC;
    color:#25313C;
    font-size:1.4em;
    width:486px;
    padding:4px;
}
#login-form input#login-button{
    text-transform:uppercase;
    float:right;
    margin-top:10px;
    color:#DDD;
}
div#remember-me{
    float:left;
    width:300px;
    margin-top:16px;
}
div#remember-me a{
    color:#000;
    padding-right:10px;
    font-weight:bold;
    font-size:0.75em;
}
#login-bottom{
border-top: 2px dotted #BBB;
padding: 3px;
}
input.submit {
background-color: #111;
}
.submit::selection {
background: transparent;
}
input.submit.large {
padding: 8px 14px 9px;
font-size: 14px;
}
input.submit.round {
border:5px;
border-radius:5px;
-moz-border-radius:5px;
webkit-border-radius:5px;
}
</style>
</head>
<body style="background:#FEFEFE url('img/bg.jpg') repeat-x;">
<form action="loginsubmit.php" method="post" id="login-form">
     <div id="login-inner">
         <div id="wrapper">
             <p>Administration Login</p>
         </div>
         <div class="field-separator">
             <label for="login">Login</label>
             <input type="text" name="login" value="" id="login" class="txt" />
         </div>
         <div class="field-separator">
             <label for="password">Password</label>
             <input type="password" name="password" value="" id="password" class="txt" />
         </div>
         <div id="login-bottom">
              <div id="remember-me">
                 <a href="#">Remember Me</a>|
                 <a href="#">Forgot Password</a>
              </div>
             <input type="submit" name="enter" value="Enter" class="submit large round" id="login-button" />
             <div style="clear: both"></div>
         </div>
     </div>
</form>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//loginsubmit.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
$username = $_POST['login'];
$pass = $_POST['password'];
$sqlc="SELECT * FROM users WHERE username = '$username' AND password = '$pass'";
if ($rsdc=mysqli_query($conn,$sqlc)){
    $total=mysqli_num_rows($rsdc);
      if ($total == '1') {
          echo'<h1>You are a validated user.</h1>';
      }else{
        echo'<h1>Sorry, your credentials are not valid, Please try again.</h1>';   
      }    
}  
?>

Posted by ednalan at 6:34 AM . Under .

Related Post