The finished product

In the brief for this project,  we were asked to create a web app for a chosen target audience of our choice that should be able to connect to a database. From the front end using HTML5 and CSS3, the user should be able to view posts, register for an account and be able to post to the database. The back end of the project was to be completed using PHP and MySQL.

In our group, we have created “Turtle Talks”, an anonymous social posting application, that targets students of Bournemouth University and allows them to freely post about what is going on where they are, whether its at the University or where they are staying.

The final website allows the target audience to view all posts, or they can search for a specific post and they can also filter posts so they can only see the ones that are relevant to the area they are currently in. They can affectively sign up for an account and they can actively be part of the posting. I think our idea is good because we were able to establish a clear target audience of University students and then conduct relevant research into our idea. Also if our application was successful then other Universities could adopt the same idea.

The group consisted of myself, Darlene, Rafiel and Tina. Unfortunately we did not see much of Rafiel and he did not contribute to any of the project. However Darlene was very much in charge and is responsible for a lot of the website. Me and Tina did a page each while we all contributed to the name and logo and overall elements of how we wanted the page designed.We kept in contact a lot so we all knew what was going on, mainly by face to face meetings and using Git and Facebook.

I had never done any sort of coding before starting this course let alone building a website from scratch.I didn’t feel that confident with coding but I tried to get myself involved in the project as much as possible.

I managed contribute the following:

  • The original meet the team page ( Tina did the final version)
  • A report button ( Although we did not include this in the final version)
  • A search engine with a basic design (Darlene did the final CSS for the page)
  • Made the website responsive for Kindles

Overall, even though a lot of bits that I spent time working on did not get used for different reasons I feel like I have become a lot more confident in coding and have a better understanding.  I believe we have met the brief successfully and overall I am pleased with most of the groups contribution throughout the process, and have learnt a lot from my group, especially Darlene.

Below are the screenshots from the final version of our web app project.

login

setup

Above: Final Log in page 

postingpage

Above: Final posting page

tinas

Above: Final meet the team page

searchy

Above: Final Search engine page

filter

Above: Final filter page for posts by location 

The website becoming responsive

The website is now responsive, and should alter to fit the following screen sizes:

  • Ipad & ipad mini.
  • Kindle
  • Mobile/ iphone 5

Although I was initially set with this task, as I am not very strong when it comes to code, Darlene was very helpful and did the Ipad/ipad mini tablet size, then uploaded that to git so that i could see what process I would need to follow. I could then complete the task of making the website responsive for a Kindle and I started the process of making our website also compatible with mobile devices. I did not finish this part but still uploaded the part for a kindle along with mobile device part I had started but commented out so if Tina or Darlene wanted to finish it they could as I was still finding it difficult to get my head around. Darlene decided to finish it off.

This was the code I did to make the website responsive for Kindles.

@media screen and (max-width:1280) {

.box_post_gender {
min-height: 70px;
color: white;
margin: auto;
font-family:sans-serif;
font-size: 20px;
background-color: #4F4F4F;;
width: 100%;
z-index: 100;
top: 50px;
position: fixed;
}

.box_hello {
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: center;
margin-left: 20px;
float: left;
line-height: 70px;
}

.box_hello2 {
display: none;
}

.box_post_gender_content {
text-align: right;
margin-right: 35px;
display: inline-block;
float: right;
margin-top: 5px;
}

.delete_toggle {
width: 60px;
height: 48px;
cursor: pointer;
text-align: center;
line-height: 10px;
background: #d1404b;
border: 1px solid #be3b45;
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 15px;
font-weight: 500;
display: inline-block;
position: relative;
left: 0px;
top: 3px;
}

.delete {
width: 60px;
height: 48px;
line-height: 50px;
text-align: center;
background: #d1404b;
border: 1px solid #be3b45;
cursor: pointer;
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 15px;
font-weight: 500;
margin-left: 82px;
text-decoration: none;
}

.delete a {
text-decoration: none;
color: white;
}

input[type="submit"] {
width: 60px;
height: 48px;
background: #fff;
border: 1px solid #fff;
cursor: pointer;
border-radius: 2px;
color: #85c14a;
font-family: 'Exo', sans-serif;
font-size: 15px;
font-weight: 500;
padding: 6px;
margin-top: 10px;
}

input[type="submit"]:active{
opacity: 0.6;
}

input[type="submit"]:hover{
opacity: 0.8;
}

}

This is a copy of the code I started for the mobile device, which Darlene built on to complete the task.


@media screen and (max-width: 960px) {
.box_post2 {
height: 190px;
width: 90% !important;;
background-color: #4F4F4F;;
font-family: sans-serif;
font-size: 20px;
color: white;
line-height: 40px;
opacity: 0.9;
margin: 0 auto;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
position: relative;
margin-top: 135px;
z-index: 0;
margin-bottom: -120px;
overflow: auto;
word-wrap: break-word;
}

.box_post_gender {
min-height: 70px;
min-width: 960px;
color: white;
margin: auto;
font-family:sans-serif;
font-size: 20px;
background-color: #4F4F4F;;
width: 100%;
z-index: 100;
top: 50px;
position: fixed;
}

.box_post_gender_content {
text-align: right;
margin-right: 35px;
display: inline-block;
float: right;
}
}

#place_delete_edit2 {
width: 100%;
height: 35px;
text-align: auto;
border-radius: 7px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
margin: 0 auto;
margin-top: 12px;
text-shadow: 1px 1px 1px #454e00;
background-color: #4F4F4F;
}

Below are some links to some helpful websites that my team recommended to me when I was struggling.

http://mattkersley.com/responsive/   ( this is a way to test if the website is responsive.)

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ ( to help with the sizing)

A few changes

Tina and Darlene have completed the tasks they said they would and to a good standard all that is left is to make the website responsive which I am currently working on. There were just a few small errors in the code which I found and let the others know about, however they are easily fixed. I changed the issue with the copyright sign in the code and uploaded that to git, whilst Tina made the changes to the group names.

copyright©

Above: The copyright sign needed to be changed in the code to become


©

writing

Above: Another small issue, the code just needed to be altered to read


é

Tina also made a good point that if two users sign up with the same name then it will not be very easy to distinguish the difference in posts, so Darlene has now altered the student id to fix this problem.

Overview of the final mysql database

For our website to be fully functioning we had to make some changes to the original database we had. Our database for Users is pretty similar, the final version consists of:

  • id
  • name
  • gender
  • student_id
  • password
  • date of entry

table for users

Above: how our users table appears.

Whilst our Post database has gone through a few changes over the course of this project to finally include the following:

  • id
  • user_id
  • post
  • gender
  • date of post
  • place of post

table for posts

Above: how the table for posts appears

Thanks to Darlene making these changes, our website now meets the criteria we first discussed in our group meetings which means our target audience of students can now affectively post anonymously but others can see where they are posting from whether it be in University, Halls of residence or Unilet and they can also see how recently the post was added due to the timestamps which is present on every post.

Making our website responsive

The final touches needed to our website are to make it responsive. I have found a helpful website which allows you to input your webpage and then it will show you the webpage in different formats and then you can see if its responsive or not. My first attempt at making the website responsive has worked however the navigation bar seems to cover a majority of the posts when being shown on smaller resolutions so I am going to have to try a different method. Below is the link I used to help me.

http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-steps

responsive

Above: Our website being tested for its responsive design. http://mattkersley.com/responsive/

The complete search engine

The search engine now successfully allows the user to search for a specific word or quote, it will then redirect the user to the post page with the list of posts which have what they have searched for. This is a good method to have on our website as it means if our target audience of students want to quickly find a post they liked then instead of scrolling through loads of recent posts they can easily navigate to a smaller selection with the words they chose to search. Like in the example below we can search for “hello” and filter to just one post with this included. The code I used to complete this process is shown below.

In the index.php


<?php
if(isset($_POST["sort"])) {
$sort = $_POST["sort-by"];

if(strcmp($sort, "new") == 0) {
$query = "SELECT * FROM posts ORDER BY id DESC";
} else {
$query = "SELECT * FROM posts ORDER BY id ASC";
}
} else {
if(isset($_POST["search"])) {
$searchTerm = $_POST["search"];
$query = "SELECT * FROM posts WHERE post LIKE '%{$searchTerm}%' ORDER BY id DESC";
} else {
$query = "SELECT * FROM posts ORDER BY id DESC";
}
}

$result = mysqli_query($connect, $query);
if(!$result) {
die("Query Error");
}
?>

search_page.php


<div class="box_hello"><a>Hello, <?php echo ucfirst($_SESSION["user"]); ?>! </a></div>
</div>



<form class= "search" action="index.php" method="post">
<p>Search</p><input type="text" name="search" placeholder="Search by words..." pattern="[^'\x22]+" title="Invalid input">
<input type="submit" value="Go!" />
</form>
<?php } ?>

searchy

Above:The search page

searchy2

Above: Inputting the search criteria “hello”

searchy3

Above: Returning the search results on the posting page.