(Year 3 Sem C) Week 12 Final Checking

Today, I am doing the final checking and debugging for the final presentation. Start copy the font to all of the page and make sure the page is connected all together.

For the instruction, I decided to apply GIF image and is doing by using Adobe Photoshop. Besides, I also apply the whole content to the homepage of the website.The font that I choose to use in website is Lato. I have refined the homepage of the website Below is the comparison between before refinement and after:

Before Refinement:

After Refinement:

About and Issues is combining together and form one page.

Below is the whole flow of the website: 

At last, tomorrow will be the final presentation day. Looking forward into it!:)

(Year 3 Sem C) Week 12 Working with Technical

Since the sphere cannot be clicked, I decided to apply dots by overlay behind the sphere.

Besides, I have sent an e-mail to Mervin and ask him some questions. In the email, Mervin has provided me some links to solve my problem. Today, I decided to try to test on the hide and show function.

After I apply the code the data can be shown but not the saved data. I change the page to index.html and see whether the data can be load.The page can load but the particles are overlay.

After i change the code to (message.php). the page can be shown but the data still not in the message box.The data can be received but not in the box and is being overlay.

The problem is solved when the data is connected online.But not in the white message box. 

After that, I decided to redesign the message page. 

After that, I continue working on the show message part. In this part, I have ask questions in Quora and get some reply.

Reference List:

jquery.org, j. (2017). .load() | jQuery API Documentation. [online] Api.jquery.com. Available at: http://api.jquery.com/load/ [Accessed 7 Feb. 2017].

jquery.org, j. (2017). .show() | jQuery API Documentation. [online] Api.jquery.com. Available at: http://api.jquery.com/show/ [Accessed 7 Feb. 2017].

YouTube. (2017). How change font color in PHP (HD). [online] Available at: https://www.youtube.com/watch?v=eT-Awswkkj8 [Accessed 8 Feb. 2017].

Netbeans.org. (2017). Creating a Database Driven Application With PHP. Design PHP application. Using HTML input form. PHP implementation of reading from MySQL database. [online] Available at: https://netbeans.org/kb/docs/php/wish-list-lesson2.html [Accessed 8 Feb. 2017].

output, M. (2017). MySQL PHP change text colour depending on output. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/34103844/mysql-php-change-text-colour-depending-on-output [Accessed 8 Feb. 2017].

Google Fonts. (2017). Google Fonts. [online] Available at: https://fonts.google.com/specimen/Lato?selection.family=Lato [Accessed 8 Feb. 2017].

(Year 3 Sem C) Working with technical

For this day, I decided to combine the three js page to the interaction page. I also separated to two different page which one of it is interaction and one of it is the page come into the interaction page. Before inserting the data, the particles also need to be clickable. The most important part of this assignment is to let people see the message that has written by others. Therefore, I decided to work at the important part first. So, I have applied a white box for the message which to show out the pop-up message.

From this step, I have done some research on how to insert data from MySQL database to a div object.

By this point, I also do some research on how to make the sphere object become clickable in three js.

Here is the code that I applied:

var messagebox = document.getElementById("Messagebox");

      

function onDocumentMouseClick(){

isMouseDown = true;

messagebox.material.transparent = true;

        messagebox.material.opacity = 0.5;

console.log ('Mouse Click');

}

function onDocumentMouseUp(){

isMouseDown = false;

messagebox.material.transparent = false;

        messagebox.material.opacity = 0.5;

console.log ('Mouse True');

}

This code is to apply the opacity to the box. Therefore, I decided to change to apply visible effect on the message box.

function onDocumentMouseClick(){

isMouseDown = true;

messagebox.visible = true;

console.log ('Mouse Click');

}

function onDocumentMouseUp(){

isMouseDown = false;

messagebox.visible = false;

console.log ('Mouse True');

}

But, it seems not function as well.

Reference List:

GitHub. (2017). how to make the object fade in and fade out · Issue #3650 · mrdoob/three.js. [online] Available at: https://github.com/mrdoob/three.js/issues/3650 [Accessed 5 Feb. 2017].

Jsfiddle.net. (2017). Edit fiddle - JSFiddle. [online] Available at: http://jsfiddle.net/jeanlescure/7y9ozyj6/ [Accessed 5 Feb. 2017].

Dev.vast.com. (2017). jQuery Popup Overlay. [online] Available at: http://dev.vast.com/jquery-popup-overlay/ [Accessed 5 Feb. 2017].

tag, R. (2017). Receive data from MySQL in a div tag. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/34141285/receive-data-from-mysql-in-a-div-tag [Accessed 12 Feb. 2017].

The SitePoint Forums. (2017). Inserting mySQL into a div?. [online] Available at: https://www.sitepoint.com/community/t/inserting-mysql-into-a-div/216810 [Accessed 5 Feb. 2017].

The SitePoint Forums. (2017). Using html select to insert data into MySql db?. [online] Available at: https://www.sitepoint.com/community/t/using-html-select-to-insert-data-into-mysql-db/195475 [Accessed 5 Feb. 2017].

(Year 3 Sem C) Working on Technical

Since the particles can move around by applying the code. Therefore, I decided to try to stop by using click function.

I have applied the code as below:

function onDocumentMouseClick(){
isMouseDown = true;
console.log ('Mouse Click');
}


function onDocumentMouseUp(){
isMouseDown = false;
console.log ('Mouse True');
}


After applying the code, the particles can be clicked and moved to the certain position.

Therefore. I decided to make some adjustment for the particle's position.The position of the particles is separated to three row and each row will have 14 particles. Besides, I also decided to make all the particles be rotated.

Reference Link:

Barkofthebyte.azurewebsites.net. (2017). three.js canvas - interactive - cubes. [online] Available at: http://barkofthebyte.azurewebsites.net/demos/projspikesfs.htm [Accessed 12 Feb. 2017].

Barkofthebyte.azurewebsites.net. (2017). Three.js projecting mouse clicks to a 3D scene - how to do it and how it works. [online] Available at: http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works [Accessed 3 Feb. 2017].

CodePen. (2017). Three.JS orbit controls example. [online] Available at: https://codepen.io/anon/pen/EZEOoy [Accessed 3 Feb. 2017].

clicked, t. (2017). three.js: stop automatic rotation while mouse is clicked. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/39449582/three-js-stop-automatic-rotation-while-mouse-is-clicked [Accessed 3 Feb. 2017].

(Year 3 Sem C ) Week 11 Consultation with Mervin

Today I am having a final consultation with Mervin. The consultation will be focused on the interaction part.

• Tween js - What is the meaning of event? Adjust it to the random position with math and get a different position. 
• If fail to use mouse over to show the message, can use the function such as click and show the message at the box.
• Redirect PHP to a page by using location (Apply after closing MySQL ).
• Use Jquery to add in particles automatically. 

(Year 3 Sem C) Week 11 Tween js in Three js

Today, I decided to make the particles tween when it was clicked. Therefore, below is the coding that I apply which:

function onDocumentMouseClick(){
animatemove();
console.log ('you clicked me');
}

function animatemove(){

    sphere.position.x += 10;
sphere.position.y += 5;

sphere2.position.x += 90;
sphere2.position.y += 15;

    sphere3.position.x += -50;
sphere3.position.y += 5;

sphere4.position.x += -20;
sphere4.position.y += 5;

    sphere5.position.x += -10;
sphere5.position.y += 5;
    console.log ('you clicked me ');
render();
// requestAnimationFrame( animatemove );

}

The particles will move to another place when it was clicked. But, it not really  click and tween and just a simple click particle. Therefore, I have look through some tween tutorials and continue work on it. Since the particles can be clicked, i just need to solve the tween problem from now. 

(Year 3 Sem C) Week 10 Consultation with Mervin

Today, I am having a user testing with Mervin.Below is the feedback from Mervin:

• The message isn't direct and not understanding.
• What is the element that makes you calm?

Content Part:

• About and Issues can be designed on the same page.
• Typo better used HTML text.
• The image is not really relevant to the content page. 

Technical Part:

• Try to test on the tween js
• PHP -How PHP redirect to another page? 

From the feedback of Mervin and user testing, I need to refine the web page. 

(Year 3 Sem C) Week 10 Working on the database Part 3

Since the data failed to be showed at the user testing moment, therefore I decided to work on the database again.

For this time, the data can be connected and inserted successfully.But, the data still haven't shown out. 

Therefore, I decided to change another way to insert and show data. Besides, I also ask questions from Stack Overflow. 

From here, I get the answer from Stack Overflow. After I apply the mysql_close (); to the bottom part of the code. The data can be showed on the website. 

TADAA Data can be showed successfully! :D 

Besides working on the database, I decided to focus on the interaction. 

References:

webpage, D. (2017). Displaying data from PHP to webpage. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/41658262/displaying-data-from-php-to-webpage?noredirect=1#comment70515272_41658262 [Accessed 16 Jan. 2017].

YouTube. (2017). Displaying records from a MySQL Database with PHP. [online] Available at: https://www.youtube.com/watch?v=IHdd02IK2Jg [Accessed 16 Jan. 2017].

YouTube. (2017). Display Data on Web Page from Database. [online] Available at: https://www.youtube.com/watch?v=HtTG5Kf_mTA&lc=z13awjgwhnjoupfwr04cfpiqkquxshw4riw [Accessed 16 Jan. 2017].

Threejs, T. (2017). Transparent objects in Threejs. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/15994944/transparent-objects-in-threejs [Accessed 16 Jan 2017].

(Year 3 Sem C ) Week 9 User Testing

Today is the important day which level four student come to have a user testing for our class. Based on my observation, most of them is not really understand the messages that I wanted to spread out. But, they seem to be interested in the interaction of the website.  Below is the feedback  that has summarized:

Message part

• ·         Some of them are understood but some of them are confused how the message been spread.
• ·         Message not really strong enough.
• ·         Message is simple. Cannot see relevant between designs, technical and message.
• ·         Research on topic need to improve, extend the research on it
•        The   Spreading good message is not shown out.
• ·         Message is not really explained by step by step but just jump into the point. 

Design part

•     The heart shape line is odd, perhaps can lower the opacity.
• ·         Not really user-friendly.
• ·         Quite primitive, and does show out some aesthetic consideration but not really seem to be mature.
• ·         Visual is quite simple and basic. There is room for the improvement in typography, graphic treatments and etc. Can make it turns out to be more dynamic like shallow color to deep color.
• ·         Look like dating website. And it must be a positive looking website which can help to support and provide help for the human.
• ·         Make the visual more calming and is not help too much for the user.
• ·         Visual don’t enhance the content of the website and not contribute to the meaningful experience. The first page is too plain and needs to use the first page as a page that provides the meaningful message to the user. Image from the homepage is not really helpful to the content that I want to show out.
• ·         Fonts are hard to be seen.     

      Navigation and Program

• ·         Lack of interaction
• ·         Apply sound or music.
• ·         There is the limit for the user to interact with the website. Develop the strong experience that has a connection with emotion.
• ·         Go back button or stop button navigation button.
• ·         Instead of put the “PLAY” and “WRITE ” button on the first page, both of them can put on the title page and make it more straight forward.
• ·         Fade in the fade out of the message is too fast and I would like to know what that is.
• ·         The title name for the homepage is too small makes it to the bigger size or medium size.
• ·         The page sequence is not really consistent. Maybe can show the bubble page for the user. Then, just show the page where a user can write the message. Also, can apply the start button at the “HOW TO PLAY “page instead of applying at the title there.
• ·         The instruction makes it more animated and interesting. 

Helpful?

• ·         Let the people that suffer from depression express out their voice
• ·         The artifact has simplified the issues and don’t have a solution for it. 

   The conclusion for the feedback:

    Message Part

     Most of the users don’t really understand the message and they also wonder if the message provided is true. The message is quite straight forward and jumps to the point directly. Not really consider explaining as step by step.

    Design Part 

      Some of the users seem the visual as to be a dating website or a valentine feel website. But, some of them feel calm and comfortable when looking through the website. Perhaps there has a different opinion. But, it can seem that most of them is not really satisfied with the visual and is hoping for more.

    Navigation and Program

      Most of the user is confused on where to click and interact with the website. They feel lost when interacting with the website. Most probably is I haven’t done so much in the interaction for the heart shape like how to interact. Therefore, I NEED TO MOVE FASTER AND WORK ON THE IMPORTANT PART WHICH IS MY INTERACTION. And also might add in some sound or music in the website to attract the user..? 

    

(Year 3 Sem C ) Week 9 Preparation for User Testing Part 2

Today, I have prepared for the consent questionnaire and a consent form.Besides, I decided to work on the website. Hopefully, my data can be shown after I apply the PHP coding. Based on the tutorial, I get to know how the data being stored in. Here is the step:

Step 1: connect to the server
Step 2: connect to the database
Step 3: query the database
Step 4: fetch the result from the database and convert them into an array.

I try to apply the code by following the step. Hopefully, the data can be shown out.

Here is how I select the data from the database. It seems that the data can be inserted but it fail to show out from the website.

References:

W3schools.com. (2017). Tryit Editor v2.2 - Show PHP. [online] Available at: http://www.w3schools.com/php/showphpfile.asp?filename=demo_db_select_oo [Accessed 13 Jan. 2017].

YouTube. (2017). PHP Tutorial - Connecting to MYSQL, Getting Data and Displaying in a Web Page. [online] Available at: https://www.youtube.com/watch?v=Zz9CnB47TLA [Accessed 13 Jan. 2017].

YouTube. (2017). Display Data on Web Page from Database. [online] Available at: https://www.youtube.com/watch?v=HtTG5Kf_mTA [Accessed 13 Jan. 2017].

(Year 3 Sem C) Week 9 Preparation for User Testing Part 1

Since Friday will be the user test,  I decided to change the interaction to clickable content since I need to focus on the most important part. Besides, I also decided to apply a bit of bootstrap element on my website. 

For this page, I have applied the image that I wanted on the website. This page show out the step on how the user interacts with the website.

Besides, I also find some tutorials on how to apply the image to the button. Follow up the page done, I connected them back together. 

References:

Getbootstrap.com. (2017). Carousel Template for Bootstrap. [online] Available at: http://getbootstrap.com/examples/carousel/ [Accessed 11 Jan. 2017].

The Official Forums for Microsoft ASP.NET. (2017). Position of ImageButton. [online] Available at: https://forums.asp.net/t/1504475.aspx?Position+of+ImageButton+ [Accessed  11 Jan. 2017].

type=“button”?, H. (2017). HTML / CSS How to add image icon to input type="button"?. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button [Accessed 11 Jan. 2017].

(Year 3 Sem C) Week 8 Consultation with Mervin

Before having a consultation with Mervin, I have look through again the comments from the email.

Feedback from email: 

• It is not advisable to use the template as it is. If you decide to use Bootstrap (or similar framework), you will need to do a full overhaul of the interface to match your design.

Besides, I also told him that my data can be inserted successfully. Mervin has provided the step that how data can be stored and showed out. 

• Step 1
  • To ensure you have created a database on your server through phpMyAdmin
  • To ensure you have created a user with password through phpMyAdmin
  • To ensure you have added the new user into the new database
  • To ensure that you can connect to database via PHP without error
• Step 2
  • To ensure you can send data from HTML using Javascript/jQuery and save it into the database via PHP
  • Once data are saved, ensure it is correctly stored inside the mySQL database
• Step 3
• to ensure once you have successfully storing data from database, you need to "get/retrieve" it and display it on your page
• You can use that using Javascript/jQuery

Feedback from Mervin Consultation:

Since data can be stored in MySQL database, therefore I decided to ask Mervin how to use PHP code to show the data. Besides, I also decided to work on bootstrap for my homepage.

Here is the feedback from Mervin:

• Create different file to store and get data from MySQL database such as different two forms: one file is to submit data and another is to show data.
• If want to use bootstrap, make sure the content is stored in a container.
• Use .post/ ajax query for PHP & JavaScript.
• Focus on the important part from your website and quickly done it.

(Year 3 Sem C) Week 8 Homepage for Website

Before start to apply coding to the bootstrap homepage, I have designed the website in Adobe Photoshop. Below is the complete design:

To confirm the homepage is accepted. I have emailed Mervin about it.  Besides doing PHP for my website, the homepage is also an important element in the website. I decided to use bootstrap to work for my website. The bootstrap template is downloaded from a website and I  followed the tutorial from Youtube and work on my website.  Besides, I also play around with <container>,<row>,<col-md(change based on the size)-12> in Adobe Dreamweaver.

References:

Mark Otto, a. (2017). Getting started · Bootstrap. [online] Getbootstrap.com. Available at: http://getbootstrap.com/getting-started/ [Accessed 3 Jan. 2017].

YouTube. (2017). Bootstrap Tutorial | Bootstrap Tutorial for Beginners. [online] Available at: https://www.youtube.com/watch?v=aTLRdrRQyN4 [Accessed 3 Jan. 2017].

(Year 3 Sem C ) Week 8 Working on Database Part 2

Today I decided to continue on working with the database which applies the "INSERT" data to the PHP file. This time I try a different way to insert data from the database. I have separated two different files. One is connected to the server another functions for insert data. 

By separating two files, the data can be inserted successfully. 

Therefore, I decided to combine two files together and observe how it works. But, I change the value to $_POST[Name] and $_POST[Message] because the message needs to be stored randomly. Besides, I also add in echo '1 record added'  to make sure the data is really connected. 

After that, I try to write the code and submit. 

But, it seems that the message still cannot be submitted. And the column of the message keep appear blank.

Therefore, I decided to ask question at Stackoverflow. 

Above is the answer that I get from different people. The problem is coming from the "FORM" because I don't close the "FORM" bracket. After I adjust the place of the "FORM", the data can be inserted. 

And the data is inserted successfully! :) 

Reference:

YouTube. (2017). How to insert data into MySQL Database using PHP. [online] Available at: https://www.youtube.com/watch?v=-DD7eVeFWiE [Accessed 1 Jan. 2017].

People.cs.ksu.edu. (2017). An example to insert some data in to the MySQL database using PHP. [online] Available at: http://people.cs.ksu.edu/~hankley/d764/tut06/GopisettyPHP.html [Accessed 1 Jan. 2017].

method, I. (2017). Inserting datafrom form into mysql with POST method. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/20305699/inserting-datafrom-form-into-mysql-with-post-method [Accessed 1 Jan. 2017].

YouTube. (2017). How to Create an HTML Form That Stores Data in a MySQL Database Using PHP Part 4 of 4. [online] Available at: https://www.youtube.com/watch?v=4HlgO7EY0J4 [Accessed 1 Jan. 2017].

Markle, B. (2017). Using PHP to INSERT data into a database - InMotion Hosting. [online] Inmotionhosting.com. Available at: http://www.inmotionhosting.com/support/edu/website-design/using-php-and-mysql/php-insert-database [Accessed 1 Jan. 2017].

PHP, M. (2017). My SQL data went blank when data is inserted in PHP. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/41410828/my-sql-data-went-blank-when-data-is-inserted-in-php?noredirect=1#comment70025069_41410828 [Accessed 1 Jan. 2017].