Scribd
Upload
18 views22 pages

P01 Getting Started and Creating The Authentication System

Using PHP clean-blog

Uploaded by

2103259
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views22 pages

P01 Getting Started and Creating The Authentication System

Using PHP clean-blog

Uploaded by

2103259
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<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"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<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>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="posts/create.html">Create</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="auth/login.html">login</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="auth/register.html">register</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="contact.html">contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<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>
<!-- Main Content-->
<div class="container px-4 px-lg-5">

footer.php
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container 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">
<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>
<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-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<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-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright &copy; Your
Website 2022</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
<!-- Core theme JS-->
<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">
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" name="email" id="form2Example1" class="form-control"
placeholder="Email" />
</div>

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


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

<!-- Password input -->


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

<!-- Submit button -->


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

<!-- Register buttons -->


<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 require "../includes/header.php"; ?>
<?php require "../config/config.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(isset($_POST['submit'])) {
if($_POST['email'] == '' OR $_POST['password'] == '') {
echo "one input or more are empty";
}
else {
$email = $_POST['email'];
$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">


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

<!-- Password input -->


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

<!-- Submit button -->


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

<!-- Register buttons -->


<div class="text-center">
<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>
<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" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<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"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<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>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="posts/create.html">Create</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="auth/login.html">login</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="auth/register.html">register</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="contact.html">contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<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>
<!-- Main Content-->
<div class="container px-4 px-lg-5">

5.2 Edit login.php


<?php require "../includes/header.php"; ?>
<?php require "../config/config.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(isset($_POST['submit'])) {
if($_POST['email'] == '' OR $_POST['password'] == '') {
echo "one input or more are empty";
}
else {
$email = $_POST['email'];
$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'])) {
$_SESSION['username'] = $row['username'];
header("location: ../index.php");
}
}
}
}
?>

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


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

<!-- Password input -->


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

<!-- Submit button -->


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

<!-- Register buttons -->


<div class="text-center">
<p>a new member? Create an acount<a href="register.php">Register</a></p>
</div>
</form>

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

5.3 Edit index.php


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

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


<div class="col-md-10 col-lg-8 col-xl-7">
<?php echo 'Hello, ' . $_SESSION['username']; ?>
<!-- Post preview-->
<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>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<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>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on September 18, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<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>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on August 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<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>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on July 8, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->

</div>
</div>

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

5.4 Edit header.php


<?php session_start(); ?>

<!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" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<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"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="http://localhost/clean-blog/css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<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>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="posts/create.html">Create</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="auth/login.html">login</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="auth/register.html">register</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4"
href="contact.html">contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image:
url('http://localhost/clean-blog/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>
<!-- Main Content-->
<div class="container px-4 px-lg-5">

5.5 Edit footer.php


</div>
<!-- Footer-->
<footer class="border-top">
<div class="container 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">
<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>
<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-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<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-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright &copy; Your
Website 2022</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
<!-- Core theme JS-->
<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
<?php session_start(); ?>

<!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" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<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"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="http://localhost/clean-blog/css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<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="../clean-
blog/index.php">Home</a></li>
<?php if(isset($_SESSION['username'])) : ?>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="../clean-
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 : ?>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="../clean-
blog/auth/login.php">login</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="../clean-
blog/auth/register.php">register</a></li>
<?php endif; ?>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="../clean-
blog/contact.php">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image:
url('http://localhost/clean-blog/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>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
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 require "../includes/header.php"; ?>
<?php require "../config/config.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(isset($_SESSION['username'])) {
header("location: http://localhost/clean-blog/index.php");
}

if(isset($_POST['submit'])) {
if($_POST['email'] == '' OR $_POST['password'] == '') {
echo "one input or more are empty";
}
else {
$email = $_POST['email'];
$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'])) {
$_SESSION['username'] = $row['username'];
header("location: ../index.php");
}
}
}
}
?>

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


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

<!-- Password input -->


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

<!-- Submit button -->


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

<!-- Register buttons -->


<div class="text-center">
<p>a new member? Create an acount<a href="register.php">Register</a></p>
</div>
</form>

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


6.3.2 Edit register.php
register.php
<?php require "../includes/header.php"; ?>
<?php require "../config/config.php"; ?>

<?php
if(isset($_SESSION['username'])) {
header("location: http://localhost/clean-blog/index.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">
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" name="email" id="form2Example1" class="form-control"
placeholder="Email" />
</div>

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


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

<!-- Password input -->


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

<!-- Submit button -->


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

<!-- Register buttons -->


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

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

You might also like