DATABASE CASE STUDIES

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.

memex

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:

u-tx.net ,2015.Available from: http://u-tx.net/ccritics/as-we-may-think.html [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

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

THE WEBSITE SO FAR

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.

index.php
Screen Shot 2015-04-14 at 18.17.02

about.php

Screen Shot 2015-04-14 at 18.17.05

profile.php

Screen Shot 2015-04-14 at 18.17.08

match.php
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:

Getbootsrap.com, 2015. Getting started. Available from: http://getbootstrap.com/getting-started/#examples [Accessed:27/02/2015]

Getbootsrap.com, 2015. Bootstrap. Available from: http://getbootstrap.com/ [Accessed:27/02/2015]

WIREFRAME OF ABOUT US PAGE & SITEMAP

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:

  • TITLE/LOGO
  • NAV BAR
  • IMAGES OF GROUP MEMBERS
  • BIOGRAPHY OF GROUP MEMBERS
  • LOG IN BUTTON
  • SIGN UP BUTTON
  • LOG OUT BUTTON
  • LINKS TO SOCIAL MEDIA SITES
  • FOOTER
  • HEADER

The sketches our below:

FullSizeRender-2

FullSizeRender-3

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:

FullSizeRender-4

Deciding on a name and colour scheme

As we are creating a Bournemouth University Dating website, we need to draft website name ideas that follow a university theme. We agreed as a group that we shouldn’t have a image-logo but instead be recognisable by the name of the website, the font we use and, the colour theme we select.

We drafted three website name ideas of:

BUsingles – Bournemouth University Singles

uniDate – University Date

You&I – You and I (UNI)

They all relate to the theme of university and are short and are self explanatory in the sense that they link to dating. The negatives of uniDate and You&I are that they aren’t subjective to Bournemouth University. However, I like You&I as it comes from the abbreviation UNI though some users may not instantly recognise this link and think that it’s a dating website for all occupations. Similarly the website name uniDate doesn’t strictly apply to Bournemouth University, and could be misinterpreted as for all universities. Whereas, BUsingles does relate to Bournemouth University and a dating website.

Therefore as we outweighed the positive and negatives of each website name, we concluded that BUsingles was the best option for our website.


Our next task is to decide on the colour scheme as a group. Whether we want to follow the same scheme as Bournemouth University of Black, Pink and Orange. Or whether we want to use our own colour scheme. The dating websites we researched use a green and blue colour scheme for the sign-in box and a pink and blue colour scheme to represent women and men.

The images below show the colour scheme of black, pink and, orange used by Bournemouth University:

Screen Shot 2015-04-14 at 12.08.14 Screen Shot 2015-04-14 at 12.07.57 The images below show the colour scheme of blue and green used on the sign-up forms from the dating websites: Match.com and Lovestruck.com:

Screen Shot 2015-04-14 at 12.11.37 Screen Shot 2015-04-14 at 12.11.58

My group members Callum and Michael will decide on the colour scheme and logo for our website as I am focusing on the functionality of the website.

References:

match.com, 2015. Available from: http://uk.match.com/signup/smart_landing_v2.phsl?tpl=20140616landing_registration_affiliate [Accessed 22/02/2015]

lovestruck.com, 2015. Available from: http://www.lovestruck.com/london/?utm_source=afu&utm_medium=affiliate&utm_campaign=skimlinks?utm_source=afu&utm_medium=affiliate [Accessed 22/02/2015]

mybu.bourenmouth.ac.uk, 2015. Available from: https://mybu.bournemouth.ac.uk/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_1_1 [Accessed:]

bournemouth.ac.uk, 2015. Available from: https://www1.bournemouth.ac.uk/ [Accessed:]