Databases and Interactivity

We learn’t from a previous lecture that a database is a modular form. From this a database others choice/interaction which is a new media.

Grids & Postion

Screen Shot 2015-04-17 at 16.08.38 Screen Shot 2015-04-17 at 16.08.45


Screen Shot 2015-04-17 at 16.08.51


Screen Shot 2015-04-17 at 16.08.56



The Memex

The memex is a hypothetical system that would store and compress individuals books, records and communications. This influenced further ideas of hypertext systems. It has the potential to record a person’s life through interfaces such as text, voice, photography and video.


Ted Nelson and Project Xanadu

Project Xanadu was the first hypertext project, founded by Ted Nelson. Xanadu will most probably never be completed and remain an idealised network however there are several important ideas which stem from it. Xanadu was Nelson’s project to build a computer network with a simple user interface.

Below is a video of Ted Nelson demonstrating Xanadu Space:

References: ,2015.Available from: [Accessed: / /]

Registering users data and connecting to phpMyAdmin

The next task I set for myself was to register the user’s details after they sign-up and connect it to the database. Therefore, I had to create a separate php called register.php

Screen Shot 2015-04-14 at 19.18.34

To allow the data entered by the user in the sign-up form to transfer to the database in phpMyAdmin, I used the highlighted php code below. This query inserts the username, password, firstname, lastname, age, gender, university course, biography, smoker, hair, drinker, height and, eye colour into the database.Screen Shot 2015-04-14 at 19.22.27

The below data was entered on the sign-up form and then the register button is clicked.
Screen Shot 2015-04-14 at 19.26.12

To check if the data was then inserted into the users table, I logged into phpMyAdmin and browsed the users table and as you can see below all the data was transferred.Screen Shot 2015-04-14 at 19.26.55

removing the log-in box after signing in

When a user signs in to the website I want the sign in and sign-up buttons and boxes to disappear once they’ve signed in. Currently the sign-in box stay even when you’re on your profile page. Like the second image below:
Screen Shot 2015-03-15 at 15.12.38

Screen Shot 2015-03-15 at 15.13.56

To resolve this issue I need to change the code on the homepage (index.php) the php code for this page was like the image below:

Screen Shot 2015-03-15 at 15.14.56

Therefore, I enclosed the <div class =”login-box”> with the php code:

<?php if(!isset($_SESSION[“username”])) { ?>

<?php } ?>

This basically means if the username is not entered then show the <div class =”login-box”> otherwise if the username and password is entered then the login box will disappear.

Screen Shot 2015-03-15 at 15.15.06

Now when the user has signed in they are directed to their profile page and the <div class =”login-box”> is no longer shown.

Screen Shot 2015-03-15 at 15.12.50


Here is screenshots of the website, we’ve created so far. I’ve used the bootstrap template as my other group members will be focusing on the design and layout of the page. So far, i’ve made the website be able to navigate through the homepage, the about page, the profile page, find a match page and logout.

Screen Shot 2015-04-14 at 18.17.02


Screen Shot 2015-04-14 at 18.17.05


Screen Shot 2015-04-14 at 18.17.08

Screen Shot 2015-04-14 at 18.17.11

The navigation of the website is now all currently working.

Heres a short video navigating through the current website project:

The next step is to make the website functional by:

  • connecting the sign-up form to the database so the user information is stored
  • being able to sign in after signing up and then directed to the profile page
  • only being able to view profile.php, match.php and the logout button after signing in
  • profile.php needs to show the signed in users information
  • fetch matches by searching through the database on match.php

Using Bootstrap for the ‘About Us’ php page

We have been set the task to create a ‘Meet the team’ or ‘About Us’ page that includes an description of each group member and myself. Along with an explanation of the website we have agreed as a group to make. In a workshop with our workshop teacher Kyle, he suggested to use a website called Bootstrap.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap essentially provides you with a template to build a functioning website, by downloading the source code (Source Less, JavaScript, and font files, along with our docs), download bootstrap (Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included).

Screen Shot 2015-03-23 at 01.41.15 Screen Shot 2015-03-23 at 02.19.28

For the ‘About Us’ webpage, we decided to use the ‘jumbotron’ template as it has a clear navigation and a user friendly approach. As seen below:

Screen Shot 2015-03-23 at 02.24.24

From here, I placed all the downloaded bootstrap files into the local host/public/includes/css folder then opened it in brackets ( A modern, open source text editor). I then experimented and edited the code to suit the requirements of our webpage. I haven’t targeted my focus directly to the CSS and design of the webpage, as my other group members are more keen to design the website.

For the ‘About Us’ webpage I included 3 images using an id as they all include the same design requirements and made a few adjustments to the css of the page so it wasn’t an exact replica of the bootstrap template. Below is the result:

Screen Shot 2015-04-14 at 18.17.05

References:, 2015. Getting started. Available from: [Accessed:27/02/2015], 2015. Bootstrap. Available from: [Accessed:27/02/2015]


We were asked to do sketches of the about us page that I will be creating. Therefore, Callum and I sketched out the following wireframes of the about us page. Each sketch of the page included:


The sketches our below:



FullSizeRender-1We also sketched the sitemap of how the website would navigate for a logged in user and logged out user, the sketch is below: