Index Page (Logged Out)

Index and Header Code

<h6><?php require_once("../includes/session.php"); ?>
<?php require_once("../includes/connect.php"); ?>
<?php include_once("../includes/templates/header.php"); ?></h6>
<h6><div class="container">
<div class="jumbotron">

<h1>Welcome to BUSingles <div id="bigredheart">♥</div></h1>
<p>BUSingles is a website dedicated to bringing student at bournemouth university together.</p>
<?php if(isset($_SESSION["username"])) { ?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators --></h6>
<h6><!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/liamquote.jpg" alt="Chania">
<h6><div class="item">
<img src="images/dom.jpg" alt="Chania">
<h6><div class="item">
<img src="images/callumquote.jpg" alt="Flower">
<h6><div class="item">
<img src="images/watsonquote.jpg" alt="Flower">

<h6><!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<?php } ?>

<?php if(!isset($_SESSION["username"])) { ?>

<div class="jumbotron">
<h1><a id="jumpto">Sign Up...</a></h1>
<p>Please fill in the information below to sign up to BUSingles.</p></h6>
<h6><?php if(isset($_SESSION["username"])) { ?>
<?php //include_once("../includes/templates/homepage-loggedin.php"); ?>
<?php } else { ?>
<?php //include_once("../includes/templates/homepage.php"); ?>
<?php } ?>

<!-- Example row of columns -->
<div class="row">
<div class="sign-up-box">
<div class="col-md-6">
<form action="register.php" method="post">
<p>First Name:</p> <input placeholder="Your First Name" type="text" style="width:300px; height:40px; font-size:20px;" required name="firstname" value=""><br>
<p>Last Name:</p> <input placeholder="Your Last Name" type="text" style="width:300px; height:40px; font-size:20px;" required name="lastname" value=""><br>
<p>Username:</p> <input placeholder="Your Username"type="text" style="width:300px; height:40px; font-size:20px;" required name="username" value=""><br>
<p>Password:</p> <input placeholder="Your Password" type="password" style="width:300px; height:40px; font-size:20px;" required name="password1" value=""><br>
<p>Retype Password:</p> <input placeholder="Retype Password"type="password" style="width:300px; height:40px; font-size:20px;" required name="password2" value=""><br>

<div class="col-md-6">
<p>Select Your Age:
<select required name="age">
<option value="">Select...</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option></select></p><br>
<p>Select Your Gender:
<select required name="gender">
<option value="">Select...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<p>Select Your University Course
<select required name="uni">
<option value="">Select...</option>
<option value="Accounting and Taxation BA (Hons)">Accounting and Taxation BA (Hons)</option>
<option value="Adult Nursing BSc (Hons) ">Adult Nursing BSc (Hons) </option>
<option value="Advertising BA (Hons)">Advertising BA (Hons)</option>
<option value="Anthropology BSc (Hons)">Anthropology BSc (Hons)</option>
<option value="Archaeology BSc (Hons)">Archaeology BSc (Hons) </option>
<option value="Biological Sciences BSc (Hons)">Biological Sciences BSc (Hons) </option>
<option value="Business Studies with Economics BA (Hons)">Business Studies with Economics BA (Hons)</option>
<option value="Business Studies with Marketing BA (Hons)">Business Studies with Marketing BA (Hons) </option>
<option value="Communication and Media BA (Hons)">Communication and Media BA (Hons)</option>
<option value="Computer Animation Arts BA (Hons">Computer Animation Arts BA (Hons)</option>
<option value="Computer Visualisation and Animation BA (Hons)">Computer Visualisation and Animation BA (Hons)</option>
<option value="Computing BSc (Hons)">Computing BSc (Hons) </option>
<option value="Digital Media Design BA (Hons)">Digital Media Design BA (Hons)</option>
<option value="Economics BA (Hons) ">Economics BA (Hons)</option>
<option value="English BA (Hons) ">English BA (Hons) </option>
<option value="Film Production and Cinematography BA (Hons)">Film Production and Cinematography BA (Hons) </option>
<option value="Finance and Business BA (Hons)">Finance and Business BA (Hons)</option>
<option value="Forensic Investigation BSc (Hons)">Forensic Investigation BSc (Hons)</option>
<option value="Games Technology BSc (Hons)">Games Technology BSc (Hons)</option>
<option value="History BA (Hons) ">History BA (Hons) </option>
<option value="Marketing Communications BA (Hons)">Marketing Communications BA (Hons)</option>
<option value="Media Production BA (Hons)">Media Production BA (Hons)</option>
<option value="Multimedia Journalism BA (Hons)">Multimedia Journalism BA (Hons)</option>
<option value="Music and Audio Technology BSc (Hons)">Music and Audio Technology BSc (Hons)</option>
<option value="Politics BA (Hons)">Politics BA (Hons) </option>
<option value="Product Design BA (Hons) ">Product Design BA (Hons)</option>
<option value="Psychology BSc (Hons)">Psychology BSc (Hons)</option>
<option value="Social Work BA (Hons)">Social Work BA (Hons)</option>
<option value="Sports Management BSc (Hons)">Sports Management BSc (Hons)</option>
<option value="Tourism Management BA (Hons) ">Tourism Management BA (Hons)</option>

<p>Bio (Max 200 words):</p> <textarea required name="biography" maxlength="200" placeholder="Enter a short description" style="width:370px; height:80px; font-size:20px;"></textarea><br>

<div class="jumbotron">
<h3>Optional Information</h3>
<div class="row">
<div class="sign-up-box">
<div class="col-md-6">

<p>Select your hair colour:
<select name="hair">
<option value="">Select...</option>
<option value="Brown">Brown</option>
<option value="Ginger">Ginger</option>
<option value="Blonde">Blonde</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
<select name="drinker">
<option value="">Select...</option>
<option value="None">None</option>
<option value="Light">Light</option>
<option value="Social">Social</option>
<option value="Frequent">Frequent</option>
<option value="Heavy">Heavy</option>
<select name="height">
<option value="">Select...</option>
<option value="Below 5'">Below 5'</option>
<option value="5ft1-5ft4">5ft1-5ft4</option>
<option value="5ft5-5ft8">5ft5-5ft8</option>
<option value="5ft9-6ft">5ft9-6ft</option>
<option value="6ft1-6ft4">6ft1-6ft4</option>
<option value="6ft5-6ft8">6ft5-6ft8</option>
<option value="Above 6ft9">Above 6ft9</option>
<div class="col-md-6">
<select name="smoker">
<option value="">Select...</option>
<option value="No">No</option>
<option value="Light">Light</option>
<option value="Moderate">Moderate</option>
<option value="Heavy">Heavy</option>
<p>Eye Colour
<select name="eyecolour">
<option value="">Select...</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Brown">Brown</option>
<option value="Hazel">Hazel</option>
<option value="Black">Black</option>
<option value="Other">Other</option>


<input type="submit" name="register" value="Register" class="btn btn-success" >
<?php } ?>



<h6>if(isset($_REQUEST['gender']) && $_REQUEST['gender'] == '0') {
echo 'Please select a gender.'; } ?></h6>
<?php include_once("../includes/templates/footer.php"); ?></h6>

<h6><!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
<script src=""></script>
<script src=""></script>


<nav class="navbar navbar-fixed-top navbar-inverse">

<div class="container"></h6>
<h6><?php if(!isset($_SESSION["username"])) { ?>

<div class="login-box">
<form action="login.php" method="post" class="navbar-form navbar-right">
<div class="form-group">
<input required type="text" required name="username" value="" placeholder="Username" class="form-control">
<input type="password" required name="password" value="" placeholder="Password" class="form-control">
<button type="submit" name ="login" value="Login" class="btn btn-success">Sign in</button>
<?php } ?>

<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="BUSingles"></a>

<div class="collapse navbar-collapse" id="navbarCollapse">

<ul class="nav navbar-nav">
<li><a href="index.php"><img src="images/logo.jpg"></a></li>
<li><a href="about.php" style="margin-top: 12px;">About</a></li>
<?php if (isset($_SESSION["username"])) { ?>

<li><a href="profile.php" style="margin-top: 12px;">Your Profile</a></li>
<li><a href="match.php" style="margin-top: 12px;">Find a Match</a></li>
<li><a href="logout.php" style="margin-top: 12px;">Logout</a></li>
<?php } ?>


</ul><!--/.nav navbar-nav-->
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->

<?php echo message(); ?></h6>


This is the index page when the user has not logged in. The design is very simple but straight to the point. The jumbotron template is used. The heading welcomes the user as well as a paragraph below describing the site. The sign up details get the user to fill out a variety of information as well as toggle options such as age ranging from 18-25 to create a quicker experience for the user. We had a seperate PHP for the header. Within the header we have the log in option stereotypically in the top right of the screen.We also decided to use our logo as the home button. The logo uses blue and pink which was used to connote male and female with the love heart connoting the partnership the website could create.


The meta tags are used so that the website could work within mobile devices. As well as this the website was created so that when the page was minimised the navbar would collapse and bring a dropdown menu. This feature works really well and I believe creates a better user experience on the site.


Finally, the information had to be registered so we have another php page under register.php within javascript which allowed the data entered to be transferred to PHPmyadmin by using a query. This also means that in the future when a user is searching for somebody to match with we have their data and can therefore find a match later on. As well as that we used an if statement to tell the user if they have registered correctly and if they have the would get a result such as “Success, you can now login”.


<p style="text-align: center;"></p>

if(isset($_POST["register"])) {
$username = $_POST["username"];
$password1 = $_POST["password1"];
$password2 = $_POST["password2"];
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
$age = $_POST["age"];
$gender = $_POST["gender"];
$uni = $_POST["uni"];
$biography = $_POST["biography"];
$smoker = $_POST["smoker"];
$hair = $_POST["hair"];
$drinker = $_POST["drinker"];
$height = $_POST["height"];
$eyecolour = $_POST["eyecolour"];

if(strcmp($password1, $password2) == 0) {

$query = "INSERT INTO users (username, password, firstname, lastname,age, gender, uni, biography, smoker, hair, drinker, height, eyecolour) VALUES ('{$username}', '{$password1}', '{$firstname}', '{$lastname}', '{$age}', '{$gender}', '{$uni}', '{$biography}', '{$smoker}', '{$hair}', '{$drinker}', '{$height}', '{$eyecolour}')";

$result = mysqli_query($connection, $query);

if($result) {
$_SESSION["message"] = "Success, you can now login";

} else {
$_SESSION["message"] = "Failed";
} else {
$_SESSION["message"] = "Passwords does not match.";



<p style="text-align: center;">, 2015. Available from: [Accessed: 4/17/2015]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s