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.

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.