D4DME – Display Selected Recipe

The final addition that I made to our website was the ability to click on one of the recipe titles and be taken through to a more detailed view of the chosen recipe. To do this, I had to create an id based link to the individual recipe.

<h1>
<a href="selected_recipe.php?recipe_id=<?php echo ($row["recipe_id"]); ?>">
<?php echo ($row["recipe_title"]); ?>
</a>
</h1>

This then linked to the specific recipe page with the corresponding id via this block of code:

<?php
if(isset($_GET["recipe_id"])) {
$recipeID = $_GET["recipe_id"];
} else {
redirectTo("index.php");
}
?>
<br>
<?php 
$result = GetSingleRecipe($recipeID);
while($row = mysqli_fetch_assoc($result)) {
include 'recipe_large.php';
}
?>

As you can see, the include function has changed to include ‘recipe_large.php’ rather than the standard ‘recipe.php’. This file contains more information on the recipe and it much larger in screen size.

Advertisements

D4DME – The Database (Part Two)

An entity-relationship diagram (ERD) is a data modeling technique that graphically illustrates an information system’s entities and the relationships between those entities.

After our group lecture on ERD and database design, I decided to have a go at planning how our database tables would look for the Starving Student page. Our website won’t be able to function properly without a solid database structure, so it’s vital that I get this part of the project up and running to make the other jobs easier for my team.

7

Screenshot of ERD in Word

8

Screenshot of Database Tables in Word

The USER table contains the same fields as my previous idea on ‘D4DME – The Database’, though I have focused more on the rough design for now rather than trying to make the table in PHPMyAdmin. The RECIPE table is slightly more complicated, as it must have two derivative tables each containing relevant data. As I wasn’t particularly happy with this structure for the database, I decided to email Simon for some advice on what to do next.

References

Janssen, D. and Janssen, C., 2010. Techopedia [online].
Available from: http://www.techopedia.com/definition/1200/entity-relationship-diagram-erd [2/20/2015].

D4DME – Trial and Error

After having a discussion over Chace’s mock-up for the webpage, I created a page on our wiki to document our discussions (Here). The page consists of screenshots accompanied by an ongoing conversation that we had over Facebook. Whilst the Wiki is good to document our planning and teamwork, it doesn’t provide us with a real-time chatting option that we need to keep in touch when we’re not talking face-to-face. Facebook probably isn’t the best choice and isn’t very professional, though everyone is using it and it makes it easy to keep in touch outside of uni.

D4DME – The Website Design

As discussed in our first group meeting today (Here), Kyle and I decided to do some research into logo and icon design for our website. This is mostly Kyle’s area, as I said that I didn’t mind working on the PHP to start with if he wanted to work on the design (though I decided to give Kyle a hand as there isn’t much I can contribute until Chace creates the base code for our website). Chace was in charge of creating a mock-up of our first design idea, so in the meantime I decided to play around in illustrator to make a logo. My logo is only going to be a place holder, as Kyle is working on some more detailed designs for the actual logo.

The working title for our website is ‘Starving Students’, which is going to be a quick and easy recipe site with different filtering criteria aimed at students. This gave me a few ideas to start with, based mostly around how to represent the idea of students and food.

Untitled4

Screenshot of Illustrator

After doing a quick Google search for ‘student icon’ I found that the student hat was the most widely accepted icon to represent students. I decided to make a simple vector of the hat. My initial idea to integrate food into the design was to include a knife and fork somewhere alongside the hat, so I tried out different positions.

Untitled5

Screenshot of Illustrator

I decided to go for the top left design, as I thought that the cutlery fit nicely underneath the hat and didn’t take up any unnecessary room.

Untitled6

Screenshot of Illustrator

The last addition to the logo was a circle backdrop with a thick border to contain the icon. The colours of the logo are not final, merely place holders until we have a design for our website.

D4DME – Meet the Team (Part One)

Today I was introduced to my team mates, Mongkol (Chace) and Kyle. The first task that we have been given in our new groups is to create a ‘Meet the Team’ page.  Chace decided to start work on the design of the page(s) with HTML/CSS. The page initially looked like this:

Untitled

Screenshot

To get used to the collaborative side of this project, I asked Chase to send me his project files so that I could have a look at his code and make some additions. We identified that it would be a good idea to comment our coding so that we don’t get confused by each other’s work. I suggested that we preface each comment with an initial so that we know who has said what, e.g. /* V: verity made this comment */, <!– V: verity has made this comment –>

Chace had initially created three separate stylesheets for the three pages (Home, About, Contact). To make the coding process easier for everyone in the group, I decided to refine this down to one stylesheet that applied to all of the pages. Whilst it was a nice idea to have different coloured headers on each page, it would make it more time consuming to make changes to all three of the stylesheets, so I suggested that we compile them into one. After this I made a few changes to the HTML to make editing easier in the long run.
One of these was to move the navigation to a separate file and link it in using PHP at the top of each page.

Untitled1

Screenshot

This means that we can make a change to one of the links without having to change it on each individual page.
Aside from this, I had a look at Chace’s CSS and made some additions such as pseudo animations (by using generated code from http://matthewlein.com/ceaser/) and using the drop shadow effects that Chace had made on the main divs.

To save us some time in the long run, I added a few extra lines of CSS to make the website dynamic and scaleable with the browser. This made it so that the content of the page would adapt to fit the size of the window and wouldn’t cut anything out from view when scaled.

The final result of my additions ended up looking like this:

1

Screenshot

2

Screenshot

We agreed that it would be a good idea to wait until Wednesday, when we could all meet up, to add content to the page.

Infographic Poster – The Poster

Untitled3Untitled34

As stated previously, the first change to be made was the colour of the mountains. I agreed with the feedback I received saying that the greens blended in to the poster and didn’t stand out for themselves from the water. This is also why I decided to add a strip of brown at the bottom of the hill to represent more clearly the flow of ground water, as it proved difficult to see the strip of water whilst it overlaid the green of the grass. It also looked too similar to the river flowing in the same direction, so I wanted to clear up any confusion.

The most major change that I made to the poster was my attempt to make the piece come together as a whole rather than feeling segregated. By having the key (which represents the change in water states) beneath the title, the poster felt split into three different sections which had a negative impact on the composition as a whole poster. To remedy this, I decided to move the key to the bottom so that it was not splitting the title and cycle apart. The poster, however, still felt split between the title and cycle image, so I decided to move the sun up into the top right corner and have a group of sun rays extending over the whole poster. I feel that this brought the poster together as one image rather than three separate sections and that it looked a lot more professional.

The final change that I made to the final design was on the actual cycle itself. There were various snippets of feedback from my class mates and friends about things I could include/take out that would make the cycle more obvious. The first of these was the most obvious; I was told I should include actual rain and water vapour connecting to the clouds to show the cycle in action. This was a simple task. The next was that the arrow leading to the tree confused the cycle slightly, as plant uptake of water I not part of the major water cycle (one of my friends said that if I’m representing plants on there then why aren’t there humans or animals drinking water as well?). It made sense to remove the arrow in order to keep the focus on the primary water cycle. The last major change was trying to make the ‘snow melt’ on the mountain more obvious. I did this by adding streams of water falling from the drooping chunky of snow into the mountain pool.

After finishing all of these changes, I believe that my poster is at a professional standard of work. I am pleased with the end result and look forward to hearing what my seminar group think in our class critique. Of course, there is always room for improvement, and I am sure that I would be able to make my poster much better if I had a longer time to work on it. However, I am satisfied with the end result and think that it has improved greatly after all of the feedback I have received.

Infographic Poster – The Design (Part Three)

The next stage was to create the actual main body of the poster. My initial idea was to break each part of the cycle up into individual sections like one of the infographics I looked at before, though I soon realised that would make it seem too literal and would remove the poster element from the design. So instead, I decided to create a basic scene that contained the primary part of the water cycle (that being evaporation, condensation, rain, river flow into the sea and repeat).

UntisdfghjktledThe initial scene without any prompts for a cycle turned out quite nicely. When receiving feedback from my peers, however, I realised that the green hues of the grass and mountains didn’t work particularly well with the blues of the water and sky, as they experienced the same problem as I had earlier (blending of colours). I had originally changed the mountains to green so that the didn’t look out of place with the grass, though I plan to change them back to a browner hue so that they compliment the blues of the colour scheme. (This change will be shown in the next post, however, as I had actually made more progress on the poster before changing quite a few details as a result of feedback).

Untitled3This is how the poster looked after every part had been pieced together. At this point, I was happy to have a complete poster, though the feedback I received from several people on how to improve it was very useful. My next post will contain a side by side comparison of the before and after as well as a commentary on what has changed and why.