· 6 years ago · Sep 05, 2019, 12:46 AM
1https://codeshack.io/secure-login-system-php-mysql/
2-----------------------------------style.css--------------------
3* {
4 box-sizing: border-box;
5 font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
6 font-size: 16px;
7 -webkit-font-smoothing: antialiased;
8 -moz-osx-font-smoothing: grayscale;
9}
10body {
11 background-color: #435165;
12}
13.login {
14 width: 400px;
15 background-color: #ffffff;
16 box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
17 margin: 100px auto;
18}
19.login h1 {
20 text-align: center;
21 color: #5b6574;
22 font-size: 24px;
23 padding: 20px 0 20px 0;
24 border-bottom: 1px solid #dee0e4;
25}
26.login form {
27 display: flex;
28 flex-wrap: wrap;
29 justify-content: center;
30 padding-top: 20px;
31}
32.login form label {
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 width: 50px;
37 height: 50px;
38 background-color: #3274d6;
39 color: #ffffff;
40}
41.login form input[type="password"], .login form input[type="text"] {
42 width: 310px;
43 height: 50px;
44 border: 1px solid #dee0e4;
45 margin-bottom: 20px;
46 padding: 0 15px;
47}
48.login form input[type="submit"] {
49 width: 100%;
50 padding: 15px;
51 margin-top: 20px;
52 background-color: #3274d6;
53 border: 0;
54 cursor: pointer;
55 font-weight: bold;
56 color: #ffffff;
57 transition: background-color 0.2s;
58}
59.login form input[type="submit"]:hover {
60 background-color: #2868c7;
61 transition: background-color 0.2s;
62}
63.navtop {
64 background-color: #2f3947;
65 height: 60px;
66 width: 100%;
67 border: 0;
68}
69.navtop div {
70 display: flex;
71 margin: 0 auto;
72 width: 1000px;
73 height: 100%;
74}
75.navtop div h1, .navtop div a {
76 display: inline-flex;
77 align-items: center;
78}
79.navtop div h1 {
80 flex: 1;
81 font-size: 24px;
82 padding: 0;
83 margin: 0;
84 color: #eaebed;
85 font-weight: normal;
86}
87.navtop div a {
88 padding: 0 20px;
89 text-decoration: none;
90 color: #c1c4c8;
91 font-weight: bold;
92}
93.navtop div a i {
94 padding: 2px 8px 0 0;
95}
96.navtop div a:hover {
97 color: #eaebed;
98}
99body.loggedin {
100 background-color: #f3f4f7;
101}
102.content {
103 width: 1000px;
104 margin: 0 auto;
105}
106.content h2 {
107 margin: 0;
108 padding: 25px 0;
109 font-size: 22px;
110 border-bottom: 1px solid #e0e0e3;
111 color: #4a536e;
112}
113.content > p, .content > div {
114 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
115 margin: 25px 0;
116 padding: 25px;
117 background-color: #fff;
118}
119.content > p table td, .content > div table td {
120 padding: 5px;
121}
122.content > p table td:first-child, .content > div table td:first-child {
123 font-weight: bold;
124 color: #4a536e;
125 padding-right: 15px;
126}
127.content > div p {
128 padding: 5px;
129 margin: 0 0 10px 0;
130}
131--------------------------index.html-------------------
132<!DOCTYPE html>
133<html>
134 <head>
135 <meta charset="utf-8">
136 <title>Login</title>
137 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
138 <link href="style.css" rel="stylesheet" type="text/css">
139 </head>
140 <body>
141
142 <div class="login">
143 <h1>Login</h1>
144 <form action="authenticate.php" method="post">
145 <label for="username">
146 <i class="fas fa-user"></i>
147 </label>
148 <input type="text" name="username" placeholder="Username" id="username" required>
149 <label for="password">
150 <i class="fas fa-lock"></i>
151 </label>
152 <input type="password" name="password" placeholder="Password" id="password" required>
153 <input type="submit" value="Login">
154 </form>
155 </div>
156 </body>
157</html>
158------------authentication.php----------
159<?php
160session_start();
161// Change this to your connection info.
162$DATABASE_HOST = 'localhost';
163$DATABASE_USER = 'root';
164$DATABASE_PASS = '';
165$DATABASE_NAME = 'phplogin';
166// Try and connect using the info above.
167$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
168if ( mysqli_connect_errno() ) {
169 // If there is an error with the connection, stop the script and display the error.
170 die ('Failed to connect to MySQL: ' . mysqli_connect_error());
171}
172
173// Now we check if the data from the login form was submitted, isset() will check if the data exists.
174if ( !isset($_POST['username'], $_POST['password']) ) {
175 // Could not get the data that should have been sent.
176 die ('Please fill both the username and password field!');
177}
178
179// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
180if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
181 // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
182 $stmt->bind_param('s', $_POST['username']);
183 $stmt->execute();
184 // Store the result so we can check if the account exists in the database.
185 $stmt->store_result();
186}
187
188$stmt->store_result();
189
190if ($stmt->num_rows > 0) {
191 $stmt->bind_result($id, $password);
192 $stmt->fetch();
193 // Account exists, now we verify the password.
194 // Note: remember to use password_hash in your registration file to store the hashed passwords.
195 if (password_verify($_POST['password'], $password)) {
196 // Verification success! User has loggedin!
197 // Create sessions so we know the user is logged in, they basically act like cookies but remember the data on the server.
198 session_regenerate_id();
199 $_SESSION['loggedin'] = TRUE;
200 $_SESSION['name'] = $_POST['username'];
201 $_SESSION['id'] = $id;
202 header('Location: home.php');
203 } else {
204 echo 'Incorrect password!';
205 }
206} else {
207 echo 'Incorrect username!';
208}
209$stmt->close();
210?>
211-----------home.php
212<?php
213// We need to use sessions, so you should always start sessions using the below code.
214session_start();
215// If the user is not logged in redirect to the login page...
216if (!isset($_SESSION['loggedin'])) {
217 header('Location: index.html');
218 exit();
219}
220?>
221<!DOCTYPE html>
222<html>
223 <head>
224 <meta charset="utf-8">
225 <title>Home Page</title>
226 <link href="style.css" rel="stylesheet" type="text/css">
227 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
228 </head>
229 <body class="loggedin">
230 <nav class="navtop">
231 <div>
232 <h1>Website Title</h1>
233 <a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
234 <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
235 </div>
236 </nav>
237 <div class="content">
238 <h2>Home Page</h2>
239 <p>Welcome back, <?=$_SESSION['name']?>!</p>
240 </div>
241 </body>
242</html>
243----------profile.php---------
244<?php
245// We need to use sessions, so you should always start sessions using the below code.
246session_start();
247// If the user is not logged in redirect to the login page...
248if (!isset($_SESSION['loggedin'])) {
249 header('Location: index.html');
250 exit();
251}
252$DATABASE_HOST = 'localhost';
253$DATABASE_USER = 'root';
254$DATABASE_PASS = '';
255$DATABASE_NAME = 'phplogin';
256$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
257if (mysqli_connect_errno()) {
258 die ('Failed to connect to MySQL: ' . mysqli_connect_error());
259}
260// We don't have the password or email info stored in sessions so instead we can get the results from the database.
261$stmt = $con->prepare('SELECT password, email FROM accounts WHERE id = ?');
262// In this case we can use the account ID to get the account info.
263$stmt->bind_param('i', $_SESSION['id']);
264$stmt->execute();
265$stmt->bind_result($password, $email);
266$stmt->fetch();
267$stmt->close();
268?>
269<!DOCTYPE html>
270<html>
271 <head>
272 <meta charset="utf-8">
273 <title>Profile Page</title>
274 <link href="style.css" rel="stylesheet" type="text/css">
275 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
276 </head>
277 <body class="loggedin">
278 <nav class="navtop">
279 <div>
280 <h1>Website Title</h1>
281 <a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
282 <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
283 </div>
284 </nav>
285 <div class="content">
286 <h2>Profile Page</h2>
287 <div>
288 <p>Your account details are below:</p>
289 <table>
290 <tr>
291 <td>Username:</td>
292 <td><?=$_SESSION['name']?></td>
293 </tr>
294 <tr>
295 <td>Password:</td>
296 <td><?=$password?></td>
297 </tr>
298 <tr>
299 <td>Email:</td>
300 <td><?=$email?></td>
301 </tr>
302 </table>
303 </div>
304 </div>
305 </body>
306</html>
307---------logout.php---------
308<?php
309session_start();
310session_destroy();
311// Redirect to the login page:
312header('Location: index.html');
313?>