PHP Login using OOP Approach

Getting Started

I've used CDN for Bootstrap v3.3.7 in this tutorial so you need an internet connection for it to work. You can also use the latest version of bootstrap but there's a possibility that some of the design I used has changed. I also used XAMPP to run my PHP script and for the MySQL database. Before you proceed to the tutorial below, open first your XAMPP Control Panel and start the "Apache" and "MySQL".

Creating our Database

First, we are going to create our MySQL database and insert sample data as a sample user credential.

  1. Open phpMyAdmin.
  2. Click databases, create a database and name it as test.
  3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
  1. CREATE TABLE `users` (
  2. `username` varchar(30) NOT NULL,
  3. `password` varchar(30) NOT NULL,
  4. `fname` varchar(100) NOT NULL,
  1. INSERT INTO `users` (`id`, `username`, `password`, `fname`) VALUES
  2. (1, 'neovic', 'devierte', 'Neovic Devierte'),
  3. (2, 'gemalyn', 'cepe', 'Gemalyn Cepe');
database mysql

You can then use the ff credentials to login.
Username: neovic
Password: devierte
Username: gemalyn
Password: cepe

Creating our Connection

Next, we create our connection to our database by using the OOP approach wherein we're gonna create a class for our connection. We're gonna name this file as DbConnection.php.

  1. <?php
  2. class DbConnection{
  3.  
  4. private $host = 'localhost';
  5. private $username = 'root';
  6. private $password = '';
  7. private $database = 'test';
  8.  
  9. protected $connection;
  10.  
  11. public function __construct(){
  12.  
  13. if (!isset($this->connection)) {
  14.  
  15. $this->connection = new mysqli($this->host, $this->username, $this->password, $this->database);
  16.  
  17. if (!$this->connection) {
  18. echo 'Cannot connect to database server';
  19. }
  20. }
  21.  
  22. return $this->connection;
  23. }
  24. }
  25. ?>

Creating User Actions

Next, we're going to create a class that involves our users table. We name this as User.php.

  1. <?php
  2. include_once('DbConnection.php');
  3.  
  4. class User extends DbConnection{
  5.  
  6. public function __construct(){
  7.  
  8. parent::__construct();
  9. }
  10.  
  11. public function check_login($username, $password){
  12.  
  13. $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
  14. $query = $this->connection->query($sql);
  15.  
  16. if($query->num_rows > 0){
  17. $row = $query->fetch_array();
  18. return $row['id'];
  19. }
  20. else{
  21. return false;
  22. }
  23. }
  24.  
  25. public function details($sql){
  26.  
  27. $query = $this->connection->query($sql);
  28.  
  29. $row = $query->fetch_array();
  30.  
  31. return $row;
  32. }
  33.  
  34. public function escape_string($value){
  35.  
  36. return $this->connection->real_escape_string($value);
  37. }
  38. }

index.php

This is our index that contains our login form.

  1. <?php
  2. //start session
  3.  
  4. //redirect if logged in
  5. if(isset($_SESSION['user'])){
  6. header('location:home.php');
  7. }
  8. ?>
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>PHP Login using OOP Approach</title>
  13. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  14. </head>
  15. <body>
  16. <div class="container">
  17. <h1 class="page-header text-center">PHP Login using OOP Approach</h1>
  18. <div class="row">
  19. <div class="col-md-4 col-md-offset-4">
  20. <div class="login-panel panel panel-primary">
  21. <div class="panel-heading">
  22. <h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login
  23. </h3>
  24. </div>
  25. <div class="panel-body">
  26. <form method="POST" action="login.php">
  27. <fieldset>
  28. <div class="form-group">
  29. <input class="form-control" placeholder="Username" type="text" name="username" autofocus required>
  30. </div>
  31. <div class="form-group">
  32. <input class="form-control" placeholder="Password" type="password" name="password" required>
  33. </div>
  34. <button type="submit" name="login" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-log-in"></span> Login</button>
  35. </fieldset>
  36. </form>
  37. </div>
  38. </div>
  39. <?php
  40. if(isset($_SESSION['message'])){
  41. ?>
  42. <div class="alert alert-info text-center">
  43. <?php echo $_SESSION['message']; ?>
  44. </div>
  45. <?php
  46.  
  47. unset($_SESSION['message']);
  48. }
  49. ?>
  50. </div>
  51. </div>
  52. </div>
  53. </body>
  54. </html>

login.php

This is our PHP code that validates user credentials.

  1. <?php
  2. //start session
  3.  
  4. include_once('User.php');
  5.  
  6. $user = new User();
  7.  
  8. if(isset($_POST['login'])){
  9. $username = $user->escape_string($_POST['username']);
  10. $password = $user->escape_string($_POST['password']);
  11.  
  12. $auth = $user->check_login($username, $password);
  13.  
  14. if(!$auth){
  15. $_SESSION['message'] = 'Invalid username or password';
  16. header('location:index.php');
  17. }
  18. else{
  19. $_SESSION['user'] = $auth;
  20. header('location:home.php');
  21. }
  22. }
  23. else{
  24. $_SESSION['message'] = 'You need to login first';
  25. header('location:index.php');
  26. }
  27. ?>

home.php

This is our goto page after a successful login.

  1. <?php
  2. //return to login if not logged in
  3. if (!isset($_SESSION['user']) ||(trim ($_SESSION['user']) == '')){
  4. header('location:index.php');
  5. }
  6.  
  7. include_once('User.php');
  8.  
  9. $user = new User();
  10.  
  11. //fetch user data
  12. $sql = "SELECT * FROM users WHERE id = '".$_SESSION['user']."'";
  13. $row = $user->details($sql);
  14.  
  15. ?>
  16. <!DOCTYPE html>
  17. <html>
  18. <head>
  19. <title>PHP Login using OOP Approach</title>
  20. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  21. </head>
  22. <body>
  23. <div class="container">
  24. <h1 class="page-header text-center">PHP Login using OOP Approach</h1>
  25. <div class="row">
  26. <div class="col-md-4 col-md-offset-4">
  27. <h2>Welcome to Homepage </h2>
  28. <h4>User Info: </h4>
  29. <p>Name: <?php echo $row['fname']; ?></p>
  30. <p>Username: <?php echo $row['username']; ?></p>
  31. <p>Password: <?php echo $row['password']; ?></p>
  32. <a href="logout.php" class="btn btn-danger"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
  33. </div>
  34. </div>
  35. </div>
  36. </body>
  37. </html>

logout.php

Lastly, this contains our PHP code that destroys our user session.

  1. <?php
  2.  
  3. header('location:index.php');
  4. ?>

That ends this tutorial. Happy Coding :)

Comments

Submitted byØystein Buvik (not verified)on Sun, 09/01/2019 - 21:28

Shouldn`t the auto_increment be placed on id instead of username?

Add new comment