Programming Projects

Drawing Simple Graphics With HTML 5 Canvas

noreply@blogger.com (Noli Funcion) — Fri, 09 Dec 2011 17:44:00 +0000

I'm pretty amazed at what HTML 5 Canvas can do. It's truly revolutionizing web graphics and visualizations. It allows web developers to create and display web graphics on the fly dynamically. It can even do animations and games on the web without using Flash. Not only that, it can even draw 3D graphics! I just had a chance of using it with one of my projects which requires dynamic display of graphics based on user-selected criteria. The API is so easy to use, very intuitive and most importantly, all of the major browsers already supported it.

In this post, I'll show you how to draw simple graphics with this API. HTML 5 Canvas is an HTML tag that you can embed inside an HTML document. Here's a sample html document containing the canvas element:

  
    <!DOCTYPE HTML>
     <html>
      <body>
       <canvas id="canvasId" width="578" height="200">
            </canvas>
      </body>
   </html>

With the element declared in the html, you can then create a JavaScript script to retrieve that canvas element and create a 2D or 3D drawing context like this:

  
    window.onload = function(){
       var canvas = document.getElementById("canvasId");
       var context = canvas.getContext("2d");
       // draw anything here 
};

Drawing A Line

To draw a line, you need first to set the lineWidth (line thickness) and strokeStyle (line color). Then you need to tell the drawing context to move from the starting point to the ending point in pixels like so:

  
// set the line thickness to 5 pixels
context.lineWidth = 5;
// set the line color to red
context.strokeStyle = "red";
 // position the drawing cursor
context.moveTo(40, canvas.height - 40);
// draw the line
context.lineTo(canvas.width - 40, 40);
// make the line visible with the stroke function:
context.stroke();
};

Here's the screenshot of the drawn line as being displayed in FireFox:

Drawing An Arc

To draw an arc, you need first to set the lineWidth (line thickness) and strokeStyle (line color). Then you need call the arc function from the drawing context specifying the center location, radius, starting angle, ending angle and draw direction like so:

context.arc(centerX,centerY, radius, startingAngle,
endingAngle,counterclockwise);

  
context.lineWidth = 15;
context.strokeStyle = "red"; // line color
context.arc(canvas.width / 2, canvas.height / 2 + 40, 80, 1.1 *
Math.PI, 1.9 * Math.PI, false);
context.stroke();

};

Here's the screenshot of the drawn arc as being displayed in FireFox:

Drawing A Rectangle

To draw a rectangle, you need to call the rect function of the drawing context specifying the center location x and y,width and height. Then you need to specify the fillStyle (rectangle's fill color), lineWidth (line thickness) and strokeStyle (line color). You need to call fill() and stroke() to execute the fill and stroke drawing respectively like so:

context.rect(x,y,width,height);

  
context.rect(canvas.width / 2 - 100, canvas.height / 2 - 50,
200, 100);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
};

Here's the screenshot of the drawn rectangle as being displayed in FireFox:

Drawing A Circle

To draw a circle, you can use the arc function above with the starting angle set to zero and the ending angle set to 2PI like so:

  
context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 *
Math.PI, false);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
};
};

Here's the screenshot of the drawn circle as being displayed in FireFox:

Drawing An Image

Canvas can be used to draw an image based on an image file from disk. All you need to do is to create an image object, set the source of the image to an image from file. Then you need to create an onload handler for the image that will trigger once the image is loaded. Inside the handler, you tell the context to draw the image and the location x and y in pixels.

  
var imageObj = new Image();
imageObj.onload = function(){
  var destX = canvas.width / 2 - this.width / 2;
  var destY = canvas.height / 2 - this.height / 2;
  context.drawImage(this, destX, destY);
};
imageObj.src = "pitchlocations.jpg";

Here's the screenshot of the drawn image with dynamically generated balls from my project as being displayed in FireFox:

This API is rockin' dude and we're only scratching the surface here. There's still a lot to learn! This topic is so broad it can easily fill a book. Just find other documentations to see how the other graphics are created, and how animations, videos and the fantastic 3D rendering are done. Hope you learn something from here.

Demystifying CSS Selectors

noreply@blogger.com (Noli Funcion) — Fri, 25 Nov 2011 23:31:00 +0000

When learning the intricacies of CSS, it's very important that you are familiar with its different CSS Selectors. Mastering CSS Selectors is very useful as you can also use what you've learned in Jquery selection. In this post, I'll tackle all the available CSS selectors including selectors available only in CSS3.

Universal Selector

Pattern: *

Sample:

* {margin: 0px;}
div * {margin: 0px;}

<body>
    <div>
        <p>Hello World!<p>
    </div>
</body>

This selector matches any elements. The 1st css line selects all elements - body,div, and p. The 2nd css line selects the descendant of the div element - p.

Type Selector

Pattern: element1

Sample:

h3{padding: 0px;}
p {font-size: 1em;}

<body>
   <div>
      <h3>My Blog</h3>
      <p>Hello world!</p>
      <p>Im the King!</p>
   </div>
</body>

This selector matches all the elements of the specified type. In the 1st css line, it selects the header3 (h3) element, while in the second css line, it selects the 2 paragraph (p) elements.

Descendant Selector

Pattern: element1 element2

Sample:

body div {font-size: 12em;}
table tr td {color: purple;}

<body>
   <div>
      <table>
          <tbody>
              <tr> <td>Data1</td>  </tr>
               <tr> <td>Data2</td>  </tr>
          </tbody>
      </table>
   </div>
</body>

This selector matches all the descendant elements. A descendant can be a child, grandchild, great-grandchild,etc. In the 1st line, it selects the div element which is a descendant(child) of the body element, while in the second line, it selects all the td elements that are descendants of both the tr element (child) and table element (grandchild).

Child Selector

Pattern: element1 > element2

Sample:

div > span {background-color: blue;}
ul > li {font-size: 1.1em;}

<body>
   <div>
      <h1>My Blogs</h1>
      <span>Blog descriptions...</span>
      <ul>
         <li>Blog <span>item 1</span></li>
         <li>Blog <span>item 2</span></li>
      </ul>
   </div>   
</body>

This selector matches all the child elements. In the 1st line, it selects one span element which is a child of the div element, while in the second line, it selects all the 2 list (li) elements that are children of the unordered list (ul) element.

Adjacent Sibling Selector

Pattern: element1 + element2

Sample:

table + p {margin-left: 2.5em;}
h1 + span {margin-right: 0;}

<body>
   <div>
      <h1>Tables</h1>
      <span>first span</span>
      <table></table>      
      <p>first paragraph</p>
      <div>
         <span>span in div</span>
         <p>p in div</p>
      <div>
      <p>2nd paragraph</p>
      <span>2nd span</span> 
   </div>   
</body>

This selector matches the adjacent sibling element. In the 1st line, it selects the first paragraph (p) element which is an adjacent sibling of the table element, while in the second line, it selects the first span element which is an adjacent sibling of the header1 (hl) element.

General Sibling Selector

Pattern: element1 ~ element2

Sample:

table ~ p {margin-left: 2.5em;}
h1 ~ span {margin-right: 0;}

<body>
   <div>
      <h1>Tables</h1>
      <span>first span</span>
      <table></table>      
      <p>first paragraph</p>
      <div>
         <span>span in div</span>
         <p>p in div</p>
      <div>
      <p>2nd paragraph</p>
      <span>2nd span</span> 
   </div>   
</body>

This selector matches the element that is a sibling of another element. In the 1st line, it selects the first and second paragraphs which are both siblings of the table element, while in the second line, it selects the first and second span elements which are both siblings of the h1 element.

Class Selector

Pattern: element1.classname
element1.classname1.classname2

Sample:

p.important {color: red;}
.example {background: green;}
.note.extreme {background: blue;}

<body class="note extreme">
  <p>paragraph with no class</p>
  <p class="important">paragraph with important class</p> 
  <p class="example">paragraph with example class</p>    
  <span class="example">span with example class</span> 
</body>

This selector matches any element that has a class attribute containing the specified values. In the 1st line, it selects the second paragraph (p) element that has an "important" class attribute. The second line selects the third paragraph (p) element and the span element which both have "example" class attribute. The third line selects the body element because it has a class attribute of "note" and "extreme".

ID Selector

Pattern: element1#idname

Sample:

body#home {background: silver;}
#example {background: lime;}

<body id="home">
  <p>paragraph with no id</p>
  <p id="example">paragraph with id</p> 
</body>

This selector matches an element with the specified id attribute. In the 1st line, it selects the body element which has a "home" id attribute while in the second line, it matches the 2nd paragraph (p) element which has an "example" id attribute.

Simple Attribute Selector

Pattern: element1[attr]

Sample:

a[class] {border: 2px dotted blue;}}

<body>
  <a>anchor element with no class attribute</a>
  <a class="any">anchor element with class attribute</a>
  <a class="important">anchor element with important class  attribute</a>
  <a class="important enemy">last anchor element</a>
</body>

This selector matches an element if the specified attribute is present regardless of the attribute's value. In the css line, it selects all except the first anchor (a) element which have a "class" attribute.

Exact Attribute Selector

Pattern: element1[attr="value"]

Sample:

a[class="important"] {color: blue;}

<body>
  <a>anchor element with no class attribute</a>
  <a class="any">anchor element with class attribute</a>
  <a class="important">anchor element with important class  attribute</a>
  <a class="important enemy">last anchor element</a>
</body>

This selector matches an element if its complete attribute value corresponds to the specified value. In the css line, it selects the third anchor (a) element as it exactly matches the "important" attribute value.

Partial Attribute Selector

Pattern: element1[attr~="value"]

Sample:

a[class~="important"] {color: blue;}

<body>
  <a>anchor element with no class attribute</a>
  <a class="any">anchor element with class attribute</a>
  <a class="important">anchor element with important class  attribute</a>
  <a class="important enemy">last anchor element</a>
</body>

This selector matches an element if a portion of its space-separated attribute values corresponds to the specified value. In the css line, it selects the third and fourth anchor (a) element since both have "important" class attributes.

Beginning Substring Attribute Value Selector

Pattern: element1[attr^="substring"]

Sample:

a[class^="enemy"] {color: blue;}
a[class^="important"] {color: red;}

<body>
  <a>anchor element with no class attribute</a>
  <a class="any">anchor element with class attribute</a>
  <a class="important">anchor element with important class  attribute</a>
  <a class="important enemy">last anchor element</a>
</body>

This selector matches any element if its attribute value starts with the specified value. In the 1st css line, it can't select any anchor (a) element because none of the class attributes starts with "enemy". In the second css line, it matches the third and fourth anchor (a) elements.

Ending Substring Attribute Value Selector

Pattern: element1[attr$="substring"]

Sample:

a[class$="enemy"] {color: blue;}
a[class$="important"] {color: red;}

<body>
  <a>anchor element with no class attribute</a>
  <a class="any">anchor element with class attribute</a>
  <a class="important">anchor element with important class  attribute</a>
  <a class="important enemy">last anchor element</a>
</body>

This selector matches any element if its attribute value ends with the specified value. In the 1st css line, it selects the last anchor (a) element because its class attribute ends with "enemy". In the second line, it fails to match any element as there are no anchor elements whose class attributes values ends with "important".

Arbitrary Substring Attribute Value Selector

Pattern: element1[attr*="substring"]

Sample:

a[href*="/myblog"] {text-transform: lowercase;}
p[class*="check-"] {background: green;}

<body>
  <a>anchor element with no class attribute</a>
  <a class="any">anchor element with class attribute</a>
  <a class="important">anchor element with important class  attribute</a>
  <a class="important enemy">last anchor element</a>
</body>

This selector matches any element if its attribute value contains the specified value. In the 1st line, it selects any anchor (a) element if its href attribute value contains "/myblog", i.e., it matches "page/myblog" or "/myblog/page" or "page1/myblog/details". In the second line, it matches any paragraph (p) element if its class attribute value contains "check-", i.e., it matches "check-me" or "allcheck-" or "allcheck-me".

Language Attribute Selector

Pattern: element1[lang|="lc"]

Sample:

html[lang|="tr"] {color: red;}

<html lang="tr-en-cs">
  <body>  
  </body>
<html>

This selector matches any element with a lang attribute that contains hyphen-separated list of values and the first value corresponds with the specified value. In the css line, it selects a html element if the html's "lang" attribute contains hyphen-separaed list of values starting with a "tr" value, i.e., it matches 'lang="tr-en-cs"'.

To be continued...

Avoid Cross-Browser Differences with CSS Reset

noreply@blogger.com (Noli Funcion) — Fri, 25 Nov 2011 15:06:00 +0000

The number of internet browsers available today are increasing with Internet Explorer, Firefox, Google Chrome, Opera, and Safari as the Big 5 leading the pack. When designing web pages, one needs to make sure that the pages display uniformly on all the browsers. One problem is that these browsers have different default styles. There are no standard default styles for margin, padding, background colors,etc. so each browser naturally displays differently from each other.

One way to correct this problem is to use a CSS Reset. With CSS Reset, you basically create a baseline css styles such that all the browser's different styles will be reset and be uniform to the baseline style. For example, setting margin=0 in your css reset document changes all the browsers' different margin values to 0. This way, all the browsers will have the same margin style initially and you can change the margins later on and you can expect that it will displayed uniformly across all the browsers.

My favorite CSS Reset is created by Eric Meyer. It is currently in version 2.0 and can be used for free in your projects.You can grab a copy of the file here.


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

How To Determine The Generated SQL Queries In Entity Framework 4

noreply@blogger.com (Noli Funcion) — Mon, 22 Aug 2011 17:21:00 +0000

With the help of Entity Framework, you may never write a single SQL Query code in your programming projects. Some of the benefits of Entity framework include:

Visual Studio intellisense

Compile checking
Faster development

Auto generated domain objects
Lazy loading, etc.

However, sometimes you need to know how Entity Framework translates your LINQ Query into a SQL Query. You can't just trust the framework to correctly formulate the Query. If you are concerned about scalability and performance, you need to check and analyze the underlying query and if possible modify or refine it to increase querying speed and performance.

The easiest way to view the generated SQL is to use a profiler tool that's included in database management tools (for instance, SQL Server Manangement Studio). Using this tool, you can monitor all SQL statements executed against the database. But using this tool requires that you have access to the database. Fortunately, with Entity Framework 4, you can use ObjectSet class's ToTraceString method.

Here's the example code on how to do it in C# and VB.NET:

C#:

var result = ctx.Orders.Where(o =&gt; o.Date.Year == DateTime.Now.Year);
var SQL = (result as ObjectQuery).ToTraceString();

VB:

Dim result = ctx.Orders.Where(Function(o) o.Date.Year = DateTime.Now.Year)
Dim SQL = TryCast(result, ObjectQuery).ToTraceString()

Sending Automated SQL Server Notification Emails

noreply@blogger.com (Noli Funcion) — Thu, 04 Aug 2011 17:58:00 +0000

One of our clients asked today to be automatically notified through email if a failure in the regularly scheduled jobs in SQL Server occurs. This seems like a pizza cake (yummy!) considering that sending email is common and I'm sure I can find lots of information on the internet on how to achieve this in SQL Server.

The task was simple but unfortunately it took me the whole day to configure the Server. Information was available on the internet and I seem to be following the instructions correctly to the letter. But somehow, the feeling of success and being able to shout Yes! did not occur immediately and the simple task became a nightmare of trial and errors which left me wondering whether working in the office instead of working at home is better.

Now to the main course, in order for SQL Server to be able to send emails, the Database Mail must be enabled and configured. The Database Mail is available only for versions higher than the SQL Server Express Editions. First, you need to open SQL Server Management Studio and connect to the SQL Server Database. Once connected, go to the Object Explorer window and under the Management folder, right click Database Mail and select "Configure Database Mail".

When the initial screen shows, click Next.

In the "Select Configuation Task" Window, select "Setup Database Mail" option.

In the "New Profile" window, specify the Profile Name and Description in the designated text boxes and then click "Add".

In the "Add Account To Profile", select an account to add to the Profile you've created earlier or you can click "New Account" to create a new account.

When you create a new account, the "New Database Mail Account" window opens. specify the account name and description, then specify the the Outgoing Mail Server (SMTP) configuration and its authentication. Here, you need to be able to know the SMTP settings that your company uses. Then click OK. You will be taken back to the "New Profile" window earlier but with a new SMTP account specified. Click next.

In the "Manage Profile Security" window, click the Option to make your profile public and available. Click Next.

In the "Configure System Parameters" window, you can leave the default settings and click Next.

Then click Finish.

The Database Mail is now configured. You can check if you've configured it correctly by right-clicking on the Database Mail in Object Explorer and select "Send Test Email". Provide the email of the recipient and click Send. If the email is received, then pat yourself in the back because you're already halfway passed the work to be made.

We need to be able to use Notification Email in SQL Agent. To do that, you need to specify the "Operator" or the list of emails that can be the recipient of the email Notifications.
In the Object Explorer again, under the SQL Server Agent node, right click the folder Operators and select "New Operator".

In the "New Operator" window, specify the name of the Operator. Put the email recipients separated by semicolon in E-mail name text box. Click OK.

Then you need to enable the mail profile in SQL Server Agent properties. After enabling, restart the SQL Server Agent.

And finally, you can use the settings you've configured above in your SQL Server Jobs so that it can send email automatically if a job fails to execute. To do that, in the Jobs properties, under Notifications Tab,check email option and specify the operator you want to receive the email and select the event that can trigger the sending of the notification email.

With the above information in hand, I'm sure configuring another email notifications in SQL Server will be a breeze!

Hope this helps,
Noli

Convert Any Web Page To A PDF Document

noreply@blogger.com (Noli Funcion) — Wed, 03 Aug 2011 00:51:00 +0000

There are times when we need a web page to be downloaded and viewed as a PDF document. Web pages display differently based on several factors such as the type and version of browser and size of the computer's screen. To be able to share the web page with other users and ensure that it displays correctly and uniformly regardless of these factors, you can opt to view it as a PDF document.

If you don't have the software to convert a web page to pdf, you can use the tool I've provided here using a little bit of JavaScript and a service from PDFmyURL.com. Just input the url of the web page that you want to download as pdf and click "Generate PDF" button. Make sure though that the url that you input are not "log-in" protected.

PDF, or otherwise known as Portable Document Format, is the de facto standard for printable documents on the web. Most books now are published as a PDF. Ebooks, as they're called, has a few if not many advantages over its HardCover counterpart. To name a few, an Ebook can be searched automatically, you can bring a 5000-page ebook in your pocket, and it can't worn out over time.

A PDF document can be viewed in your PC or Mac using Ebook readers software such as Acrobat Reader, Foxit Reader, Google Chrome,etc. But when you want to read your ebook like a traditional book, a must have is either Amazon's Kindle or Apple's IPad. Both are great for reading pdf documents.

Convert SQL to LINQ

noreply@blogger.com (Noli Funcion) — Tue, 02 Aug 2011 00:57:00 +0000

LINQ (Language Integrated Query) is Microsoft's technology that provides .NET languages the capability to query data of all types. These types include in-memory arrays and collections, databases, XML documents, and more.

LINQ is such a vast topic that you will be better off learning comprehensively by buying a book on this superb technology. I'd highly recommend Steve Eichert's and Fabrice Marguerie's "LINQ in Action" book available in Amazon.

In this post, I'll provide examples for converting SQL queries into LINQ (in VB.NET and C#).
These samples are taken from VB Team's blog: http://blogs.msdn.com/b/vbteam/archive/tags/converting+sql+to+linq/default.aspx. Since all their samples are in VB.NET, I'll include C# for completeness.

SELECT * Query

SQL

SELECT *
FROM CustomerTable

LINQ(VB.NET)

From Contact In CustomerTable

LINQ(C#)

from Contact in CustomerTable
select Contact

SELECT Query

SQL

SELECT Name CustomerName, CustomerID ID
FROM Customers

LINQ(VB.NET)

From cust In Customers _
Select CustomerName = cust.Name, ID = cust.CustomerID _
Order By ID

LINQ(C#)

from cust in Customers
select new(){CustomerName=cust.Name, ID=cust.CustomerID }

SELECT... WHERE Query
SQL

SELECT * FROM CustomerTable
WHERE State = “WA”

LINQ(VB.NET)

From Contact In CustomerTable _
Where Contact.State = “WA”

LINQ(C#)

from Contact in CustomerTable
where Contact.State=="WA"
select Contact

SELECT DISTINCT Query
SQL

SELECT DISTINCT Name, Address
FROM CustomerTable

LINQ(VB.NET)

From Contact In CustomerTable _
Select Contact.Name, Contact.Address _
Distinct

LINQ(C#)

(from Contact in CustomerTable
select new(){Contact.Name,Contact.Address}).Distinct()

AND Operator Query
SQL

SELECT * FROM CustomerTable
WHERE City = “Seattle” AND Zip = “98122”

LINQ(VB.NET)

From Contact In CustomerTable _
Where Contact.City = “Seattle” And Contact.Zip = “98122”

LINQ(C#)

from Contact in CustomerTable
where Contact.City=="Seattle" && Contact.Zip=="98122"
select Contact

BETWEEN Operator Query
SQL

SELECT * FROM OrderTable
WHERE OrderDate BETWEEN ‘Sept-22-2007’ AND ‘Sept-29-2007’

LINQ(VB.NET)

From Shipment In OrderTable _
Where (Shipment.OrderDate > #9/22/2007#) _
    And (Shipment.OrderDate < #9/29/2007#)

LINQ(C#)

from Shipment in OrderTable
where Shipment.OrderDate > new Date(2007,9,22) && 
Shipment.OrderDate <  new Date(2007,9,29)
select Shipment

Order By Query
SQL

SELECT * FROM CustomerTable
ORDER BY Phone

LINQ(VB.NET)

From Contact In CustomerTable _
Order By Contact.Phone

LINQ(C#)

from Contact in CustomerTable
orderby Contact.Phone
select Contact

Order By ASC/DESC Query
SQL

SELECT * FROM CustomerTable
ORDER BY Phone ASC, Name DESC

LINQ(VB.NET)

From Contact In CustomerTable _
Order By Contact.Phone Ascending, Contact.Name Descending

LINQ(C#)

from Contact in CustomerTable
orderby Contact.Phone ascending, Contact.Name descending
select Contact

I'll update this blog later and add more samples...

Import Data From CSV File To SQL Server With Import And Export Wizard

noreply@blogger.com (Noli Funcion) — Mon, 01 Aug 2011 01:31:00 +0000

There are many ways to import data from csv files to SQL Server but the easiest is using SQL Server's Import And Export Wizard. The wizard is very very versatile as it can do both import and export from various different sources and destinations such Microsoft Access, Micorosft Excel, Flat File (csv,text files), and SQL Server among others.
Here's the steps to follow to use the Wizard for importing a csv file to SQL Server:

Open SQL Server Management Studio and connect to the destination database. Right Click the database, select Tasks and click Import Data...
On the opening screen, click Next.
On the "Choose A Data Source Screen", select a Data Source in the combobox. In our case, we're going to choose Flat File Source because we're importing from a csv file. Click "Browse" and find the csv file to be imported. Check the checkbox if the csv data contain columns names in the first row.
Click Columns. Here you can specify the row delimiter and column delimiter. Since we're using a csv file, column delimiter is a comma and row delimiter is a new line.
Click Advanced. Here, you can change the data type for each columns of the csv file. The Wizard detects the type of data and automatically set it for you. But if you think the Wizard is incorrect, you can set the data type manually.
Click Preview to see the preview and check if the settings you have made are correct. Then click Next.
In the "Choose A Destination" window, select a destination in the combobox. In our case, since we are importing to a SQL Server database, we're selecting SQL Server Native Client. Enter the Server Name and Authentication credentials needed for accessing the database. Then click Next.
In the "Select Source Tables and Views" window, check the source you want to import and on the right column select a destination table. For the destination table, you can either select an existing table or a new table.
Click "Edit Mapping". In the "Column Mappings" window, there are 3 options available. "Create destination table" option is selected if you're creating a new table as the destination. If you're importing to an existing table, you can choose either to "Delete rows in existing table" or "Append rows to the destination table". You can also enable to insert identity data - this should be enabled if your source csv file contains Identity data that you want inserted as the row ID in the table. Then you need to check and modify accordingly the Column Mappings between the csv file and destination table. Then click OK and click Next.
In the "Review Data Type Mapping", you can check the mapping results and determine if there are problems and inconsistencies so you can always click Back and modify your settings accordingly. When all is OK, click Next.
In the Run Package, check Run immediately. This will execute Import immediately when you click Finished. If you're using SQL Server version that is higher than the Express edition, you can have the other option of saving the Import steps so you can have the luxury of running it again in the future without the need to perform the previous steps again.
Click Next. In the "Complete the Wizard" steps, the import summary steps are displayed. If these steps are correct, then you can proceed to click Finish to begin importing your data

If you want to be able to save this Import steps, you need to upgrade to a higher version of SQL Server. The saved step is called SSIS package and you can choose to run this package periodically using SQL Server Agent. But that topic is worth another blog page. I'll write about it next time.

Unit Testing With NUnit

noreply@blogger.com (Noli Funcion) — Sun, 31 Jul 2011 01:09:00 +0000

Unit Testing is a methodology in computer programming where the smallest unit of software logic is tested to determine if it's correctly doing what the programmer has designed for it to do. Performing unit tests on the programs can effectively reduce and prevent bugs in the program and improve the coding efficiency of the developer.

Unit Testing requires skill and patience. At the start, performing unit tests may seem to just lengthen the time of coding and double your effort since you now need to write additional codes for testing. But in the long run, as you make myriads of changes to the software to cater to customer's unending demands, unit testing can help a lot as it can easily detect if a logic is broken due to the latest changes in your codes.

There are a lot of Frameworks in .NET that can help the developer perform unit testing easily. One that I like is NUnit. I've used NUnit in one of my projects and it's easy to understand and use. NUnit is an open source product so it's free to use. You can download it from http://www.nunit.org/. When it's installed, it has a Test Runner program that can be used to automatically run your test.

To demonstrate the use of NUnit, I'm going to test the following simple class with its "IsNoteValid" method:

public class Notes
    {       
        public bool IsNoteValid(string note)
        {
            return !string.IsNullOrEmpty(note); 
        }
    }

"IsNoteValid" procedure returns false if its parameter is empty or null and returns true otherwise.

How do we test this code? A unit test usually comprises three main actions: ARRANGE, ACT, and ASSERT.
Arrange is the process of setting up the objects, Act is the processing of calling the procedure under test and Assert is the process of making sure the procedure under test behaves according to its specification. In our case, we are going to test the "IsNoteValid" procedure if it behaves correctly.

Below are the test codes. You can search on the internet for the proper syntax of NUnit but basically in the first Test Procedure, it is just calling the IsNoteValid procedure with a valid parameter and asserting that it must return true. In the second Test Procedure, it is calling the IsNoteValid procedure with an invalid parameter and asserting that it must return false.

       [TestFixture]
        public class NotesTests
        {
            [Test]
            public void IsNoteValid_validNote_ReturnsTrue()
            {
                //arrange
                Notes note = new Notes();
                //act
                bool result = note.IsNoteValid("mynote");
                //assert
                Assert.IsTrue(result, "note should be valid!");
            }

            [Test]
            public void IsNoteValid_invalidNote_ReturnsFalse()
            {
                //arrange
                Notes note = new Notes();
                //act
                bool result = note.IsNoteValid(string.Empty);
                //assert
                Assert.IsFalse(result, "note should be invalid!");
            }
        }

When the Test codes are done, you can run Test Runner, select the assembly .dll of your Test Project and click Run. The Test Runner will display how many tests have passed and failed.

So when at a later time, I need to refactor and modify my Notes codes, all I have to do is Run the Test Runner again to see if it has failed a test. This way, bugs can easily be detected.

First Attempt With WPF

noreply@blogger.com (Noli Funcion) — Sat, 30 Jul 2011 00:18:00 +0000

The Windows Presentation Foundation (WPF) is the latest graphical display system for Windows. Now with version 4, it's the most radical change to hit Windows user interfaces since Windows 95. The underlying technology behind the power of WPF is DirectX. As a result, you can have rich user interface effects such as transparency, anti-aliasing, 3D graphics and hardware acceleration to name a few.
See below for the screenshots of one of my projects with my first attempt in using WPF. Obviously, it did not look as sophisticated given the vast power of WPF for generating great user interfaces. I've found out that you also need to be good on graphics design (which I'm not) to go hand in hand with WPF to successfully create the user interface of your dreams.

ClickBank API in C#

noreply@blogger.com (Noli Funcion) — Fri, 29 Jul 2011 00:02:00 +0000

Founded in 1998, ClickBank is a secure online retail outlet for more than 50,000 digital products and 100,000 active affiliate marketers. Just like Paypal, you can use ClickBank in your websites to handle payment transactions for your customers.

ClickBank publishes an API (a set of programming rules and specifications) for properly using their services. You can read about their API in http://www.clickbank.com/help/account-help/account-tools/clickbank-api/.

The current version of ClickBank’s Service API is: 1.2 and it uses REST for communication through the internet. ClickBanks provide example in C# but it's not detailed and hard to grasp especially if you're still new to REST.

In order to access their API, first you need the Clerk API key and the Developer Key. These keys are used for authorization and security so you must keep these in private and not show these keys to other people.

To acquire Developer and Clerk API keys, simply login to your ClickBank account and go to the Account Settings tab. Then, click “edit” in the Developer and Clerk API Key areas. Each key must be approved, present, and active for successful authentication to occur.

In one of our projects, we use ClickBank's API for determining if a customer's subscription is active and for canceling a customer's subscription.

Determining If A Customer Is Active

To determine if a user is active, you need to use the Orders API. This API's specification is published in https://api.clickbank.com/rest/1.2/orders. And here's how I've coded it in a C# procedure.

private bool IsClickBankAccountActive(string transactionId)
{
             //get authorization key string
            string authorizationKey = "DEV-A32" + ":"
               + "API-1SE";

            //set base uri
            Uri clickBankBaseUri = new Uri(_configuration.ClickBankRestUrl);

            //set uri template
            UriTemplate clickBankUriTemplate = new UriTemplate("/1.2/orders/{receipt}");

            //set complete uri
            Uri clickBankTicketUri = clickBankUriTemplate.BindByPosition(
                clickBankBaseUri, transactionId);

            //create request
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(
                clickBankTicketUri);
            request.Accept = "application/xml";
            request.Headers.Add(HttpRequestHeader.Authorization, authorizationKey);
            request.Method = "HEAD";

            HttpWebResponse response = null;

            //get response
            try
            {
                response = (HttpWebResponse)request.GetResponse();
                HttpStatusCode c = response.StatusCode;
                if (c == HttpStatusCode.NoContent)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
            catch
            {
                return false;
            }

        }
}

Canceling A Customer's Subscription

To cancel a customer's subscription, you need to use the Tickets API. This API's specification is published in https://api.clickbank.com/rest/1.2/tickets .

When you call this Ticket API, it returns a data that determines the status of Ticket and other relevant info.
I've created a TicketData class for representing the data that is returned.

Here's the TicketData class:

public class TicketData
{
        public enum StatusOfTicket
        {
            OPEN = 0,
            REOPEN = 1,
            CLOSED =2
        }

        public enum TypeOfTicket
        {
            TECH_SUPPORT = 0,
            REFUND =1,
            CANCEL=2,
            ORDER_LOOKUP=3,
            ESCALATED=4,
            APPROVAL_AD=5,
            APPROVAL_IMAGE=6,
            APPROVAL_UPSELL=7,
            APPROVAL_CATEGORY_CHANGE=8,
            APPROVAL_MAX_PRICE=9,
            APPROVAL_BLOG_POST=10,
            APPROVAL_PRODUCT=11,
            CATEGORY_SUGGESTION=12,
            BUSINESS_DEVELOPMENT=13,
            ACCT_QUESTION_MARKETING=14,
            ACCT_QUESTION_ACCOUNTS=15,
            ACCT_QUESTION_ACCOUNTING=16,
            APPROVAL_GENERIC=17,
            SPAM=18,
            ABUSE=19

        }

        public int TicketId
        { get; set; }

        public string Receipt
        { get; set; }

        public StatusOfTicket TicketStatus
        { get; set; }

        public TypeOfTicket TicketType
        { get; set; }

}

Also, when cancelling a customer, the API requires a reason on why it's cancelled.
I've coded the reasons in a Dictionary:

//Dictionary for determining cancellation reasons
public Dictionary<string, string> GetCancellationReasons()
{
   Dictionary<string, string> reasons = new Dictionary<string, string>();
   reasons.Add(CancellationReason.ticket_type_cancel_1.ToString(), 
     "I did not receive additional value for the recurring payments");
   reasons.Add(CancellationReason.ticket_type_cancel_2.ToString(), 
     "I was not satisfied with the subscription / Subscription " + 
     "did not meet expectations");
   reasons.Add(CancellationReason.ticket_type_cancel_3.ToString(), 
     "I was unable to get support from the vendor");
   reasons.Add(CancellationReason.ticket_type_cancel_4.ToString(), 
     "Product was not compatible with my computer");
   reasons.Add(CancellationReason.ticket_type_cancel_5.ToString(), 
     "I am unable to afford continuing payments for this subscription");
   reasons.Add(CancellationReason.ticket_type_cancel_6.ToString(), 
     "I did not realize that I accepted the terms for continuing payments");
   reasons.Add(CancellationReason.ticket_type_cancel_7.ToString(), 
     "Other");
   return reasons;
}

And here's the code for cancelling the user's subscription:

//this procedure cancel's the subscription of a customer
public TicketData CancelSubscription(
   string ReceiptNo,CancellationReason reason, String Comment)
{
           
  TicketData responseTicket = null;

  //get cancel reason string
  string cancelReason = reason.ToString().Replace('_', '.');

  //get cancel type string
  string cancelType = CancellationType.cncl.ToString();
            
  //get authorization key string
  string authorizationKey = "DEV-A32" + ":"
     + "API-1SE8";
            
  string cancelComment = string.IsNullOrEmpty(Comment) ? Comment : string.Empty;
            
  //set base uri
  Uri clickBankBaseUri = new Uri(_configuration.ClickBankRestUrl);
            
  //set uri template
  UriTemplate clickBankUriTemplate = new UriTemplate(
   "/1.2/tickets/{receipt}/?type={type}&reason={reason}&comment={comment}");
            
  //set complete uri
  Uri clickBankTicketUri = clickBankUriTemplate.BindByPosition(
     clickBankBaseUri, ReceiptNo, cancelType, cancelReason, cancelComment);

  //create request
  HttpWebRequest request = (HttpWebRequest)WebRequest.Create(
    clickBankTicketUri);
  request.Accept = "application/xml";
  request.Headers.Add(HttpRequestHeader.Authorization, 
    authorizationKey);
  request.Method = "POST";

  HttpWebResponse response = null;

 //get response
 try
  {
     response = (HttpWebResponse)request.GetResponse();
     string responseMessage = string.Empty;

     //Get Stream Response
     using (StreamReader reader = new
      StreamReader(response.GetResponseStream()))
     {
       responseMessage = reader.ReadToEnd();
     }

     //Parse Response using XDOCUMENT
     if (!string.IsNullOrEmpty(responseMessage))
     {
        XDocument document = XDocument.Parse(responseMessage);

        responseTicket = new TicketData();

        responseTicket.TicketId = Convert.ToInt32(document.Element(
           "ticketData").Element("ticketid").Value);
        responseTicket.Receipt = document.Element(
           "ticketData").Element("receipt").Value;
        responseTicket.TicketStatus = (
           Ncf.InsideEdge.Model.TicketData.StatusOfTicket)
           Enum.Parse(typeof(
           Ncf.InsideEdge.Model.TicketData.StatusOfTicket), 
            document.Element(
             "ticketData").Element("status").Value, true);
             responseTicket.TicketType = 
             (Ncf.InsideEdge.Model.TicketData.TypeOfTicket)Enum.Parse(
             typeof(Ncf.InsideEdge.Model.TicketData.TypeOfTicket),
              document.Element(
             "ticketData").Element("type").Value, true);
     }

     }
     catch
     {

     }

    //check response ticket
    if (responseTicket != null && responseTicket.Receipt == ReceiptNo
         && responseTicket.TicketType ==
         Ncf.InsideEdge.Model.TicketData.TypeOfTicket.CANCEL)
    {
        return responseTicket;
    }
    else
    {
        return null;
    }
  }
 }

I hope you find my article useful and it's able to help you understand better how to use RESTFUL Services, specifically the ClickBank API Service.

Creating a VB.NET Web Service in VS 2010

noreply@blogger.com (Noli Funcion) — Thu, 28 Jul 2011 02:13:00 +0000

I was given the task of creating a program to communicate with a web service provided by VideoNext Network Solutions, Inc. There are various ways you can achieve communications in .NET world. For communicatons through internet, you can either use the awesome WCF technology, use the barebones WebRequest Class, etc. For this project, I've used the power of Web Service technology.

It's a little bit tricky to create a Web Service in a Visual Studio 2010 Class Library Project because currently, WCF is the default tool to do it. Anyhow, here's how I do it:

1. First, right click on the Class Library Project in Solution Explorer and click "Add Service Reference".

2. On the Add Service Reference Dialog, click Advance.

3. On the Service Reference Settings, click Add Web Reference.

4. On the Add Web Reference Dialog, type in the URL address box the URL address of the service that you wish to communicate. In my project, URL is http://207.207.160.4:80/axis2/services/EventLogService?wsdl

After you type in the url, if Visual Studio's been able to communicate with the service, it will display the methods available in the service. In my case, there are only 2 methods - event_action and get_events methods.
You can change the Web Reference name if you wish. In my project, I've renamed it from WebReference to EventLogReference.

5. After you've done the above successfully, you should be able to see the EventLogReference in Web References folder.

6. Behind the scenes, Visual Studio automatically generated a lot of codes for you for communicating to the specified service. All you need to do is to use the generated codes and call the appropriate methods.

In my project, Visual Studio generated the EventLogService class. I need to create an instance of this service and call either of the 2 available methods - eventaction and get_events methods. In my project, I will be using the event_action method. Based from the above display, this method requires an ActionRequestType object as a parameter.

Finally, here's the code in VB.NET on how to instantiate the required parameters and call the appropriate method: The code that you use must be based on how the method that you want to call must be called.

'create CREATE ACTION TYPE
Dim actType As ACTIONType = New ACTIONType()
actType.NAME = "create"

'create ACTIONREQUESTType 
Dim actionRequesttype As ACTIONREQUESTType = New ACTIONREQUESTType()
actionRequesttype.ACTION = actType

'call Service
Dim eventLog As EventLogService = New EventLogService()

Dim response As ACTIONRESPONSEType = eventLog.event_action(actionRequesttype)

If Not response Is Nothing AndAlso Not response.ACTIONSTATUS Is Nothing _
   AndAlso Not response.ACTIONSTATUS.PARAM Is Nothing _
   AndAlso response.ACTIONSTATUS.PARAM.Count > 0 _
   Then
   result = response.ACTIONSTATUS.PARAM(0).VALUE
End If

Personal Home Page with MYSQL, DBLINQ and MONO

noreply@blogger.com (Noli Funcion) — Wed, 16 Jun 2010 07:21:00 +0000

I've modified my Personal HomePage such that it can be hosted on a LINUX Environment with APACHE Server. My website is hosted in here but it is on a limited time hosting only. I needed a lifetime free web host but by googling my way around, I found out that all other ASP.NET hosts came with a fee. However, there are promising web hosts in a LINUX Environment that offered free hosting space for ASP.NET using MONO RUNTIME. MONO What???! So, I let google find answers to my questions about MONO and here's what I did to modify my codes to make MONO and LINUX happy:

DATABASE
I changed my Server backend from Microsoft's SQL SERVER to the free but ultra reliable MYSQL. Luckily, MySQL has a Membership provider so, I don't have to implement the Membership myself. (Yes!) I only had to deal with the minor differences with the database's data type incompatibility.

RUNTIME ENVIRONMENT
In order for ASP.NET to work in LINUX, MONO is used. I've installed a MONO IDE to run my website offline and check if there's incompatibility problems. Yeah, there are problems, but with a little tweak here and there and its fine.

LINQ TO SQL
I've used a Repository Pattern and LINQ to SQL for saving my data to database, but unluckily, LINQ to SQL does not work with MYSQL. However, DBLINQ came to the rescue!
DBLINQ is not complete so some modifications to the Repository code is implemented. No problem! (I'll try NHibernate later though...)

DEPLOYMENT
However, deploying it is not smooth sailing. My website is working fine on development machine using MONO Runtime on Wndows machine, but when deployed on LINUX machine, many problems are encountered. Problems included missing .dlls, Security Access, MONO not accepting hashed password and others. However, in every problem, there will always be a solution. So, view in here my website in all its glory...

View page

Personal Homepage Using ASP.NET WITH C#

noreply@blogger.com (Noli Funcion) — Thu, 27 May 2010 08:55:00 +0000

This project uses ASP.NET 3.5 with C#. I have used SQL SERVER 2005 EXPRESS as the backend data provider. I've used a little bit of Domain Driven Design in order to have separation between the repository, services, and presentation logic. I've also used Inversion Of Control, implemented using Structure Map to reduce dependency between the classes.

In this project, I've also used CSS3 feaures for rounding corners and if you're viewing it on browsers not supporting these new features, you will only see rectangle corners.

This project has blogging , photo album, chatting, video, and RSS features.

ABOUT PAGE
- Displays information about this website

ABOUT-PROFILE PAGE
- Displays information about my profile

BLOGS-BLOG CONTENT PAGE
- Displays my blog content.

BLOGS-BLOG LIST PAGE
-Displays list of blogs

BLOGS-MANAGE BLOG PAGE
-Allows me to manage my blog.

BLOGS PAGE
- Displays a list of blogs by category.

CHAT PAGE
-Asks a user for a chat name before the user can use the chat room.

CHAT-CHAT ROOM PAGE
- Allows users to chat.

CHAT-CONTACT PAGE
- Allows users to send me a message.

HOME PAGE
- Displays the home page of the website.

HOME-LOGIN PAGE
- allows the user to log-in.

HOME-WALL PAGE
- Displays my wall.

PHOTOS PAGE
-Displays the photo albums.

PHOTOS - ALBUM PHOTOS
- Displays the photos in the album.

PHOTOS - MANAGE PHOTOS PAGE
-Allows me to add and edit photos.

PHOTOS - SINGLE PHOTO PAGE
-Displays a single photo.

SETTINGS PAGE
- Allows me to set the website settings.

SETTINGS-ACCOUNT PAGE
- Allows me to set my account settings.

SETTINGS - PROFILE PAGE
- Allows me to set my Profile Settings.

Enrollment System Using ASP.NET IN C#

noreply@blogger.com (Noli Funcion) — Wed, 26 May 2010 09:56:00 +0000

This is my project for ASP.NET with C#. This project uses 3-tier and 3-layer architecture to separate the presentation logic, database logic and the business logic of the application.

ENROLLMENT - STEP1 ( REGISTRATION)
- Student submits registration for enrollment.

ENROLLMENT - STEP2 ( REGISTRAR APPROVAL)

- Registrar approves the submitted registration record.

ENROLLMENT - STEP3 ( CLASS SELECTION )
- Student selects class schedules.

ENROLLMENT - STEP4 ( ADVISER APPROVAL )

- Adviser approves class selection record of student.

ENROLLMENT - STEP5 ( ASSESSOR APPROVAL )
- Assessor assesses enrollment fees.

ENROLLMENT - STEP6 ( CASHIER APPROVAL)

- Cashier receives enrollment payment.

ENROLLMENT - STEP7 ( ID ISSUANCE)

- Registrar issues ID Number to new student.

HELP - ABOUT

- Displays information about this website.

HELP - DEMO

- Allows the user to have a demo of the software.

MASTERLIST -CLASS MASTER LIST

- Displays information about the class master list.

MASTERLIST -COURSE MASTER LIST

- Displays information about the course master list.

MASTERLIST -CURRICULUM MASTER LIST

- Displays information about the curriculum master list.

MASTERLIST -FACULTY MASTER LIST

- Displays information about the faculty master list.

MASTERLIST -GRADE MASTER LIST

- Displays information about the grade master list.

MASTERLIST -REQUIREMENT MASTER LIST

- Displays information about the requirement master list.

MASTERLIST -ROOM MASTER LIST

- Displays information about the room master list.

MASTERLIST -STUDENT MASTER LIST

- Displays information about the student master list.

MASTERLIST -SUBJECT MASTER LIST

- Displays information about the subject master list.

SETTINGS-ACCOUNTS

- Allows website admin to set-up user accounts.

SETTINGS-ACCOUNTS-CREATE ACCOUNTS
- Allows website admin to create user accounts.

SETTINGS-ACCOUNTS-CREATE ROLES
- Allows website admin to create user account roles.

SETTINGS-ACCOUNTS
- Allows website admin to set-up curriculum settings.

SETTINGS-DAY SETTINGS
- Allows website admin to set-up day settings.

SETTINGS-PERIOD SETTINGS
- Allows website admin to set-up period settings.

SETTINGS-SCHEDULE SETTINGS
- Allows website admin to set-up schedule settings.

SETTINGS-SEMESTER SETTINGS
- Allows website admin to set-up semester settings.

SETTINGS-TIME SETTINGS
- Allows website admin to set-up time settings.

SETTINGS-YEAR SETTINGS
- Allows website admin to set-up time year settings.

STUDENT -CLASS SCHEDULES

- Displays information about the student's current class schedules.

STUDENT -CURRICULUM

- Displays information about the student's course curriculum.

STUDENT -ENROLLMENT STATUS

- Displays information about the student's enrollment status.

STUDENT -GRADES

- Displays information about the student's grades.

STUDENT -STUDENT RECORD

- Displays information about the student's account.

STUDENT -CLASSES LIST

- Displays information about the student's current class schedules.

TEACHER -INPUT GRADES

- Used by teacher to input grades.

Online Jobsite Using ASP.NET with Visual Basic

noreply@blogger.com (Noli Funcion) — Tue, 25 May 2010 07:12:00 +0000

This is my project using Advanced Visual Basic. This is also my first attempt at making websites using ASP.NET. I've used SQL SERVER EXPRESS 2005 for my back-end data. This projet is an online Jobsite portal where employers can post vacant jobs and applicants can apply for these jobs and post resumes.

HOME PAGE
This is the home page of this project.

LOG-IN PAGE
Applicants and Employers need to log-in so that they can access all the features of this website.

USER PROFILE
In this page, the user profile is displayed in the sidebar if user is logged-in.

LIST OF RESUMES
In this page, the list of active resumes are displayed.

LIST OF JOBS
In this page, the list of active jobs are displayed.

WEBSITE STATISTICS
In this page, the number of posted jobs, resumes, applicants and employers are displayed.

JOBS AND RESUMES SEARCH
Users can do advanced search for jobs and resumes using the search feature in the sidebar.

RESUMES SEARCH RESULTS
In this page, resume search results are displayed.

JOBS SEARCH RESULTS
In this page, job search results are displayed.

JOBS AND RESUMES CATEGORY
Users can browse for jobs and resumes by category using the category selection in the sidebar.

SETTINGS
In this page, applicants and employers can edit their account settings.

POST RESUME
In this page, applicants can create and post resume.

RESUME DETAILS
In this page, applicants can update and view resume details.

POSTED RESUMES
In this page, applicants can view the list of resumes they have posted.

SAVED JOBS
In this page, applicants can view the list of jobs they have saved.

JOB INVITATIONS
In this page, applicants can view the job invitations from companies.

POST JOB
In this page, employers can create and post job.

JOB DETAILS
In this page, employers can update and view job details.

POSTED JOBS
In this page, employers can view the list of jobs they have posted.

SAVED RESUMES
In this page, employers can view the list of resumes they have saved.

JOB APPLICATIONS
In this page, employers can view the job applications for them.

Party Budget Planner Using Java

noreply@blogger.com (Noli Funcion) — Mon, 24 May 2010 07:05:00 +0000

For my project in IT209 Java Programming, I created the Party Budget Planner software. The software is implemented using Java as an applet. This software can be used by companies that provide services for planning and organizing parties. In this project, my fictitious software client is Party Experts Co., Inc.

A. MAIN PAGE

The first page that will display when using this program is the Main Page. From here, the user can select 4 menus:

Add Party – this is used to add, setup and save a new Party.
Edit Party – this is used to edit the details of the saved Parties.
View Party – this is used to view the details of the Party.
Settings – this is used to change the different party supplies and costs.

B. ADD PARTY PAGE

In this page, a custom party will be created by filling up this data:

Party ID – this specifies the Party Identification.
Party Date – this specifies the date of the new custom Party.
Type of Party – this specifies the type of party.
Location – this specifies the Party Location
Number of Guests –this specifies the Number of Guests
Budget Cost – this specifies the Budget Cost

You can select 4 Packages for your budget:

Economy Package – select this option to choose the lowest-priced Party supplies.
Standard Package – select this option to choose the medium-priced Party supplies.
Grand Package – select this option to choose the highest-priced Party supplies.
Others – select this option to specify a specific budget amount. The selected Party supplies will depend on the specified budget amount.

When this party is added, the program will automatically select the party’s themes, entertainment and food menu based on the budget cost. It will also automatically calculate the party’s total cost.

C. EDIT PARTY PAGE

Once a custom party is created using the Add Party Page, the custom party’s Party Supplies such as the Food Menu and Entertainment Type are automatically selected by the program. The party can be customized further using the Edit Party Page.

In the Edit Party Page, you can click the tabbed pane to view the tabbed pages

Main – this will show and allow you to edit the Parties’ main setting.
Theme – this will show and allow you to customize the party’s theme.
Entertainment - this will show and allow you to customize the party’s entertainment.
Venue - this will show and allow you to customize the party’s venue.
Menu - this will show and allow you to customize the party’s food menu.

MAIN PANE

In the Main Pane, you can modify the type of party, date of party, and the number of guests. The number of guests must be a valid integer number greater than 0. The total cost will be automatically calculated.

THEME PANE

In the Theme Pane, you can add or remove the party’s theme by selecting or deselecting the checkboxes. The cost for the theme as well as the total cost is displayed.

ENTERTAINMENT PANE

In the Entertainment Pane, you can add or remove the party’s entertainment by selecting or deselecting the checkboxes. The cost for the entertainment as well as the total cost is displayed.

VENUE PANE

In the Venue Pane, you can add or remove the party’s venue by selecting or deselecting the checkboxes. The cost for the venue as well as the total cost is displayed.

MENU PANE

In the Menu Pane, you can add or remove the party’s Food Menu by selecting or deselecting the checkboxes. The cost for the Food Menu as well as the total cost is displayed.

D. VIEW PARTY PAGE

The View Party Page will show all the final details of the custom party.

E. SETTINGS PAGE

The Settings Page allows you to add, edit, and delete the Themes, Entertainment, Venue and Food Menu that are used in the Program when calculating total party cost and displaying selections.

Library Management System Using Access

noreply@blogger.com (Noli Funcion) — Mon, 24 May 2010 05:50:00 +0000

For my project in IT419 Database Management System, I created the Library Management System software. The software is implemented using Microsoft Access 2007 with Visual Basic for Application for its User Interface and automation. This software can be used in a small school library. With a slight modification, it can also be used in a book borrowing store. In my project, I’ve chosen the University Library of UP Diliman to be my fictitious software client mainly because of its nice logo which fits nicely on my user interface design.

A. THE MAIN FORM

The first form that will display when using this program is the Main Form. From here, the user can select 7 menus:

Login - allows the user to access the program
Search - allows user to search for library items
Check-in - allows user to return borrowed Library items
Check-out - allows user to borrow Library items
Patron - allows user to view his/her personal records
Administration - allows user (the librarian) to add, edit, and delete Library items and user accounts
Reports – allows user (the librarian) to view the different Library reports.

B. THE LOGIN SYSTEM

Using the login menu, the user can access features of the software by providing username and password. The user can access the software as either a Librarian or as a Patron.

Librarian - unlimited access to all features of the program
Patron – can access only the Search and Patron menu

PROGRAM MODES

The program operates in 3 modes:

ANONYMOUS MODE – This mode is activated during startup when users are not yet logged in.
PATRON MODE – This mode is activated when a Library patron is logged in.
LIBRARIAN MODE – This mode is activated when a Librarian is logged in.

C. SEARCH SYSTEM

In this menu, the user can search for a particular library item based on selected search criteria and search text:

The search results will display every item that matched the search text. It also allows you to view the specific details of the library item by clicking on the corresponding details button.

When the Details button is clicked, the Library Item Details Form will show, displaying the particular item’s details.

D. BOOK BORROWING SYSTEM

CHECK-IN FORM

This form is accessible only by a Librarian account and is used when patrons return the borrowed books. The returned item’s ID and copy number can be selected and any fines incurred will be automatically calculated by the software.

CHECK-OUT FORM

This form is accessible only by a Librarian account and is used when patrons borrow books. In order for the Library Item to be borrowed, the borrower’s name and borrowed item’s ID and index number are specified. The Due date is automatically calculated by the software based on the Circulation Type of the borrowed item.

E. ADMINISTRATION SYSTEM

LIBRARY USER MANAGEMENT FORM

This form is accessible only by a Librarian account. In this form, the librarian can add, edit, and delete librarian accounts and librarian groups. The librarian can also add, edit and delete patron accounts and patron groups.

ITEM MANAGEMENT FORM

This form is accessible only by a Librarian account. In this form, the librarian can add, edit, and delete item author, publisher, series, status, subject, media, location and library items.

ACQUISTION FORM

This form is accessible only by a Librarian account. The form is used when a new item is acquired. Acquisition details of the item is inputted, such as the item’s cost, acquisition date, supplier, PO number and the name of the person who received the item.

CIRCULATION FORM

This form is accessible only by a Librarian account. The form is used to view the circulation records which allow the Librarian to modify or create new circulation records without the need to use the Check-in and Check-out Forms.

CIRCULATION TYPE FORM

This form is accessible only by a Librarian account. The librarian can add, edit or remove Circulation Types. The records specified here are used by the program when auto-calculating fines when returning items late.

F. REPORTING SYSTEM

THE REPORTS MENU

The reports menu is accessible only by the librarian and is used to view the different program reports.

DAILY FINES SUMMARY REPORT – displays the summary of fines received for the last 30 days.

LIST OF BORROWED ITEMS REPORT – displays the list of borrowed/unreturned library items.

TOP TEN MOST BORROWED ITEMS REPORT – displays the top ten most borrowed library items.

LIST OF LIBRARY ITEMS BY LOCATION – displays the list of library items grouped by location.

LIST OF PATRONS BY GROUP – displays the list of patrons by group.

LIST OF LIBRARIANS BY GROUP – displays the list of librarians by group.

THE PATRON MENU

The patron menu is accessible only by the patrons and is used to view the Patron Record and Circulation History.

THE PATRON RECORD FORM– Used to display the currently logged on patron’s record details.

THE CIRCULATION HISTORY FORM – Used to display the currently logged on patron’s circulation history.

Birth Registration System Using Visual Basic

noreply@blogger.com (Noli Funcion) — Sat, 22 May 2010 08:54:00 +0000

For my project in IT204 VB.Net Programming subject in Informatics, I created the Birth Registration software. The software is implemented using Visual Basic 2008, Access Database backend and Crystal Reports. This software can be used by a government agency on birth registration services such as the Office of the Civil Registrar.

USER INTERFACES

MAIN MENU FORM – the Main Menu allows access to different features of the program

CHILD BIRTH INFO FORM - allows user to add, edit, and delete child birth records.

ABOUT FORM – displays information about the software.

CERTIFICATE – this is the generated Birth Certificate.

CITY/MUNICIPALITY FORM - allows user to add, edit, and delete city/municipality records.

PROVINCE FORM- allows user to add, edit, and delete province records.

RELIGION FORM- allows user to add, edit, and delete religion records.

USER MANAGEMENT FORM - allows user to add, edit, and delete users.

BookStore Universe HTML Project

noreply@blogger.com (Noli Funcion) — Sat, 22 May 2010 06:47:00 +0000

This project is created for my HTML Subject. Subject requirements are: Project must be made purely using HTML and JavaScript, CSS is not allowed. Since I don't want to design layouts and presentation using HTML but rather with CSS, I've created the design with CSS and then implement the CSS using JavaScript programming. One side effect of this is that the design will not be visible instantly. This is because the javascript will only trigger when all the pictures of the pages are downloaded. This project is my first attempt at creating a Website.

See the completed project here: http://nolifuncion.0fees.net.

I may discuss some of the JavaScript codes for this project in the next articles...

POS Software System Using C (Part 1)

noreply@blogger.com (Noli Funcion) — Thu, 20 May 2010 07:16:00 +0000

This project is made for my C Programming subject in Informatics. The project is a simple POS (Point of Sale) system implemented using the C Program. The software is supposedly used for a fictitious drugstore company in their quest for a better and efficient store system.

I will be separating this into separate articles since it will be too long for a single reading and I'm afraid you may get bored easily. I will begin the discussion on the current system of this company and the new and improved system using the POS software.Then the software's initial screen designs (user interface) and input specifications will be discussed. In the next article, I will be discussing some of the C programming codes on how I've accomplished the user interface and the logic behind the software.

Chapter 1. Analysis and Design

1.1 Current System

ABC Drugstore Company is a medium-scale drugstore located in Colon, Cebu. Its employees include the Cashier that handles cash transactions, Inventory clerks that handle Inventory Management, Sales Persons that handle customer transactions and an Administrator that supervises the operation of the company.

With its steadily growing number of products in their inventory, it is becoming more difficult for its Sales Persons to remember all the product details. The Sales Persons can only remember those products that are common. When a customer asks if a particular product is available, most of the time they have to rely on their resident pharmacist to provide them answers. However, other sales persons don’t bother to inquire and simply say that the item is unavailable. The management are aware of this problem and they are looking for a software solution to provide Query capabilities that can be used by their Sales Persons.

To achieve this, their Inventory System has to be upgraded also. Currently, they use inventory books to list all products that are available and to record its stock quantity and prices. To update these items, the inventory clerks have a big task of searching for the particular record through the big volumes of inventory books. Sometimes, the records are misplaced making it more difficult to update records. Sometimes, duplicate records are created, creating confusions and more mistakes.
Last but not the least of the improvements that need to be done is the cash register. Believe it or not, the cashier still uses this plain old but reliable calculator to compute the total amount purchased. According to the cashier, there are cases that products have wrong price labels. Since her only way of knowing the prices is through the labels, there’s no way to check for this kind of problem. Also, the cashier has to create a list of products purchased so the inventory clerk can manually update the inventory’s stock quantity records. Discrepancy of stock quantity can occur because of this manual updating.

1.2 New System

I was contacted by Management to provide effective solutions to their various problems. Instead of creating separate programs for each problem, it was decided to use an all in one system that can provide all the solution to the problem in a single program. Thus, the POS Software system was created.

To solve the problems of the sales people, the new system has to have a Query System that is capable of searching for a particular product. It must be capable of searching the product by its name or by its maker or by its description. All the sales people need to do is to input the product’s name/maker/description, and then the software shall automatically display all products that matched the search. The search results must display all details of the product.
To solve the problem of the inventory clerks, the record books has to be discarded and replaced with a software database system where products can be electronically added, edited or deleted. Because it software based, it will now be easy to update and search records. Automatic checking will be put in place to prevent duplicate records. Besides, waste in paper resources will be reduced.

To solve the problem of the cashier, the calculator has to go. It must be replaced with a POS system that will be capable of displaying purchased items’ details specially the product’s price. This way, the cashiers can double check the price label if it is accurate. To operate the POS terminal, the cashier needs to input only the barcode and quantity of the product and then the software will automatically calculate the total amount of purchased items. This will reduce the common mistakes associated with using calculator. Also, the software will automatically update the stock quantity of the products, once purchase transaction is done. This will eliminate the need for manual updating of the stock quantity and reduce discrepancy in the quantities.

The software must also have a security access system in place to prevent unauthorized access to the program. Also, the program must have different restrictions for each type of employee. This will prevent employees from accessing the features of the program that they are not allowed to do. For example, the inventory clerks must not be allowed access to the POS terminal. And in the same way, the cashier must not be allowed access to the database of products.

1.3 Program Specification

1.3.1 Screen Design and Input Specification

The login form is used for accessing the software. The user needs to input his username and password, which must be at most 14 ASCII characters.

The change password form is used for changing the user's password. The user needs to input the new password and confirmation password, which must be at most 14 ASCII characters.

The main menu form is used to access the different features of the system. The user only needs to select the desired menu using the arrow keys.

The User Account Form is used to select which actions the user needs in the account menu. The user only needs to select the desired menu using the arrow keys.

The Add Account Form is used to add user accounts. The user needs to input the following:
First Name: at most 14 ASCII characters
Last Name: at most 14 ASCII characters
User Name: at most 14 ASCII characters
Password: at most 14 ASCII characters
Type: select type using arrow keys
Policy: select policy using arrow keys

The Delete Account Form is used to delete accounts. The user can browse to a particular account using the navigation menu or he can enter a string (at most 14 ASCII characters) to search for a particular account .

The Edit Account Form is used to edit the account data. Refer to the Add Account form for the required data.

TheProduct Form is used to select which actions the user needs in the product menu. The user only needs to select the desired menu using the arrow keys.

The Add Product Form is used to add product records. The user needs to input the following:
Product Name: at most 14 ASCII characters
Maker: at most 14 ASCII characters
Description: at most 14 ASCII characters
Barcode: 5 integer characters (0-9)
Price: at most 12 characters (positive decimal)
Quantity: at most 6 charcters (positive integer)

The Delete Product Form is used to delete product records. The user can browse to a particularproduct using the navigation menu or he can enter a string (at most 14 ASCII characters) to search for a particular product.

The Edit Product Form is used to edit the product records. Refer to the Add Product Form for the required data.

The POS Form is used for inputting purchase transactions. The user needs to input the product barcodes (5 integer characters) and purchase quantity (at most 6 positive integer charcters) .

The Query Form is used for searching for a particular product. The user needs to input the query string (at most 14 characters). Searching can be done by Name or by Maker.

I will be discussing the source codes on how all these are accomplished on Part 2 of this article...