(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].