Download Code: PHP and SQLite3 Simple Forum Website Source

Projects Inventory

7 months ago

Download Code PHP and SQLite3 Simple Forum Website Source

Simple Forum Website Project

This project is a Simple Forum Website, designed as a web-based application for small organizations to discuss various topics. Only verified and approved users can access the platform. It is developed using PHP and SQLite3 Database and features a clean, user-friendly interface with Bootstrap v5 for styling.

Overview of the Simple Forum Website

The platform is designed for organizations, requiring users to register for accounts. Approval is necessary for users to gain access. The system has two user roles:

Administrator
User

Administrator Features

Manage system users.
Approve or deny user registrations.
Block or change user roles between Administrator and User.

User Features

Browse and view published topics.
Create, manage, and delete their own topics.
Leave comments on topics and manage their comments.

Features and Functionalities

Administrator Functions

Login and Logout.
View and manage all site users.
Update user statuses (Pending, Approved, Denied, Blocked).
Assign or change user roles.
Change admin password.

User Functions

Register and log in to the system.
View all published topics.
Read topic details and comments.
Add and manage comments.
Create, update, and delete their own topics.
Filter topics by date.
Change user password.

Technologies Used

The project utilizes the following technologies:

XAMPP as the local web server.
PHP as the server-side language.
SQLite3 as the database.
Bootstrap for design and layout.
JavaScript, jQuery, and Ajax for interactivity.
HTML and CSS for the front-end structure and styling.

How to Run the Project

Requirements

Install a local web server like XAMPP or WAMP.
Download the source code.

Setup Instructions

Enable the SQLite3 extension in your PHP settings (php.ini) and save changes.
Start the Apache server in your local web server’s control panel.
Extract the downloaded project folder.
Place the extracted folder in the htdocs directory (for XAMPP) or the www directory (for WAMP).
Open the website in your browser (e.g., http://localhost/php-sqlite-forum/).

Default Admin Credentials

Username: admin
Password: sourcecodester&123

index PHP

<?php 
require_once('auth.php');
require_once('DBConnection.php');
$page = $_GET['page'] ?? 'home';
$title = ucwords(str_replace("_", " ", $page));
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= ucwords($title) ?> | Simple Forum Site</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/custom.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
</head>
<body>
    <main>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient fixed-top mb-5" id="topNavBar">
        <div class="container">
            <a class="navbar-brand" href="./">
            Simple Forum Site
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <?php if($_SESSION['type'] == 1): ?>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a>
                    </li>
                    <?php else: ?>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'topic')? 'active' : '' ?>" aria-current="page" href="./?page=topic">My Created Topics</a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle bg-transparent  text-light border-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Hello <?php echo $_SESSION['fullname'] ?>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="./?page=update_account">Change Password</a></li>
                    <li><a class="dropdown-item" href="./LoginRegistration.php?a=logout">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-md pt-5 pb-3" id="page-container">
        <div class="my-4">
            <?php if(isset($_SESSION['message']['success'])): ?>
                <div class="alert alert-success py-3 rounded-0">
                    <?= $_SESSION['message']['success'] ?>
                </div>
                <?php unset($_SESSION['message']['success']) ?>
            <?php endif; ?>
            <?php if(isset($_SESSION['message']['error'])): ?>
                <div class="alert alert-danger py-3 rounded-0">
                    <?= $_SESSION['message']['error'] ?>
                </div>
                <?php unset($_SESSION['message']['error']) ?>
            <?php endif; ?>
            <?php include($page.".php");  ?>
        </div>
    </div>
    <footer class="position-fixed bottom-0 w-100 bg-gradient bg-light">
        <div class="lh-1 container py-4">
            <div class="text-center">All rights reserved &copy; <?= date("Y") ?> - Simple Forum Site(php)</div>
            <div class="text-center">Developed by:<a href="mailto:oretnom23@gmail.com" class='text-body-tertiary'>oretnom23</a></div>
        </div>
    </footer>

    <div class="modal fade" id="expenseModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0">
            <div class="modal-content">
            <div class="modal-header rounded-0">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body rounded-0">
                <div class="container-fluid">
                    <form action="" id="expense-form">
                        <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['expense-form'] ?>">
                        <input type="hidden" name="expense_id" value="">
                        <div class="mb-3">
                            <label for="name">Name</label>
                            <input type="text" class="form-control rounded-0" id="name" name="name" required="required">
                        </div>
                        <div class="mb-3">
                            <label for="amount">Amount</label>
                            <input type="number" step="any" min="0" class="form-control rounded-0 text-end" id="amount" name="amount" required="required" value="0">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary rounded-0" form="expense-form">Save</button>
                <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="earningModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0">
            <div class="modal-content">
            <div class="modal-header rounded-0">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body rounded-0">
                <div class="container-fluid">
                    <form action="" id="earning-form">
                        <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['earning-form'] ?>">
                        <input type="hidden" name="earning_id" value="">
                        <div class="mb-3">
                            <label for="name">Name</label>
                            <input type="text" class="form-control rounded-0" id="name" name="name" required="required">
                        </div>
                        <div class="mb-3">
                            <label for="amount">Amount</label>
                            <input type="number" step="any" min="0" class="form-control rounded-0 text-end" id="amount" name="amount" required="required" value="0">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary rounded-0" form="earning-form">Save</button>
                <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $('#expense-form').submit(function(e){
                e.preventDefault();
                $('.pop_msg').remove()
                var _this = $(this)
                var _el = $('<div>')
                    _el.addClass('pop_msg')
                start_loader()
                $.ajax({
                    url:'./Master.php?a=save_expense',
                    method:'POST',
                    data:$(this).serialize(),
                    dataType:'JSON',
                    error:err=>{
                        console.log(err)
                        _el.addClass('alert alert-danger')
                        _el.text("An error occurred.")
                        _this.prepend(_el)
                        _el.show('slow')
                    },
                    success:function(resp){
                        if(resp.status == 'success'){
                            _el.addClass('alert alert-success')
                            location.reload();
                        }else{
                            _el.addClass('alert alert-danger')
                        }
                        _el.text(resp.msg)
                        _el.hide()
                        _this.prepend(_el)
                        _el.show('slow')
                        end_loader()
                    }
                })
            })
            $('#earning-form').submit(function(e){
                e.preventDefault();
                $('.pop_msg').remove()
                var _this = $(this)
                var _el = $('<div>')
                    _el.addClass('pop_msg')
                start_loader()
                $.ajax({
                    url:'./Master.php?a=save_earning',
                    method:'POST',
                    data:$(this).serialize(),
                    dataType:'JSON',
                    error:err=>{
                        console.log(err)
                        _el.addClass('alert alert-danger')
                        _el.text("An error occurred.")
                        _this.prepend(_el)
                        _el.show('slow')
                    },
                    success:function(resp){
                        if(resp.status == 'success'){
                            _el.addClass('alert alert-success')
                            location.reload();
                        }else{
                            _el.addClass('alert alert-danger')
                        }
                        _el.text(resp.msg)
                        _el.hide()
                        _this.prepend(_el)
                        _el.show('slow')
                        end_loader()
                    }
                })
            })
        })
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

<?php

require_once('auth.php');

require_once('DBConnection.php');

$page = $_GET['page'] ?? 'home';

$title = ucwords(str_replace("_", " ", $page));

<!DOCTYPE html>

<head>

<title><?= ucwords($title) ?> | Simple Forum Site</title>

</head>

<body>

<main>

Simple Forum Site

</a>

</button>

<?php if($_SESSION['type'] == 1): ?>

<a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>

</li>

<a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a>

</li>

<?php else: ?>

<a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>

</li>

<a class="nav-link <?php echo ($page == 'topic')? 'active' : '' ?>" aria-current="page" href="./?page=topic">My Created Topics</a>

</li>

<?php endif; ?>

</ul>

</div>

Hello <?php echo $_SESSION['fullname'] ?>

</button>

<li><a class="dropdown-item" href="./?page=update_account">Change Password</a></li>

<li><a class="dropdown-item" href="./LoginRegistration.php?a=logout">Logout</a></li>

</ul>

</div>

</nav>

<?php if(isset($_SESSION['message']['success'])): ?>

<?= $_SESSION['message']['success'] ?>

</div>

<?php unset($_SESSION['message']['success']) ?>

<?php endif; ?>

<?php if(isset($_SESSION['message']['error'])): ?>

<?= $_SESSION['message']['error'] ?>

</div>

<?php unset($_SESSION['message']['error']) ?>

<?php endif; ?>

<?php include($page.".php"); ?>

</div>

<div class="text-center">Developed by:<a href="mailto:oretnom23@gmail.com" class='text-body-tertiary'>oretnom23</a></div>

</div>

</footer>

</div>

</div>

<label for="amount">Amount</label>

</div>

</form>

</div>

<button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>

</div>

</div>

</div>

<label for="amount">Amount</label>

</div>

</form>

</div>

<button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>

</div>

$(function(){

$('#expense-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

start_loader()

$.ajax({

url:'./Master.php?a=save_expense',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

location.reload();

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

end_loader()

}

})

$('#earning-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

start_loader()

$.ajax({

url:'./Master.php?a=save_earning',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

location.reload();

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

end_loader()

}

})

</script>

</body>

</html>

login PHP

<?php
//require/load the authentication file script
require_once('auth.php');
require_once('DBConnection.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'home';
// Generate Login Form Token
$_SESSION['formToken']['login'] = password_hash(uniqid(),PASSWORD_DEFAULT);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGIN | Simple Forum Site</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/custom.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
</head>
<body class="bg-dark bg-gradient">
   <div class="h-100 d-flex jsutify-content-center align-items-center">
       <div class='w-100'>
        <h3 class="py-5 text-center text-light">Simple Forum Site</h3>
        <div class="card my-3 col-md-4 offset-md-4">
            <div class="card-body">
                <!-- Login Form Wrapper -->
                <form action="" id="login-form">
                    <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['login'] ?>">
                    <center><small>Please enter your credentials.</small></center>
                    <div class="mb-3">
                        <label for="username" class="control-label">Username</label>
                        <input type="text" id="username" autofocus name="username" class="form-control rounded-0" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="control-label">Password</label>
                        <input type="password" id="password" name="password" class="form-control rounded-0" required>
                    </div>
                    <div class="mb-3 d-flex w-100 justify-content-between  align-items-end">
                        <a href="registration.php">Does not have an Account? Signup Here</a>
                        <button class="btn btn-sm btn-primary rounded-0 my-1">Login</button>
                    </div>
                </form>
                <!-- Login Form Wrapper -->
            </div>
        </div>
       </div>
   </div>
</body>
<script>
    $(function(){
        $('#login-form').submit(function(e){
            e.preventDefault();
            $('.pop_msg').remove()
            var _this = $(this)
            var _el = $('<div>')
                _el.addClass('pop_msg')
            _this.find('button').attr('disabled',true)
            _this.find('button[type="submit"]').text('Loging in...')
            $.ajax({
                url:'./LoginRegistration.php?a=login',
                method:'POST',
                data:$(this).serialize(),
                dataType:'JSON',
                error:err=>{
                    console.log(err)
                    _el.addClass('alert alert-danger')
                    _el.text("An error occurred.")
                    _this.prepend(_el)
                    _el.show('slow')
                    _this.find('button').attr('disabled',false)
                    _this.find('button[type="submit"]').text('Save')
                },
                success:function(resp){
                    if(resp.status == 'success'){
                        _el.addClass('alert alert-success')
                        setTimeout(() => {
                            location.replace('./');
                        }, 2000);
                    }else{
                        _el.addClass('alert alert-danger')
                    }
                    _el.text(resp.msg)

                    _el.hide()
                    _this.prepend(_el)
                    _el.show('slow')
                    _this.find('button').attr('disabled',false)
                    _this.find('button[type="submit"]').text('Save')
                }
            })
        })
    })
</script>
</html>

<?php

//require/load the authentication file script

require_once('auth.php');

require_once('DBConnection.php');

$page = isset($_GET['page']) ? $_GET['page'] : 'home';

// Generate Login Form Token

$_SESSION['formToken']['login'] = password_hash(uniqid(),PASSWORD_DEFAULT);

<!DOCTYPE html>

<head>

<title>LOGIN | Simple Forum Site</title>

</head>

<h3 class="py-5 text-center text-light">Simple Forum Site</h3>

<center><small>Please enter your credentials.</small></center>

<label for="username" class="control-label">Username</label>

</div>

<label for="password" class="control-label">Password</label>

</div>

<a href="registration.php">Does not have an Account? Signup Here</a>

<button class="btn btn-sm btn-primary rounded-0 my-1">Login</button>

</div>

</form>

</div>

</body>

$(function(){

$('#login-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

_this.find('button').attr('disabled',true)

_this.find('button[type="submit"]').text('Loging in...')

$.ajax({

url:'./LoginRegistration.php?a=login',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

_this.find('button').attr('disabled',false)

_this.find('button[type="submit"]').text('Save')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

setTimeout(() => {

location.replace('./');

}, 2000);

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

_this.find('button').attr('disabled',false)

_this.find('button[type="submit"]').text('Save')

}

})

</script>

</html>