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>

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/

Problems to consider

After our last group meeting we all agreed that one issue that we really need to consider is how we are going to monitor these posts. A big problem with a lot of websites and apps that we have researched into can have offensive posts towards others, so we were thinking about incorporating a report button into our website which is why we would need to know the students ID number so we could send a warning to them if they are offensive to others while posting.

similar

Above: Similar apps to ones we have researched.

Before creating a report button I needed to download WAMP-a free and open source cross-platform web server package, so I can access the tools I will need from my own laptop; this consists of mainly of the MySQL database, and interprets scripts written in PHP.

http://www.wampserver.com/en/

Creating our group Wiki

To keep all of our group contributions in one place where we can all access any updated work I have created a Wiki called “Green group 3”. This is accessed via the dakar accounts in filezilla and is easily installed by going onto https://www.dokuwiki.org/install. Once this is downloaded it is a case of opening the zip file and uploading it to my dakar account then following the instalment. During this process I enter my basic information and make the wiki “public” meaning others can see it but only the users can edit the information. Then the only thing left it to customise your Wiki and add the content you wish.

Screen Shot 2015-02-25 at 11.42.57

Above: Installation process for Doku Wiki.  

Screen Shot 2015-02-25 at 11.52.25

Above: My DokuWiki set up completed.

First ideas- ERM

Based on the first idea of “Anonymous” posting in a student based environment, I have had a go at creating my own entity relationship diagram to coincide with the ideas. It was important for this to be established before starting the practical side of the project so we can establish the relationship between our database categories based on studies we researched by Richard Barker.

Below:The types of entity relationships

http://www.webopedia.com/TERM/E/entity_relationship_diagram.html

001

Above: My own ERM for the first idea of Anonymous posting

First ideas- group work

Today I started to plan a few first ideas for our group project. We have decided we would like to do something that will get people socialising with a similar news-feed layout to Facebook and Twitter, ascending from newest to oldest. The main idea is that you will be posting anonymously but people will know your location and your gender. I feel this would be an interesting idea to explore as it still incorporates databasing but allows people to communicate openly without feeling intimidated at the aspect of meeting someone new. Then its the users choice if they want to meet the person face to face.

001Above: mind-map of our first ideas

Our target audience will be those within University mainly, and our database will consist of the student id, gender, year group and we will some how need to incorporate the location of each user. We have decided once the posts reach 50 then it will be cleared, so our data is always current.

Workshops

Screen Shot 2014-11-18 at 11.40.37 Screen Shot 2014-11-18 at 11.37.39 Screen Shot 2014-11-18 at 11.37.28 Screen Shot 2014-11-18 at 11.37.49 Screen Shot 2014-11-18 at 11.37.39http://127.0.0.1:62939/index.html
.container {
width: 900px;
margin-left: auto;
margin-right: auto;
background: #daddda
}
.box {
width: 273px;
float: left;
padding: 10px;
margin-right: 10px;
background: #daddda
}

.right-box {
margin-right: 0px;
}

.box-img {
width: 100%;
padding: 1px;

}

<!doctype html>
<html>

<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet” >
</head>

<body>
<div class=”container”>
<h1> Home Page</h1>
<div class=”box”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img class=”box-img” src=”images/beach-huts.jpg” >

</div>

<div class=”box”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img class=”box-img” src=”images/beach-huts.jpg” >
</div>

<div class=”box right-box”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img class=”box-img” src=”images/beach-huts.jpg”>
</div>

</div>
</body>
</html>

body{
background: url(../images/pier.jpg) no-repeat center center fixed;
background-size: cover;

}

task 4 – The outcome

This was the outcome of task 4; to complete a audio clip of at least 20 seconds and apply what I have learnt from workshops using After effects. I chose to change some of the spellings within my clip such as ‘captain’ to not include the ‘a’ so that the words would portray phonetically the actors voice over. I would have liked to make the scenes flow better and with more practice change the backgrounds to something other than a colour. However I have managed to show the way I can use 2D and 3D effects to change the way in which the words dominate the screen.

Below is the outcome, I am fairly happy with the timing in this result however I would like to try and edit this some more to make each new slide flow without appearing jumpy on the screen.

Task 4- Research into After Effects

I did some research before starting my task into how to use After Effects to create a powerful piece of Kinetic typography. Below are some videos which can be helpful when you are a beginner. After Effects have been used to create not just Kinetic typography but also green screen effects in films and news broadcasting.

This will link to the workshop I will have on After Effects and the process I am going to use when completing task 4 on Kinetic typography.