(Year 3 Sem C ) Week 7 Working on Database Part 1

Today, I decided to start and work on MySQL database again. In this moment, I am still confused about the relationship between MySQL, Cpanel, and PHPadmin.  Therefore, I decided to ask Hui San about them. From her explanation, I get to know that Cpanel is page where create a database while PHPadmin is a database that created to store data. Below is the step that I followed the tutorial on how to create database: 

The database has successfully created and continue to the next stage.

Now I try to apply PHP code in HTML to work on the data storing function. 

I also have tried to keep testing and debugging the code. I have applied  "My first PHP script" in the PHP code. But, the file failed to appear.After that,it is showed after I remove the /public HTML/ function.

Before connected to the database, I will have to make sure the PHP file also connected with  MySQL server (PHPadmin ). By that, I will need to connect to my localhost, username, password and the created database. To make sure the file is connected with the server, I decided to write code as below: 

      

      echo 'connected successfully ';

      

The word is showed and it means the data is connected. Therefore, I started to insert data in the PHP file. 

To make sure the data can be inserted into the database , I have applied code such as below:

 echo  ' data inserted successfully ';

The words is showed but the data failed to inserted in the database. 

Besides, I also feel thankful to Hui San because  she keep teaching me on how to solve the error and how to apply code in the PHP. Thank you Hui San!:) 

Reference:

YouTube. (2016). MySQL Database Tutorial - 3 - Creating a Database. [online] Available at: https://www.youtube.com/watch?v=O4SIpJMH7po&index=3&list=PL32BC9C878BA72085 [Accessed 28 Dec. 2016].

YouTube. (2016). PHP MySQL Contacts Database - Setup - YouTube. [online] Available at: https://www.youtube.com/watch?v=O9HamXxGzls [Accessed 28 Dec. 2016].

YouTube. (2016). create MySQL database, tables and insert data using PHP functions. [online] Available at: https://www.youtube.com/watch?v=5QHBj4brHNM [Accessed 28 Dec. 2016].

YouTube. (2016). Creating and adding data to a database PHPMyAdmin. [online] Available at: https://www.youtube.com/watch?v=eWMTXEZGZTc [Accessed 28 Dec. 2016].

(Year 3 Sem C) Week 6 Consultation with Mervin

For the consultation, I decided to show the workflow and progress for Mervin. The questions that I want to ask Mervin are:

1) What is the difference between MySQL and XAMPP?

2) The feedback from the previous presentation

Based on the explanation from Mervin and Hui San, I get to know what is the different between MySQL and XAMPP.

Here is the process on how the information from the PHP is transfer to MySQL and send to the website. PHP is where the place that store the database.  Besides, it is not necessary to apply XAMPP in the process because the function of XAMPP is to text data at offline moment. MySQL is the important software that apply PHP into online mode. 

It seems that the process is still stuck from the last process.Actually I am having the problem in making decision. I am a bit messed up in the direction like should I continue on the animation or at the database. Mervin has given some suggestion for me and ask  to check out PHP admin after done enter the data to the website. Hopefully I can figure it out as soon as possible. 

(Year 3 Sem C) Week 6 Alpha Test

Besides getting feedback from the presentation, I decide to work on Alpha test because I need more information on how to improve my website.

Most of the feedback is as below:

1) The design is looked like valentine feel and the interaction is normal and bold.

2) There have serious glitch programming issues in the website such as the particles of the scene has off the scene.

3) The interaction is weak as the scene will changed randomly when is clicked . 

4) Weak of instruction such as don't have a homepage to show what us WAO. 

5) The text is hard to be read and seen. 

6) Consider to make the website more interesting. 

Based on the feedback, there have many things that I need to refine for the website. The most important part is the database which user can write the message and the message can be show out successful. Therefore, I need to work hard and keep testing and debugging the code for the website. 

I NEED TO KEEP GOING AND WORKING ON IT.

(Year 3 Sem C) Week 5 50% Prototype Presentation

This day is an important day which 50 % of the prototype need to be done and presented. The presentation goes well but a problem has appeared which the size of the website is not well wrapped and is off from the original screen.

Some feedback has been provided by Sweii and Giin Yaw:

Sweii:

-Possible to cut down the unnecessary page 

-Try to make refinement to the particles because it still looks so plain.

Ginn Yaw:

-Apply more attractive interaction and let the user feel more positive when interacting with the website.

-Research more at Awwards website.

(Year 3 Sem C) Week 5 Prototype Preparation (Part 5)

Today,  I decided to start working on the database. Before that, I decided to refresh my memory by testing and debugging for  PHP and XML sheet. From my memory, I still remember that an XML sheet will need to create out if need to test for PHP. Therefore, I am watching tutorial from Youtube video on how to apply XML data in PHP.

First, I am creating the database by using notepad. After saved the file, I open it at Adobe Dreamweaver and it turns as a data as below:

After that, I try to apply the XML sheet to the PHP form as below:

<form action="Script/testingphp.php" method="post" name="Contact_Form">

  <p>Name:

  <input name="Name" type="text" />

  </p>

  <p>Age:

  <input name="Age" type="text" />

  </p>

  <p>Message:

    <textarea name="Message"></textarea></p>

  <p><input name="Submit" type="submit" value="Submit" /></p>

  <p><input name="Reset" type="reset" value="Reset" /></p>

</form>

The form action will be the one that calls out the script. Besides, I also create out the contact form to make some testing for the XML sheet. But, it seems this way not really work because the PHP data don't show out. Therefore, I decided to install XAMPP and make a testing for the PHP data. 

Unfortunately, XAMPP is failed to function on my computer. An error has occurred as below:

Something is missing and XAMPP is unable to provide its function properly. 

Leaving this problem aside, I decided to continue working on the prototype that I need to be done. 

Reference Link:

YouTube. (2016). How to insert xml into html in dream weaver. [online] Available at: https://www.youtube.com/watch?v=8KtBzEi8qRE&t=134s [Accessed 12 Dec. 2016].

YouTube. (2016). How to Make a HTML Contact Form with PHP. [online] Available at: https://www.youtube.com/watch?v=Jb7dehE9DqI&t=2s [Accessed 12 Dec. 2016].

YouTube. (2016). PHP Contact Form and Form Validation | Dreamweaver Tutorial - 1 of 2. [online] Available at: https://www.youtube.com/watch?v=fBfXQqDcNSk [Accessed 12 Dec. 2017].

(Year 3 Sem C) Week 4 Consultation With Mervin

Questions: 
1) How to animate particles by using Tween js?
2) What should be prepared for the presentation? A slide? Or just Prototype.

Feedback:
1) Play along with the coding and try to adjust it.
2)Apply more animated scene for the website.
3)Doesn't necessary to work on the slide but at least show the workflow and with interaction.
4) Strat to make testing with the XAMPP and MySQL.

(Year 3 Sem C) Week 4 Prototype Preparation (Part 4)

Since I already have a domain name, I decided to upload the website to the domain by using FileZilla.

FileZilla is a cross- platform free FTP application which consisting Client and Server.This application is available for Windows, Linux, and Mac OS. The client supports for FTP, SFTP, and FTPS.

I started to type in my domain information in the site manager.Then, the file started to transfer from the server to the website.

After the file is completed transfer to the website, I decided to animate the particles by using tween js. I try to apply the coding from below:

function movetoleft(){
//var testing = document.getElementById("testing");
var tween = new TWEEN.Tween({x: 0, y:0, rotation :0})
.to ({x:400,y:0, rotation:90},2000)
.onUpdate ( 

function (){
sphere.style.left = this.x +"px";
}).start ();
}
function animate (){
requestAnimationFrame(animate);
TWEEN.update();
}

But, the particles will not move to left and just stay there.

(Year 3 Sem C) Week 4 Prototyping Preparation (Part 3)

Today, I also continue working on the prototype.

The problem is solved and adjusted by adding float function in CSS. After that,  I try to apply JavaScript to different interaction to the website but I have failed. Therefore, I decided to change it by using jQuery. But, I also failed to make the "Enter" button to make interaction.  In this moment, I decide to post out my problem to Stack Overflow. Here is some reply from Stack Overflow.

 The correct way to call out the function is using ("#Enterbutton") instead of using ("Enterbutton").

$(document).ready(function(){
 $("#Enterbutton").click(function(){   
        alert("The paragraph was clicked.");
});
});

Then, I have added the alert to confirm the paragraph is clicked.

$(document).ready(function(){

 $("#Enterbutton").click(function(){   

        //alert("The paragraph was clicked.");

 $("#Titlepage").fadeOut(1000);

 $("#Enterbutton").fadeOut(1000);

 //$("#Content").show();

 $("#Playbutton").fadeIn(1000);

 $("#Writebutton").fadeIn(1000);

 $("#Content").fadeIn(1000);

});

});

After that, I have added function such as fade in, fade out and show to apply more interaction to the website.
 

From now, the website can be clicked but not really fully interact and it is just a simple interaction like click and play. Therefore, I need to burst up my working process and work harder to the website.

(Year 3 Sem C ) Week 3 Prototyping Preparation(Part 2 )

Today, I continue my process for the technical part. I am facing some problem when working on the prototype. 

As can see from the image above , the heart shape is blocking the sphere. The heart shape will not change the position to backwards no matter how many times I adjust on the CSS or HTML. Therefore, I decided to change to another plan which using coding to draw out the heart shape.

At HTML:
<div class="heart"></div>

At CSS:
.heart {
  width: 100px;
  height: 90px;
  font-size: 50px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  margin:100;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
       border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
     -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
       -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
       -o-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

After that, a heart shape will appear on the screen. After that, I try adjust the size with CSS.

But , I face the problem again. The heart shape keep changing to different kind of shape and  the position will always remain at there.

Therefore, I decided to put this problem aside and focus on the sphere. Below is the step how I create a completed heart shape.

One particles equal to :

    var geometry = new THREE.SphereGeometry( 3, 10, 10 );

    var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );

    sphere = new THREE.Mesh( geometry, material );

     sphere.position.z = -1;

     sphere.position.x = -5

     sphere.position.y = 20

     scene.add( sphere );

The completed heart shape will need 50 more of the coding and each of them is adjusted based on the position math. 

(Year 3 Sem C ) Week 3 Consultation with Mervin

Today I am having consultation with Mervin again.The area that I mostly focus on is at the technical part.

The questions that I have asked are:

• How to move the position of the heart to the center?
• How to change the colour of the sphere?
• Does there anyway to multiply the particles?
• How to make the particles flow randomly instead of flow straight?

Feedback from consultation:

• Play with CSS to adjust the position 
• Refer to the code from Photoshop and apply the code in dreamweaver 
• Better focus on the important part first 
• Apply Greensock GSAP Loop (this.restart)

The image show that the heart has move to center successfully and the the colour of the sphere have changed . From now, the heart shape just need to re-size it and put to the center.

The process is created by using the code:

CSS for heart shape:

  #Heartshape{

 width : 500px;

 height :500px;

 position:absolute;

 z-index:1;

 }

Three js for the colour of the sphere: 

 var material2 = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );

(Year 3 Sem C) Week 3 Prototyping Preparation (Part 1)

Today, I decided to do some testing on three js.

First,I decided to apply the image of the heart shape in the website. I decided to apply back three js that I have used before to the website (Reference Link ) .

As you can see that have a heart shape at the left-top side corner of the image. I keep playing with the heart shape with CSS but the process not really went well. Particles is the main interactive element for my assignment. Therefore, I decided to change the cube to sphere.

Before that, I have searched for the tutorials on how to create the sphere .

Here is the code that created a 3D cube:
 var geometry = new THREE.CubeGeometry( 20, 20, 20);  
 var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );
cubeMesh = new THREE.Mesh(geometry, material );
cubeMesh.position.z = -100;
cubeMesh.position.x = 100;

Replace  the code with Sphere Code:

var geometry = new THREE.SphereGeometry( 3, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere = new THREE.Mesh( geometry, material );

And will come out something as below:

The size of the circle need to be adjusted at this sentences new THREE.SphereGeometry( 3, 10, 10 );

If the sentence new THREE.MeshBasicMaterial( {color: 0xe62fac,} ); change to new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );the sphere will turn out to be 3D size as below:

But, 3D sphere is not really the design that I am looking for. Therefore, I decide to work on the flat design first.


Reference Link

Solutiondesign.com. (2016). WebGL and Three.js: Particles - Blog - sdg. [online] Available at: https://www.solutiondesign.com/blog/-/blogs/webgl-and-three-js-particles [Accessed 25  Nov. 2016].

npm. (2016). three. [online] Available at: https://www.npmjs.com/package/three [Accessed 25 Nov. 2016].

Threejs.org. (2016). three.js / documentation. [online] Available at: https://threejs.org/docs/#Reference/Geometries/SphereGeometry [Accessed 25 Nov. 2016].

(Year 3 Sem C ) Week 2 Consultation with Mervin

Here is some feedback from the consultation:

Design area:

1) Apply drop shadow to the fonts to make the fonts more attractive
2)Consider about the size website when change from laptop to monitor
3)Try apply semi-transparent to the background.

Technical Area:
1) Using PHP to generate data and apply in to the website.
2) Making prototype as soon as possible.

Based on the feedback, the important part that I need to focus on is the design part and also need to produce a working prototype as soon as possible.Looking back to the gantt chart, week 6 should be the day where the 50% of prototype is done. There is still left 3 weeks for me which is quite intense. Therefore, I need to work harder and speed up my process to complete the work.

(Year 3 Sem C) Week 2: Feedback from E-mail

Here is the feedback from Mervin regarding to the questions I ask from e-mail.

Feedback:

• Provide strong rationale for the design decision.
• Work on designing / creating the actual content of the website because the coding might not suitable for the website.
• Focus on the UI elements and control such as main navigation sound on/off 
• Remove the arrow icon from the mockup.
• Apply gradient to the background instead of solid black 
• Work harder to achieve the design mockup
• 
  
• Welcome page
  • Welcome page > Introduction > Ok button to close and continue (Also write the content for Introduction/Instruction)
• Option screen to choose reading mode or writing mode 
• Writing Mode: Title of the section, labels for the input fields such as name, email etc... and submit button, also back button for user returning to main menu
• Writing Mode: Preview of a submitted message, and also a screen for indicating message has been sent to the site
• Reading mode: Show how messages in particles can be clicked, and how the messages will be displayed, including the poster's name too

(Year 3 Sem C) Week 1 : Back to Project

The feedback from the tutor is useful because I can realize where have I missed and continued to work on. Most of them is quite confuse to the part where how user interact with the website. Perhaps I should focus more on the interaction part.

But at first, I decided to start changed my design for the website.

The first design.

The changed design. 

The reason that I changed is the shard make people feel uncomfortable when looking on it. Therefore, I decided to change to the particles. But the interaction will remain as the same. 

Beside, I have send e-mail to Mervin and ask some questions about the web design. 

Week 14 Preparation for pitch presentation

After the submission of the blog, there will have a pitch presentation at 27/8/16. Therefore, some preparation need to be done for the pitch presentation.

Presentation slide

Detail design

I have create a complete web design by using Wix.com 

Here is the link to go through:

http://yukikoying1995.wixsite.com/yukiko

Video for the final step

After that, I am going to do a preparation by doing more rehearsal for the presentation!