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.

Not using the report button

After some thought we have decided not to include the report button as to link up a mail server is a bit of a difficult process, if there was a longer time process for the project then it might have been more achievable. From researching online, we would need to make changes to the dakar server which is difficult. However as the posts are able to be deleted then this is not such a huge issue, we have decided to carry on with more important factors such as me making the finished website responsive. This will improve the users experience as they will be able to view our website on devices such as mobiles and tablets, not just computers which suits our target audience well as students are more likely to use their mobiles on the go to send post.

Creating a search engine

At the moment I am working on making a search engine for our website which will help the users be able to filter through the posts if they are looking for a specific topic or area of the website. I have managed to get a really basic one working but need to link it correctly to our database so we can search specific posts, however that should be easy to change.

search Above: How the search bar currently appears.

searching

Above: Showing that when no information is added, a message of ‘could not search!’ is given out


<?php
$output='';

if(isset($_POST["search"])) {
$searchq= $_POST["search"];

$query = mysql_query("SELECT * FROM posts WHERE firstname LIKE '%$searchq%' OR lastname LIKE '%searchq%'") or die("could not search!");

$count= mysql_num_rows($query);
if($count==0){
$output = 'There was no search results!';
}else{
while ($row=mysql_fetch_array($query)) {
$fname = $row['firstname'];
$lname =$row['lname'];

$output .='<div>'.$fname.''.$lname.'</div>';
}
}
}

?>
<!DOCTYPE html>

<html>

<head>

<title>Search</title>

</head>

<body>

<form action="index3.php" method="post">

<input type="text" name="search" placeholder="Search for members..."/>
<input type="submit" value=">>" />




</form>
<?php print("$output");?>

</body>
</html>

Below is a very useful video which I used to help me create this.

Making the report button

Last night I decided to work on making a report button, this will improve the users experience of our Turtle Talks website because if the audience feel offended by any posts then they can send a direct email to me along with the subject of the mail. I still need to make improvements and add it into the code that Darlene has been working on however the email did not send to me because I do not have a mail server on the local host I have been using via WAMP. Below is the code that i used as well as a screen shot of how it looks.


&lt;?php require_once(&quot;../includes/session.php&quot;); ?&gt;
&lt;?php require_once(&quot;../includes/connect.php&quot;); ?&gt;
&lt;?php require_once(&quot;../includes/functions.php&quot;); ?&gt;
&lt;?php include_once(&quot;../includes/templates/header.php&quot;); ?&gt;

&lt;?php echo $_SESSION[&quot;user_id&quot;]; ?&gt;

&lt;?php
if(isset($_POST[&quot;submit&quot;])) {
$to = &quot;becky_hughes94@hotmail.co.uk&quot;;
$subject = ($_POST[&quot;subject&quot;]);

$mail = ($_POST[&quot;mail&quot;]);

// Always set content-type when sending HTML email
$headers = &quot;MIME-Version: 1.0&quot; . &quot;\r\n&quot;;
$headers .= &quot;Content-type:text/html;charset=UTF-8&quot; . &quot;\r\n&quot;;

mail($to,$subject,$mail);
}
?&gt;

&lt;form class=&quot;form-signin&quot; action=&quot;&quot; method=&quot;post&quot;&gt;
&lt;h2 class=&quot;form-signin-heading text-center&quot;&gt;Send a report&lt;/h2&gt;
&lt;label class=&quot;sr-only&quot;&gt;subject&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;subject&quot; name=&quot;subject&quot; value=&quot;&quot; /&gt;
&lt;label class=&quot;sr-only&quot;&gt;Mail&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;mail&quot; name=&quot;mail&quot; value=&quot;&quot; /&gt;
&lt;button class=&quot;&quot; type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Submit&quot;&gt;send mail&lt;/button&gt;


&lt;?php include_once(&quot;../includes/templates/footer.php&quot;); ?&gt;

report

Above: screenshot of the basic report button. The error returned is because my mail is not linked up.

Net neutrality

Net Neutrality is what reserves users rights to communicate freely and openly online.

It means that Internet Service Providers (ISP’s), such as Sky and BT should not be able to judge people against what they are able to view or post online. Without Net Neutrality in place ISP’s would be able to block certain content they did not agree with.

As of February this year , new rules on how the internet is governed are to be put in place.

The main changes for broadband providers are as follows:

  • Broadband access is being reclassified as a telecommunications service, meaning it will be subject to much heavier regulation
  • Broadband providers cannot block or speed up connections for a fee
  • Internet providers cannot strike deals with content firms, known as paid prioritisation, for smoother delivery of traffic to consumers
  • Interconnection deals, where content companies pay broadband providers to connect to their networks, will also be regulated
  • Firms which feel that unjust fees have been levied can complain to the FCC. Each one will be dealt with on a case by case basis
  • All of the rules will also apply to mobile providers as well as fixed line providers
  • The FCC won’t apply some sections of the new rules, including price controls

Source: http://www.bbc.co.uk/news/technology-31638528