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