~mypsm~: 2012

Sunday, November 25, 2012

Others task on progress

Others task still on progress :

Randomize
Problem update attempt, ss_attempts and ss_id in database

First of all, am so so sorry to my lovely supervisor because dah lama x update blog. But my psm progress going smoothly even stuck somewhere..hehehe!!

1/11/2012 - done demo 1

Demo 1 success with register the game and save the images in database... ^_^

Here the progress of my psm :

1) Game Registration

All draggable image boleh update dalam database and validation also function.
Image yang dipilih tidak bertindan kat pair1 and pair2.
Below is the figure :

Interface register game

After choose image

Chosen Image update at database

2) Login to game

Chosen images during register appear at pair1 based on user username. Username is primary key in database
User can try to login only 3 times
Below is the figures:

chosen Images at pair1

if login failed more than 3 attempts

Problem : Count of attempt in database = 1, did not update untill 3 times.

4) Feedback : all update to database after user answer the question

Feedback in database

5) Shoulder surfing

Account for SS registration - successful update in database

SS Register Account

SS Account update in database

SS login to game

SS Successful login

SS Failed Login

Problem : SS attempt and SS_ID did not update in database

Monday, October 8, 2012

Alhamdulillah..usaha yg tak sia2, walaupun feel like nak muntah tgk coding but finally berjaya mendrag drop kan image..hehehehe happy2!! even byk yg kena improve but yg penting basic tu dh berjaya..

Here the coding and the view :
<head>
<title></title>
<link href="css/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.droppable.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<link href="css/demos.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#group1_a, #group1_b, #group1_c { width: 60; height: 60}
#group1_1, #group1_2, #group1_3 { width: 60; height: 60}
</style>
<script language ="javascript" charset="utf-8" type="text/javascript">
$(document).ready(function () {
$("#group1_a").draggable({ revert: "invalid" });
$("#group1_b").draggable({ revert: "invalid" });
$("#group1_c").draggable({ revert: "invalid" });
$("#group1_d").draggable({ revert: "invalid" });
$("#group1_e").draggable({ revert: "invalid" });
$("#group1_f").draggable({ revert: "invalid" });
$("#group1_g").draggable({ revert: "invalid" });
$("#group1_h").draggable({ revert: "invalid" });
$("#group1_i").draggable({ revert: "invalid" });

$("#group1_1").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_2").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_3").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_4").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_5").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_6").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

});
</script>
<style type="text/css">
.style1
{
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="style1">
<div class="style1">
<br />
WELCOME TO 3 MATCHING PICTURES GAME
</div>
<div id="text" class="style1">
<br />
IMAGE AREA
<br />
</div>
<img src="images/group1/group1_a.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_a" />
<img src="images/group1/group1_b.jpg" width='60' height='60' alt='group1_b' class="box" id="group1_b" />
<img src="images/group1/group1_c.jpg" width='60' height='60' alt='group1_c' class="box" id="group1_c" />
<p>
<img src="images/group1/group1_d.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_d"/>
<img src="images/group1/group1_e.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_e"/>
<img src="images/group1/group1_f.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_f"/>
</p>
<p>
<img src="images/group1/group1_g.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_g"/>
<img src="images/group1/group1_h.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_h"/>
<img src="images/group1/group1_i.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_i"/>
</p>
</div>
<div class="style1">
<br />
PAIR 1
<br />
<img src="" width='60' height='60' alt='' class="box1" id="group1_1" />
<img src="" width='60' height='60' alt='' class="box1" id="group1_2"/>
<img src="" width='60' height='60' alt='' class="box1" id="group1_3"/>
<br />
PAIR 2
<br />
<img src="" width='60' height='60' alt='' class="box1" id="group1_4" />
<img src="" width='60' height='60' alt='' class="box1" id="group1_5"/>
<img src="" width='60' height='60' alt='' class="box1" id="group1_6"/>
<br />
<asp:Button ID="Button1" runat="server" Text="REGISTER" />
<br />
</div>
</form>
</body>
</html>

Next step : Database and how to connect with server ^_@

Thursday, October 4, 2012

Testing Jquery

1st time test jquery..there is result :

Mata bulat2 tgk coding through utube.. here the coding

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="jqueryexample.aspx.vb" Inherits="jqueryexample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
<link href="css/demos.css" rel="stylesheet" type="text/css" />
<script src="js/ui/jquery.ui.tabs.js" type="text/javascript"></script>

<script language ="javascript" type="text/javascript">
$(document).ready(function () {
alert('jquery is reaady now');
});
</script>
</head>
<body>
</body>
</html>

Wednesday, October 3, 2012

sketch yg x cantik.. ^_@

Discussion with sammy yang byk membantu... to understand client and server function. Gambar bwh for masterpage planning.

Bila penat ngadap google so exercise kan tgn wt sketch. Walaupun x cntik but very valuable to me.. hehehehe!!!

1 week progress

27/9/2012 - 3/10/2012

Search coding for core function (Drag drop images)
Make few interface - Masterpage and registration ( general and game)
Explore asp.net and JQuery function

Simple step how to install JQuery in visual studio 2012

Download JQuery at http://jqueryui.com/download
Open visual basic 2010 and open your website or open new website
Make new folder named css and js under your website
After done downloaded JQuery, example : Jquery-ui.1.8.24.custom, inside the folder have sub folder named css, development-bundle, jquery-ui-1.8.24 and js.
Under development-bundle, copy folder theme and demos.css and paste at css folder (at your website solution explorer), copy folder UI and paste under js folder.
Under js, copy jquery-1.8.24.min.js and jquery-ui.1.8.24.custom.min.js (depends on Jquery version) and paste at js folder (at your website solution explorer).

To make more understanding, click on this link http://www.youtube.com/watch?v=OHfo3QjDjGM

What is JQuery?

Jquery adalah code library untuk javascript. kalau secara traditional, nak buat slide scroll image, kita kena tulis satu-satu line javascript secara manual. kemudian test sama ada jadi ke tak.. pastu test plak atas browser berlainan dia jalan atau tidak. dengan jquery nih, kita hanya guna function library yang dah dibina (kira javascript framework).

Maknanya kita hanya recall function dan set variable untuk penuhi keperluan kita, script dijalankan terus (minimal time untuk create slide scroll). dan dia adalah crossbrowser. maknanya dah tak perlu nak check compatible tak dengan semua browser. antara library javascript yang lain, mcm ExtJS, mootools.. tapi yang paling femes adalah JQuery.

* Banyak benda lg yg perlu diexplore.. ^_^ fighting!!!!

27/9/2012 - 2nd Meeting

For 2nd Meeting is special meeting..hehehehe bcz meeting with all fellows under my sv. That was great discussion even.

Important note have to remember :

Plan well your psm schedule
Every weekly meeting have to show some progress
doing experiment 1 before final experiment
Plan to built up server for final experiment
Make sure put reference supporting for your thesis

My Action :

Focus on core coding and interface - Drag and drop images
Pesanan dr Sammy yg banyak membantu " U setlekan yang core dulu, yg lain2 mcm general registration, feedback, login...etc byk contoh so x perlu risau. Focus kat core function"

Core Function :

Game registration - how to drag and drop images from pair 1 to pair 2.
Understand about Jquery and explore asp.net 2010.

Done for installation asp.net 2010 without problem but my lappy turn to slow.. gelak sorang2!!!

FYP JOURNEY BEGINS

Welcome back to PSM2 aka FYP ^_^

Smile before start writing..hehehe coz dah lama x menjadi blogger..hahahahaha!!!

Ok now dah ready nak writing..Firstly new sem started on 10/9/2012 and 1st time jmp sv this semester on 13/9/2012. Not much discussion but come out with new things for my project.

Discussion on 13/9/2012

About report aka thesis - additional chapter which is chapter 5 for analysis experiment and chapter 6 for conclusion
Correction writing for psm1 report - focus on chapter 3 (Methodology)
Design interface - make it easy to understand for user.

Software using : Asp.net - vb

~mypsm~