Final website.

This is our final website with three working forms and a simple idea that we first decided on, Bored in Bournemouth? Our web application focuses on the idea of finding a desired day out with ease and choosing from a range of options of days out, active social, shopping and cultural. As well as these options users also have the chance to add there own days out and a rating, location, name and price so users can see more tailored days out in bournemouth.

Screen Shot 2015-04-20 at 10.25.52After completing this unit I am happy with the outcome, my coding has increased dramatically and it has benefitted me working in a group of three, although our website isn’t the most visually amazing website the back end works and its submits to and from a database as the brief required. If I were to do the unit again I would use Lynda more as the tutorials are very helpful, i would also ensure all the back end work is done before attempting to work on the front end interface.

Advertisements

Adding the last few touches.

Before finishing off our website I added a few finishing touches to ensure users know how to use the website and understand the idea of the website, I added:

Welcome to Bored in Bournemouth! Choose from a selection of days out in Bournemouth with a variety of options, ranging from active days out to a simple shopping trip, also have a look through our users favourite days out!

Submit your day out! On this page you can do our job and submit your favourite day out! Please complete the form below and include a price to let our users enjoy your fun filled days out!

Commenting our code.

Today I commented on all of our code to make sure we knew what everything was and how it all worked, this will help us in our critique as we can easily notify what certain things are and how they work. This task was quite hard as we didn’t do it whilst we were working so a lot of figuring out what’s what happened when I went back to comment on it.

Creating a form.

One of the forms we had to create was a comment form, this form was used to allow users to comment there own days out and give a location price and a rating out of ten, this feature also made our website a UGC application as it allows users to add there own days out. The form included:

·         Location

·         Rating 1-5

·         Name

·         Description

The form includes a series of boxes that need to be filled out and if their not filled out an error message will appear saying “something went wrong” this shows how our web application is responsive and works by sending data to a database and responds with messages.

Below is the form for uploading your day out:

<?php require_once("../includes/session.php"); ?>
<?php require_once("../includes/connect.php"); ?>
<?php require_once("../includes/functions.php"); ?>
<?php
 if(isset($_POST["submit"])) {
$name = $_POST["name"];
 $description = $_POST["description"];
 $location = $_POST["location"];
 $rating = $_POST["Rating"];
if(empty($name)) {
 $message = "Invalid name";
 } else if(empty($description)) {
 $message = "Invalid Description";
 } else if(empty($location)) {
 $message = "Invalid location";
 } else if(empty($rating)) {
 $message = "Please rate your activity";
 } else {
 $query = "INSERT INTO form (name, description, location, rating) VALUES ('{$name}', '{$description}', '{$location}', '{$rating}')";
$result = mysqli_query($connection, $query);
if($result) {
 $message = "Your day was added";
 } else {
 $message = "something went wrong";
 }
$name = "";
 $description = "";
 $location = "";
 $rating = "";
}
}
?>
<?php
$query = "SELECT name, description, location, rating FROM form";
$result = mysqli_query($connection, $query);
$rowcount = mysqli_num_rows($result);
?>
<!doctype html>
<html>
 <head>
 <title>Format Code</title>
 <link href="css/styles.css" rel="stylesheet" >
 </head>
<body>
<?php include 'nav.php'; ?>
<div class="top-title">
 <h1>Submit your day out!</h1>
 </div>
<div class="container">
 <?php
 if(isset($message)) {
 echo $message;
 }
 ?>
<form action="submit-day.php" method="post">
 Please Name activity: <input type="text" name="name" value="" />
 Describe your activity: <input type="text" name="description" value="" />
 Location: <input type="text" name="location" value="" />
 Please rate activity: <select name="rating">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 </select>
 <input type="submit" name="submit" value="Submit" />
 </form>
 <div>
<?php
 if ($rowcount > 0) {
 while($row = mysqli_fetch_assoc($result)) {
 ?>
<div class="day-box">
 <h1><?php echo $row["name"]; ?></h1>
 <p><?php echo $row["description"]; ?></p>
 <p><?php echo $row["location"]; ?></p>
 <p><?php echo $row["rating"]; ?></p>
 <?php if($row["rating"] == 5) { ?>
 <img src="images/stars.jpg">
 <?php } ?>
</div>
 <?php }
} else {
 echo "0 results";
 }
?>
</div>
</div>
 </body>
</html>
Here is our working form:Screen Shot 2015-04-20 at 10.13.14

Switching to bootstrap.

After using CSS I realised that bootstrap would be a better option due to its versatile design and way you can access a good theme for your web application easily. Using Lynda I found a tutorial which showed you how to add bootstrap to your website through a few simple steps and also told you the basics of bootstrap and how it works. However after adding bootstrap to out web application I still had a few problems seeing it work, and as this was not a huge part of our brief I decided to work on the back end first to ensure the application was working before thinking about design and will come back to bootstrap after.

Bootstrap is a front-end framework, and “is a free and open-source collection of tools for creating websites and web applications. It contains HTML– and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScriptextensions. The bootstrap framework aims to ease web development.”

Using CSS.

Here ive included some CSS styles i used to make the website look a bit more professional and styled, although this wasn’t a huge part of the brief i still thought it was necessary to ensure the website was easy as well a nice to use, When doing the CSS i made sure everything linked together and kept to a colour scheme and that everything was neat and all fitted together correctly this was done by using a container and several boxes inside to keep it all neat and tidy. After doing a few bits on CSS the website began to come together and look a lot better however many groups were using bootstrap and that made a huge difference as it looks a lot neater as well as more professional due to all the sleek button effects and scroll ideas. Therefore i am now going to give bootstrap a try and see what happens.  Screen Shot 2015-03-16 at 16.48.12

Screen Shot 2015-03-16 at 16.48.21 Screen Shot 2015-03-16 at 16.49.11 Screen Shot 2015-03-16 at 16.49.20 Screen Shot 2015-03-16 at 16.49.31 Screen Shot 2015-03-16 at 16.50.31 Screen Shot 2015-03-16 at 16.50.46 Screen Shot 2015-03-16 at 16.50.56 Screen Shot 2015-03-16 at 16.51.07 Screen Shot 2015-03-16 at 16.51.16

Connecting the database.

After many attempts we finally got our Web application connected to a database, we created three tables which would be for the login, registration and form. We used a few tutorials from lynda and folksonomy to ensure the table was laid out correctly and we had all the correct entities included. Once we were 100% we had all the correct information we used PHPMyAdmin to create the tables for our databases, here is the working form below and a few entries once connected, i am happy that my knowledge into databases has increased as they are a massive part of building applications and will always be needed.

Screen Shot 2015-03-16 at 16.50.22

First few test entries in our database:

Screen Shot 2015-03-16 at 16.50.04

Progress on our Web app.

Over the last week we have made a dramatic improvement on our website, we finally got our forms connected to the database and everything began to fall into place. Below are a few screenshots of:

Screen Shot 2015-03-12 at 12.50.34

Above is our completed nav bar which allows users to jump from page to page by clicking the top nav bar, this is done by linking another page to a button and so on for each page “<li><a href=”index.php”>Home</a></li>” this is done through a list and using “href=” when you link another page or website.

Screen Shot 2015-03-12 at 12.50.43

Screen Shot 2015-03-12 at 12.50.52

To connect to a database we had to use one of our groups login details, in this case Abbie’s, these details allowed our form entries to be sent off to a database and stored in, in lists of information. Below is one of the forms we created, this form is a comment section were users can leave comments on days out and give a rating out of 5.

Screen Shot 2015-03-12 at 12.51.04

Finally, below is a page from our web application, Ive included this picture to show the simplicity of a page and how everything is linked together.

Screen Shot 2015-03-12 at 12.51.16

Final Logo design.

Screen Shot 2015-03-10 at 14.37.54

After receiving feedback from the group on my initial logo I decided to change the colours according to the theme of our Web app I also added a few small details to make the logo look more professional, for example I added Inner shadows to the text to add small details which make the overall look more appealing, I also added gradients, changed opacities and added a 3D feel to the logo. All of the small tweaks has left me with a finalised logo I am happy with.

Screen Shot 2015-03-10 at 14.45.48