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.

Advertisements

Reference for collab project

main CSS


.parallax-window {
min-height: 500px;
background: transparent;
}

.overlay {
min-height:500px;
padding:50px;
}

.black-bg {
background: rgba(0,0,0,0.45);
color:#ffffff;

}

.white-bg {
background: rgba(255,255,255,0.45);
color:#000;

}
.container {
width: 900px;
margin: 0px auto;

}
.clearfix {
clear:both;

}

.image-width {
width:100%

}

index


<!doctype html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-two.jpg">

</div>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-four.jpg">

<div class="overlay black-bg">

<div class="container">
<h1>Title</h1>
<p>This is my page...</p>

</div>
</div>

</div>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-one.jpg">

</div>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-three.jpg">
</div>



<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/parallax.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>

scripts


$(document).ready(function() {
$("#theImage").hide();
$(document).scroll(function(e) {
var scrollPosition=$("body").scrollTop();
console.log(scrollPosition);

if(scrollPosition>250){

$("#theImage").fadeIn();

}


if(scrollPosition<250){

$("#theImage").fadeOut();
}
});
});

Search Engine

Here is the code that should link to the database and allow the users to search for specific posts.


<?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)) {
$tweet = $row['tweet'];
$userid =$row['userid'];

$output .='<div>'.$tweet.''.$userid.'</div>';
}
}
}

?>
<!DOCTYPE html>

<html>

<head>

<title>Search</title>

</head>

<body>

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

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




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

</body>
</html>

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

Report and search button- research

I have been looking around for some help on setting up a report button for our page. One useful link is http://stackoverflow.com/questions/4841194/php-report-button. It states that I need to set up a new table for this information on the database then I can execute the code. The link says to include the following:

1. Report ID
2. Link ID
3.Date reported.

Although I had a search button in the About us page I created the team think it would be better if we create it without the help of bootstrap so I have also looked how I can create a search button for our page, the video below was helpful with this, now I need to get these working, then add it to the rest of the code that Darlene and Tina have been continuing to work on.

Logo’s part 2

Tina and Darlene had also worked on logo’s while I had just sketched mine Darlene put hers in with the code she has been working on and Tina had sketched one based on some of the photographs we took after one of our group meetings then made it interactive. Even though we have not agreed on which ones we want to use yet as we are prioritising getting the PHP perfect then working on less vital elements after here are some of the developed ideas.

 

Above: Tina’s take on possible logo ideas for Turtle talks.
https://christinasabine.wordpress.com/

Above: Darlene’s work on the logo embedded onto the login page.
https://darlenebuttner.wordpress.com/

Logo Ideas

Today I thought it would be a good idea to sketch out some possible ideas on a logo for our website which we have agreed to call Turtle talks. I have stuck with a cartoon theme when drawing them as we are going beyond what is classed as normal with our name as Turtles can not actually talk, but we all just liked the idea of using a Turtle to link with Bournemouth and our favourite place which is the beach and there is also an aquarium there. I do not know if we will actually use any of these sketches but the final one will be digitalised using software such as Ink-scape or Adobe Illustrator. I think that the sketches are affective by using the style of cartoons the animal is fairly easy to recognise for our chosen target audience and the animal itself is not associated with just being popular with one gender so can appeal to the audience of University students more.

Scan0021

Above: Sketches of some logo ideas.

We have a good idea of the colours we will use on the final product, staying very close to generic colours of greens for the logo.

Setting up WAMP and making mistakes

To be able to edit and view the code that Darlene has been working on and try to incorporate elements I had been working on I downloaded the open source software WAMP which was a really easy process with the help of an online tutorial.

Above: The video I used to help me get started.

I then made a database to reflect what Darlene had been uploading to our joint Git account which I easily downloaded as a zip.

WAMP

Above: My WAMP all set up showing the local host and where my projects are found.

users

Above: Setting up the users table.

posts

Above: The posts table

I then tried to add in bit of the ‘about us page’ that I had been working on such as the Navigation bar and the footer.

failed

Above: The log in page after I added my code- Footer in the wrong place and buttons are no longer in line.

Postpage

Above: The posting page after adding my code, the navigation bar was successful but altered the rest of the layout and the footer was not visible.

As you can see from the screenshots it did not go to plan and my copy ended up very muddled, but that’s the beauty of Git, even though mine was a mess, Darlene’s working copy was still intact.

Above: Darlene’s code- how the log in page should appear.
https://darlenebuttner.wordpress.com/