Design for Digital Media Environments – Post 24 – Production Post 9 – Filling In the Feed p4

To pull data from the DB I used an OOP by mistake which was only pointed out to me after I had created the code, however I don’t know how to do it differently so I’m going to leave it how it is however for future websites I will need to learn how to do it differently.


However the way that I coded it went like this;

  1. Create a query to the create table fetching the information that I want.
    1. $_POST = “SELECT post_user_username, post_club, post_title, post_body, post_timestamp FROM post_posts ORDER BY post_id DESC”;

// database columom rows name —– database name

$result = mysqli_query($connection, $_POST);

// result query code

  1. Then create a while loop which fetch’s the data asked for
    1. <?php while($row = mysqli_fetch_assoc($result)) { ?>
  2. Then finally I echoed out the information into formatted divs.
    1. <div id=”post-header”>

<span id=”name”><?php echo $row[“post_user_username”]; ?></span>

<span id=”club”><?php echo $row[“post_club”]; ?></span>


<div id=”title”><?php echo $row[“post_title”]; ?></div>

<div id=”post-db”><?php echo $row[“post_body”]; ?></div>


Now that I have the information being fetched from the DB I can freely format and adjust the divs to however I want them. For the feed I just created a simple white background with a boarder at the bottom to break the posts up.


Design for Digital Media Environments – Post 24 – Production Post 9 – Filling In the Feed p3

Now that a connection has been established it was time to create some data, which I can pull down from the DB. To-do this I pre-planned what tables and table headings I will need. I did this so I can easily plan what databases will be needed to complete this task so I don’t have to keep messing around with the code and databases.

Scan 4

Scan 3

Design for Digital Media Environments – Post 23 – Production Post 8 – Filling In the Feed p1

Now that the layout has been created it was time to start filling in the feeds with information from the database, at the time I wasn’t 100% sure how to do this so I broke the tasks down and looked at it as indivual tasks instead of one whole task, this allow me to learn and create the code for each section with-out over complicating myself with lots of random code. The list went as follows;

  1. Create connection to the database
  2. Create tables and add test data
  3. Pull data from tables
  4. Testing

I will be blogging after each bullet point has been created.

Design for Digital Media Environments – Post 22 – Production 7 – Feeds Changes

At todays meeting, I pitched the issue to the rest of the group and they agreed that the feeds are to thin and they liked the fix that I pitched to them. So after the meeting I came back and changed the CSS of one of the feeds to make it double the width plus the padding and margins that was on the other feed and I also deleted the html of the 2nd feed. This created a huge improvement and the posts will be able to fit on the page with ease. Below is the final look of the updated layout.

Screen Shot 2015-04-18 at 13.48.02

Design for Digital Media Environments – Post 21 – Production Post 6 – Logged in homepage

I was set with the task to set-up the second home page, which will be the logged in page. On this page their should be;

  • Nav Bar
  • Highest Rated Posts
  • Most Crazy Posts
  • Club News Feed
  • Post a story
  • Footer

Theses elements should follow the same styling, colour schemes and imagery used with-in the rest of the site to create a consistent look all the way through the site.


So to being creating this I created a separate page html page, there was a few reasons why I used a HTML page instead of PHP the major advantage was that I can coastally live previewing the site instead of having to upload the code to a private server, meaning I can make small little changes and quick and easily see the effects of the changes I made. The code that I used to create the layout was HTML and CSS, which can both, be live previewed instantly.


So to start off with I created the basic shapes, colours, sizing and positioning of the 3 feeds without any of the information, which will be, displayed with-in the feeds. To create the layout I first drew the boxes on paper, which represents the divs that will be need to create each element. I did this so I would create my life easier as I can pre-plan the amount of divs and what divs with be inside which, this meant that I had a quickly and easily create a visual representation for what will be needed, making the whole design process quick and easy as it allowed me to mess around with the look with-out spending ages adjusting the code to see the different looks.

Scan 2


Once settled on the final design of the page I went ahead and created the design in HTML and CSS to create the design on my website. At this point the code was just divs with classes and id’s to create the look, which match my design. Below is the code and along side are the looks of the coded design.


Now that all of design has been created and edited to create the desired look it was time to convert the page into PHP, this was so I can using some PHP to add the header and footer which has already been created and saved as a template with-in the template folder, which means I can just use the include code to add the header and footer to the page.


Now that the page has fully created the basic layout I have found an issues of the 3 columns layout. The problem that I have come across is that the columns them-selves are so thin meaning that the posts will be extremely long taking up a lot of room not showing many posts per page. The issue will be raised with-in our next group meeting. In the mean time I have come up with a fix to the problem, which is to create it a 2-column design, which will be the feeds and the club news, but feeds section will have a sort by which will be the two columns, which are designed at the moment.


Design for Digital Media Environments – Post 20 – Production Post 5 – Server Transfer

In order for me to preview the code I either have to set up a local host server or use an online hosted server either private or the Dakar server given by university (the Dakar servers can only be accessed via university internet connection). I had an old online-hosted private server that I use to use over the summer, so I now using this as my test server for this project.

To upload to the server I used a program called FileZilla, which is a free FTP (File transfer protocol). This allowed me to upload and preview the site. However by using an online-hosted server over a local host server means that I have to constantly re-upload the files over righting the old files, then connecting to the online server at…


Now that I have the files uploaded on to the server I came across a big problem and that was that the databases that was originally trying to connection to was configured for a different server, this meant I had to create a different connection PHP page with the correct database information which will direct the server to the correct PHPMyAdmin databases.


However this was only have of the problem, the next issue was that the data that was trying to be downloaded was found on my database, this meant that I had to sync my databases with the ones being used on Dakar, this was a simple and easy to execute fix as I just asked for the databases to be downloaded from the server that it was previously configured for and then import the database files onto my server. Now I have a fully functionally server to preview any changes that I create and a huge benefit to using an online server is that I can show the rest of my group and they can interact and preview my code.