|
1 | | -# Complete-Login-and-Registration-System-in-PHP-and-MYSQLI |
| 1 | +<p align="center"> |
| 2 | + <img src="_git%20assets/cover.png" width="800" align="center"/> |
| 3 | +</p> |
2 | 4 |
|
3 | | -## Detailed Readme incoming in 2 weeks, if u get stuck at something, stay tuned till then! |
| 5 | +> A complete PHP Login and Registration System with Profile editing & authentication System |
| 6 | +
|
| 7 | +# Table of Contents |
| 8 | + |
| 9 | +* [Installation](#installation) |
| 10 | + * [Requirements](#requirements) |
| 11 | + * [Installation Steps](#installation-steps) |
| 12 | + * [Getting Started](#getting-started) |
| 13 | +* [Features](#Features) |
| 14 | +* [Components](#Components) |
| 15 | + * [Languages](#Languages) |
| 16 | + * [Development Environment](#Development-Environment) |
| 17 | + * [Database](#database) |
| 18 | + * [DBMS](#DBMS) |
| 19 | + * [API](#api) |
| 20 | + * [Frameworks and Libraries](#Frameworks-and-Libraries) |
| 21 | + * [External PLugins](#external-plugins) |
| 22 | +* [Details](#details) |
| 23 | +* [View KLiK, The Complete Project](#klik-social-media-website) |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | +## Installation |
| 28 | + |
| 29 | +#### Requirements |
| 30 | +* PHP |
| 31 | +* Apache server |
| 32 | +* MySQL Database |
| 33 | +* SQL |
| 34 | + |
| 35 | +> All of these requirements can be completed at once by simply installing a server stack like `Wamp` or `Xampp` |
| 36 | +
|
| 37 | +#### Installation Steps |
| 38 | +1. Import the `DBcreation.sql` file in the `includes` folder into phpMyAdmin. There is no need for any change in the .sql file. This will create the database required for the application to function. |
| 39 | + |
| 40 | +2. Edit the `dbh.inc.php` file in the `includes` folder to create the database connection. Change the password and username to the ones being used within `phpMyAdmin`. There is no need to change anything else. |
| 41 | + |
| 42 | +```php |
| 43 | +$serverName = "localhost"; |
| 44 | +$dBUsername = "root"; |
| 45 | +$dBPassword = "examplePassword"; |
| 46 | +$dBName = "loginsystem"; |
| 47 | + |
| 48 | +$conn = mysqli_connect($serverName, $dBUsername, $dBPassword, $dBName, 3307); |
| 49 | + |
| 50 | +if (!$conn) |
| 51 | +{ |
| 52 | + die("Connection failed: ". mysqli_connect_error()); |
| 53 | +} |
| 54 | +``` |
| 55 | +> The port number does not need to be changed under normal circumstances, but if you are running into a problem or the server stack is installed on another port, feel free to change it, but do so carefully. |
| 56 | +
|
| 57 | +3. Edit the `email-server.php` file in the `includes` folder and change the variables accordingly: |
| 58 | + |
| 59 | + * `$SMTPuser` : email address on `gmail` |
| 60 | + * `$SMTPpwd` : email address password |
| 61 | + * `SMTPtitle` : hypothetical company's name |
| 62 | + |
| 63 | +```php |
| 64 | +$SMTPuser = 'klik.official.website@gmail.com'; |
| 65 | +$SMTPpwd = 'some-example-password'; |
| 66 | +$SMTPtitle = "KLiK inc."; |
| 67 | +``` |
| 68 | +> This step is mainly for setting up an email account to enable the `contact` and `password reset system`, all of which require mailing. |
| 69 | +
|
| 70 | +#### Getting started |
| 71 | +The database already contains two pre-made accounts for you to explore around with. If not sufficient, head over to the `signup page` and start making new accounts. |
| 72 | +##### Existing Accounts: |
| 73 | +``` |
| 74 | +username: admin |
| 75 | +password: admin |
| 76 | +``` |
| 77 | +``` |
| 78 | +username: user |
| 79 | +password: user |
| 80 | +``` |
| 81 | + |
| 82 | +> **Note:** The GUI files are in the `root directory`, and the `backend files` are present in the `includes` folder. The main HTML structuring files are the `HTML-head.php` and `HTML-footer.php`, which also reside in the includes folder |
| 83 | +
|
| 84 | +## Features |
| 85 | + |
| 86 | +* [Registration / Signup System](#registration-signup-system) |
| 87 | +* [Login System](#login-system) |
| 88 | +* [Profile System](#profile-system) |
| 89 | +* [Profile Editing System](#profile-editing-system) |
| 90 | +* [Contact System](#contact-system) |
| 91 | + |
| 92 | + |
| 93 | +## Components |
| 94 | + |
| 95 | +#### Languages |
| 96 | +``` |
| 97 | +PHP 5.6.40 |
| 98 | +SQL 14.0 |
| 99 | +HTML5 |
| 100 | +CSS3 |
| 101 | +``` |
| 102 | + |
| 103 | +#### Development Environment |
| 104 | +``` |
| 105 | +WampServer Stack 3.0.6 |
| 106 | +Windows 10 |
| 107 | +``` |
| 108 | + |
| 109 | +#### Database |
| 110 | +``` |
| 111 | +MySQL Database 8.0.13 |
| 112 | +``` |
| 113 | + |
| 114 | +#### DBMS |
| 115 | +``` |
| 116 | +phpMyAdmin 4.8.3 |
| 117 | +``` |
| 118 | + |
| 119 | +#### API |
| 120 | +``` |
| 121 | +MySQLi APIs |
| 122 | +``` |
| 123 | + |
| 124 | +#### Frameworks and Libraries |
| 125 | +``` |
| 126 | +BootStrap v4.2.1 |
| 127 | +``` |
| 128 | + |
| 129 | +#### External Plugins |
| 130 | +``` |
| 131 | +[PHPMailer 6.0.6](https://github.com/PHPMailer/PHPMailer) |
| 132 | +``` |
| 133 | +> This was used for creating a `mail server` on `Windows localhost`, since there is not one like in Linux. This plugin was used for the sending and receiving of emails on localhost, this is not needed on a live domain |
| 134 | +
|
| 135 | +## Details |
| 136 | + |
| 137 | +> Details of important Features of the Application |
| 138 | +
|
| 139 | +### Registration / Signup System |
| 140 | + |
| 141 | +* A `status icon` in the top left corner shows online or logged out status |
| 142 | +* registration is done through the `signup` page. |
| 143 | +* `username` cannot be changed after signing up, since i thought it would be an exploitable weakness |
| 144 | +* `email` required for registration. |
| 145 | +* Password needs to be re-entered for additional confirmation |
| 146 | +* Passwords `encrypted` before being stored in database so even owners donot have access to them |
| 147 | +* User can set a `profile image` at signup. In case they dont, their profile image is set to a default image. |
| 148 | + |
| 149 | +> currently the upload image button does not give a visible response on clicking and uploading an image, but it does work. It is purely a design matter and not a back-end issue |
| 150 | +
|
| 151 | +* There are also additional information fields that are `optional`, i.e; a user can signup without setting them. |
| 152 | +* Optional fields are `gender`, `full name`, `profile headline` and `bio` |
| 153 | +* Implemented several `authentication methods` to verify user info before registering him. |
| 154 | +* Authentication checks for: |
| 155 | + * `empty fields` |
| 156 | + * `invalid username or email` |
| 157 | + * `password mismatch` |
| 158 | + * `wrong profile image error` |
| 159 | + * `SQL errors` |
| 160 | + * `internal server errors` |
| 161 | + |
| 162 | +### Login System |
| 163 | + |
| 164 | +* `username` and `password` required for logging in. |
| 165 | +* Authentication checks to return valid error messages. |
| 166 | +* Authentication checks for: |
| 167 | + * `wrong username` |
| 168 | + * `wrong password` |
| 169 | + |
| 170 | +### Profile System |
| 171 | + |
| 172 | +* Each is assigned a `user profile` on registration. |
| 173 | +* Profile can be accessed through the `menu options` which become visible after logging in or the `link` beneath the profile image on the right. |
| 174 | +* Profile page displays all of the User's information, except (naturally) for the password. |
| 175 | +* Displayed information: |
| 176 | + * `profile image` |
| 177 | + * `username` |
| 178 | + * `full name` |
| 179 | + * `gender` |
| 180 | + * `headline` |
| 181 | + * `bio` |
| 182 | +* Profile page cannot be accessed without logging in. |
| 183 | +* Signup page cannot be page `after logging in`. |
| 184 | + |
| 185 | +### Profile Editing System |
| 186 | + |
| 187 | +* User can edit his profile information with the help of the `profile editing system` |
| 188 | +* Profile Editing page can be accessed from `menu option` or `link` below profile image on the right |
| 189 | +* `username` cannot be changed |
| 190 | +* Profile Editing already has the existing information so user does not have to type everything all over again if he merely wishes to slightly edit current information. |
| 191 | +* Current password required for changing password. |
| 192 | +* Changing password also requires confirmation / re-entering of new password. |
| 193 | +* user profile image can also be changed. |
| 194 | +* Authentication checks for: |
| 195 | + * `empty fields` |
| 196 | + * `invalid information` |
| 197 | + * `wrong current password` |
| 198 | + * `new password mismatch` |
| 199 | + * `image upload errors` |
| 200 | + |
| 201 | +### Contact System |
| 202 | + |
| 203 | +* contact system is accessible with or without logging in |
| 204 | +* uses `PHPMailer` to create an email server with which it sends emails. |
| 205 | +* options for subscribing to newsletter (or basically any additional option for contacting) |
| 206 | +* does not require PHPMailer on live domain (only required on windows localhost) |
| 207 | + |
| 208 | +### Security |
| 209 | + |
| 210 | +* `Password hashing` before storing in database. |
| 211 | +* Filtering of information obtained from `$_GET` and `$_POST` methods to prevent `header injection`. |
| 212 | +* Implementation of `MySQLi Prepared Statements` for **advanced** database security. |
| 213 | + |
| 214 | + **Example:** |
| 215 | +```php |
| 216 | +$sql = "select uidUsers from users where uidUsers=?;"; |
| 217 | + $stmt = mysqli_stmt_init($conn); |
| 218 | + if (!mysqli_stmt_prepare($stmt, $sql)) |
| 219 | + { |
| 220 | + header("Location: ../signup.php?error=sqlerror"); |
| 221 | + exit(); |
| 222 | + } |
| 223 | + else |
| 224 | + { |
| 225 | + mysqli_stmt_bind_param($stmt, "s", $userName); |
| 226 | + mysqli_stmt_execute($stmt); |
| 227 | + mysqli_stmt_store_result($stmt); |
| 228 | + } |
| 229 | +``` |
| 230 | + |
| 231 | +### KLiK - Social Media Website |
| 232 | + |
| 233 | +Check out the complete project for this login system. [KLiK](https://github.com/msaad1999/KLiK-SocialMediaWebsite) is a complete Social Media website, along with a Complete Login/Registration system, Profile system, Chat room, Forum system and Blog/Polls/Event Management System. |
| 234 | + |
| 235 | +> Check out [KLiK here](https://github.com/msaad1999/KLiK-SocialMediaWebsite) |
| 236 | +
|
| 237 | +<p align="center"> |
| 238 | + <img src="_git%20assets/klik.png" width="500" align="center"/> |
| 239 | +</p> |
| 240 | + |
| 241 | +> Do star my projects! :) |
| 242 | +
|
| 243 | +> If you liked my work, please show support by `starring` the repository! It means a lot to me, and is all im asking for. |
0 commit comments