Practicing with jQuery

In a workshop today we began looking at jQuery.

            “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility”

We used the function .toggleClass  which is defined as: “Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.”

Once a box was clicked it changes colour, then if it is clicked again it returns to the original colour. The css, javascript and html is shown below:

Screen Shot 2015-03-18 at 10.33.25 Screen Shot 2015-03-18 at 10.33.29 Screen Shot 2015-03-18 at 10.33.34Below is a screen recording of the result from the workshop:

Learning about jQuery will help with making our website more interactive and will also help for the future Collaborative project we have recently been set.

jQuery.com, 2015. Available from: https://jquery.com/ [Accessed: 19.03.2015]

fetch matches by searching through the database on match.php

The main aspect of the website we are trying to create is to return other user’s information after the signed in user has searched or filtered for a match. Just like in any normal online dating website, a user can filter the results by selecting a certain age, height, eye-colour, hair-colour, etc. And then the results are returned to the user and they are presented with the user’s profile information. Currently a logged in user can be click to the match.php page and is shown this screenshot below:

Screen Shot 2015-04-14 at 18.17.11

This is the code used for match.php:

Screen Shot 2015-04-16 at 18.44.52

There needs to be a form for the user to select features of other user’s such as the filters mentioned above and then a submit/search button to return the results.

So, I changed the PHP code to the screenshots below:

Screen Shot 2015-04-16 at 18.46.11

This screenshot shows the PHP used to return the results, it uses if variables and searches the data from the users table.

Screen Shot 2015-04-16 at 18.46.20

Below is a screenshot of the different user’s that have signed up to the website and their data is stored in the users table.

Screen Shot 2015-04-16 at 19.07.08

If a user was searching for another user who had blonde hair, blue eyes, 19 years old and studied Tourism Management they would be returned with the result Holly Banks as shown from the two screenshots below:

Screen Shot 2015-04-16 at 19.08.56

Screen Shot 2015-04-16 at 19.09.16

This is also shown in the screen recording below:

getting the Profile page to show the signed in user’s data

When a user sign’s in to BUsingles, they are directed to their profile page which currently looks like the screenshot below:

Screen Shot 2015-03-15 at 15.12.50

However, the user’s details that they registered with are not shown like a normal profile page would include. Therefore, I added the following PHP code (screenshot below) to the profile.php. Which essentially gets the data from the users table in phpMyAdmin by using the user_id and then echo‘s out the username,firstname,lastname etc…

Screen Shot 2015-04-14 at 23.32.41

After this PHP code was implemented, when a user signs in they are directed to their profile page and then able to view their profile details. The screenshot below is an example of a profile page I created:

Screen Shot 2015-04-16 at 18.25.35

Below is a screen recording of me signing into my profile and viewing my profile page:

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

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]

HTML & CSS – Positioning

Screen Shot 2015-03-03 at 22.27.43

In the lecture with Phil we learnt how a user experience is built out of the following layers:

Surface – this describes finished visual design aspects

Skeleton – this describes the screen layout and functional compartments in the screen

Structure – this defines navigation from place to place in the user interface

Scope – the places in the user interface are built to support user task-centric scope

Strategy – business goals drive user constituencies and contexts supported to form strategy
Screen Shot 2015-03-03 at 16.13.49

In our last lecture and workshop on HTML & CSS we began learning about positioning, and were set the task of producing the web browser above. Below is my outcome of the task and a screenshot of the CSS used:

Screen Shot 2015-03-03 at 16.51.25 Screen Shot 2015-03-03 at 16.51.35 Screen Shot 2015-03-03 at 17.40.24

HTML & CSS – Typical Web Browser

Screen Shot 2015-03-03 at 18.47.52

During a lecture with Phil, we were shown the basic typical web page layout and were asked to create something similar. In the workshop I did struggle but towards the end I produced the result for the task. Below is my result and the code:

Screen Shot 2015-03-03 at 19.16.05Screen Shot 2015-03-03 at 19.15.58

At the end of the workshop we were asked to create the below image using HTML & CSS for homework and to then post it onto our blog, so that will be my next HTML & CSS post.

Screen Shot 2015-03-03 at 16.13.49