P01 Getting Started and Creating The Authentication System

Practical 1
Getting Started and Creating the

Authentication System
1 The design of Clean Blog
1.1 Home
1.2 Create
1.3 Login
1.4 Register
1.5 Contact
2 Setting up the Config File
2.1 Open clean-blog folder in VS Code
2.2 Create config folder
2.3 Create config.php
config.php
<?php
try {
//host
$host = "localhost";
//dbname
$dbname = "cleanblog";
//user
$user = "root";
//pass
$pass = "";
$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo $e->getMessage();
}
?>
2.4 Create cleanblog database
3 Register Page
3.1 Create includes folder
3.2 Create header.php and footer.php
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"

<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-
label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="index.html">Home</a></li>
href="posts/create.html">Create</a></li>
href="auth/login.html">login</a></li>
href="auth/register.html">register</a></li>
href="contact.html">contact</a></li>
</ul>
</div>
</div>
</nav>

<header class="masthead" style="background-image: url('../assets/img/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>

footer.php
</div>

<footer class="border-top">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<a href="#!">
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<a href="#!">
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your
Website 2022</div>
</div>
</div>
</div>
</footer>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>

<script src="../js/scripts.js"></script>
</body>
</html>
3.3 Edit register.html

register.php
<?php require "../includes/header.php"; ?>
<?php require "../config/config.php"; ?>
<?php
if(isset($_POST['submit'])) {
if($_POST['email'] == '' OR $_POST['username'] == '' OR $_POST['password'] == '') {

echo "type something in the inputs";
}
else{
$email = $_POST['email'];
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$insert = $conn->prepare("INSERT INTO users (email, username, mypassword) VALUES

(:email, :username, :mypassword)");
$insert->execute([
':email' => $email,
':username' => $username,
':mypassword' => $password
]);
header("location: login.php");
}
}
?>
<form method="POST" action="register.php">

<div class="form-outline mb-4">
<input type="email" name="email" id="form2Example1" class="form-control"
placeholder="Email" />
</div>

<input type="" name="username" id="form2Example1" class="form-control"
placeholder="Username" />
</div>


<input type="password" name="password" id="form2Example2"
placeholder="Password" class="form-control" />
</div>


<button type="submit" name="submit" class="btn btn-primary mb-4 text-
center">Register</button>


<div class="text-center">
<p>Aleardy a member? <a href="login.php">Login</a></p>
</div>
</form>
<?php include "../includes/footer.php"; ?>

3.4 Create users table
4 Login Page
4.1 Edit login.html

login.php
<?php
//check for the submit
//take the data
//write our query
//execute and then fetch
//do our rowCount
//to do our password_verify + redirect to the index page
if($_POST['email'] == '' OR $_POST['password'] == '') {
echo "one input or more are empty";
}
else {
$password = $_POST['password'];
$login = $conn->query("SELECT * FROM users WHERE email = '$email'");
$login->execute();
$row = $login->FETCH(PDO::FETCH_ASSOC);
echo $login->rowCount();
if($login->rowCount() > 0) {
if(password_verify($password, $row['mypassword'])) {
echo "logged in";
header("location: ../index.html");
}
}
}
}
?>
<form method="POST" action="login.php">

</div>

<input type="password" name="password" id="form2Example2" placeholder="Password"
class="form-control" />
</div>

center">Login</button>

<p>a new member? Create an acount<a href="register.php">Register</a></p>
</div>
</form>
<?php require "../includes/footer.php"; ?>
5 Login and Start Session
5.1 Edit header.php

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>

Menu
</button>
</ul>
</div>
</div>
</nav>

<header class="masthead" style="background-image: url('../assets/img/home-bg.jpg')">
<h1>Clean Blog</h1>
</div>
</div>
</div>
</div>
</header>
5.2 Edit login.php

<?php
//take the data
//write our query
//do our rowCount
}
else {
$login->execute();
$_SESSION['username'] = $row['username'];
header("location: ../index.php");
}
}
}
}
?>

</div>

</div>


</div>
</form>
5.3 Edit index.php

<?php require "includes/header.php"; ?>

<?php echo 'Hello, ' . $_SESSION['username']; ?>

<div class="post-preview">
<a href="posts/post.html">
<h2 class="post-title">Man must explore, and this is
exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150
miles up</h3>
</a>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on September 24, 2022
</p>
</div>

<hr class="my-4" />
<a href="post.html"><h2 class="post-title">I believe every human
has a finite number of heartbeats. I don't intend to waste any of mine.</h2></a>
Posted by
on September 18, 2022
</p>
</div>

<hr class="my-4" />
<a href="post.html">
<h2 class="post-title">Science has not yet mastered
prophecy</h2>
<h3 class="post-subtitle">We predict too much for the next
year and yet far too little for the next ten.</h3>
</a>
Posted by
on August 24, 2022
</p>
</div>

<hr class="my-4" />
<a href="post.html">
<h2 class="post-title">Failure is not an option</h2>
<h3 class="post-subtitle">Many say exploration is part of our
destiny, but it’s actually our duty to future generations.</h3>
</a>
Posted by
on July 8, 2022
</p>
</div>

<hr class="my-4" />

</div>
</div>
<?php require "includes/footer.php"; ?>
5.4 Edit header.php

<!DOCTYPE html>
<html lang="en">
<head>
/>
<link href="http://localhost/clean-blog/css/styles.css" rel="stylesheet" />
</head>
<body>

Menu
</button>
</ul>
</div>
</div>
</nav>

<header class="masthead" style="background-image:
url('http://localhost/clean-blog/assets/img/home-bg.jpg')">
<h1>Clean Blog</h1>
</div>
</div>
</div>
</div>
</header>
5.5 Edit footer.php

</div>

<footer class="border-top">
<ul class="list-inline text-center">
<a href="#!">
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<a href="#!">
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<a href="#!">
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your
Website 2022</div>
</div>
</div>
</div>
</footer>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>

<script src="http://localhost/clean-blog/js/scripts.js"></script>
</body>
</html>
6 Logout and End Session
6.1 Edit header.php
6.1.1 Change navbar

https://getbootstrap.com/docs/5.0/components/navbar/
6.1.2 Change link

header.php
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link href="http://localhost/clean-blog/css/styles.css" rel="stylesheet" />
</head>
<body>

Menu
</button>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="../clean-
blog/index.php">Home</a></li>
<?php if(isset($_SESSION['username'])) : ?>
blog/posts/create.php">create</a></li>
<li class="nav-item dropdown mt-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<?php echo $_SESSION['username']; ?>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item"
href="../clean-blog/auth/logout.php">logout</a></li>
</ul>
</li>
<?php else : ?>
blog/auth/login.php">login</a></li>
blog/auth/register.php">register</a></li>
<?php endif; ?>
blog/contact.php">Contact</a></li>
</ul>
</div>
</div>
</nav>

<header class="masthead" style="background-image:
url('http://localhost/clean-blog/assets/img/home-bg.jpg')">
<h1>Clean Blog</h1>
</div>
</div>
</div>
</div>
</header>
6.1.3 Change file type
6.2 Create logout.php

logout.php
<?php
session_start();
session_unset();
session_destroy();
header("location: http://localhost/clean-blog/index.php");
?>
6.3 Preventing Unauthorized Access
6.3.1 Edit login.php

login.php
<?php
//take the data
//write our query
//do our rowCount
if(isset($_SESSION['username'])) {
}
}
else {
$login->execute();
$_SESSION['username'] = $row['username'];
header("location: ../index.php");
}
}
}
}
?>

</div>

</div>


</div>
</form>

6.3.2 Edit register.php
register.php
<?php
if(isset($_SESSION['username'])) {
}
if($_POST['email'] == '' OR $_POST['username'] == '' OR $_POST['password'] == '') {

echo "type something in the inputs";
}
else{
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$insert = $conn->prepare("INSERT INTO users (email, username, mypassword) VALUES

(:email, :username, :mypassword)");
$insert->execute([
':email' => $email,
':username' => $username,
':mypassword' => $password
]);
header("location: login.php");
}
}
?>
<form method="POST" action="register.php">
</div>

<input type="" name="username" id="form2Example1" class="form-control"
placeholder="Username" />
</div>

<input type="password" name="password" id="form2Example2"
placeholder="Password" class="form-control" />
</div>

center">Register</button>

<p>Aleardy a member? <a href="login.php">Login</a></p>
</div>
</form>
<?php include "../includes/footer.php"; ?>

P01 Getting Started and Creating The Authentication System

Uploaded by

Copyright:

Available Formats

P01 Getting Started and Creating The Authentication System

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

P01 Getting Started and Creating The Authentication System

Uploaded by

Copyright:

Available Formats

Practical 1

Getting Started and Creating the

2.1 Open clean-blog folder in VS Code

2.2 Create config folder

2.3 Create config.php

$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

3.1 Create includes folder

3.2 Create header.php and footer.php

3.3 Edit register.html

if($_POST['email'] == '' OR $_POST['username'] == '' OR $_POST['password'] == '') {

$insert = $conn->prepare("INSERT INTO users (email, username, mypassword) VALUES

<div class="form-outline mb-4">

<?php include "../includes/footer.php"; ?>

4.1 Edit login.html

//take the data

//write our query

//execute and then fetch

//do our rowCount

//to do our password_verify + redirect to the index page

$login = $conn->query("SELECT * FROM users WHERE email = '$email'");

<form method="POST" action="login.php">

<?php require "../includes/footer.php"; ?>

5 Login and Start Session

5.1 Edit header.php

5.2 Edit login.php

//take the data

//write our query

//execute and then fetch

//do our rowCount

//to do our password_verify + redirect to the index page

$login = $conn->query("SELECT * FROM users WHERE email = '$email'");

<form method="POST" action="login.php">

<?php require "../includes/footer.php"; ?>

5.3 Edit index.php

<div class="row gx-4 gx-lg-5 justify-content-center">

<?php require "includes/footer.php"; ?>

5.4 Edit header.php

5.5 Edit footer.php

6 Logout and End Session

6.1 Edit header.php

6.1.1 Change navbar

6.1.2 Change link

6.2 Create logout.php

6.3 Preventing Unauthorized Access

6.3.1 Edit login.php

//take the data

//write our query

//execute and then fetch

//do our rowCount

//to do our password_verify + redirect to the index page