Read, With the Name of Your Lord Who Created

Posts Tagged ‘Programming’

App.config And Web.config, The Two Configuration Files Story

Posted by triaslama on November 12, 2008

In .NET programming world we govern setting for our program through configuration file (file with .config extension). We use web.config for web application (ASP.NET) and app.config for the rest.

Although both of config files share much similarities but both has difference too. Yes, I realize that many of you maybe already know what is the difference, but I wrote this because just a moment ago I realize one of the difference.

In ASP.NET we can just drop our web.config file in root of our virtual directory and this file will be referenced automatically, as simple as that. When we use app.config file -for example in Windows Forms application- the app.config file need to renamed with the same name as our executable file (or *.dll file for library). In visual studio this thing happen automatically, so when I try it manually (without any of IDE) the problem arise.

I write a very simple Winforms application (lets say I give this Winforms app. as test.cs), I write app.config file too then I place this app.config in the same directory with my simple Winforms program. Inside my Winforms program(test.cs) I retrieve a value from app.config file. Then I compile my source code manually (with csc command, so it will produce test.exe) and I run it. Unfortunately I get NullReferenceException! “Oh no, what was already happen. I think I’m not do something strange” maybe something like that I muttered.

Yes, I am not do something wrong except because I retrieve value from app.config! Suddenly I realize that my app.config cannot referenced by my executable file (test.exe) automatically (like what will happen in web.config case). Because I feel it’s strange (It work when I use Visual Studio but doesn’t work when I manually compile it) I inspect my Visual Studio files and I open bin directory. Finally I found this: the config file (app.config) renamed automatically by Visual Studio with the same name with my *.exe file, but with *.config extension.

Oh, so this is the matter. the *.exe file (or *.dll file) referenced config file automatically as long as the config file has the same name. So I rename my app.config become test.config, run again my test.exe and yes now it works.

Posted in Programming | Tagged: , , , , , | Leave a Comment »

Martial Arts and Computer Programming, The Equalities and Differences

Posted by triaslama on June 20, 2008

Computer Programming

Martial Arts

(Both images taken from sosamartialarts.com and degreedirectory.org)

First and foremost, this is only my own opinion, you not necassary agree with me or maybe you have your own opinion. What I write here maybe not reflect the reality of both (martial arts and computer programming). Second I write this with “As Far As I Know” assumption.

In this post I just tempted to unveil what is reside in my mind. By now I want to talk about equalities and differences between martial arts and computer programming.

Lets start with the equalities:

Sometimes it is suck, but it is rock!
Learning martial arts can be so suck, the same thing happen with computer programming! But best of all both of two things is rock! So your sacrifice is worth!

It is good when you enjoy it!
What is better than do thing that we like? So its really good for us especially when we enjoy doing it!

Read the rest of this entry »

Posted in Martial Arts, Programming, Thoughts and Opinions | Tagged: , , , , , , | 4 Comments »

Pagination in ASP.NET

Posted by triaslama on May 18, 2008

ASP.NET has DataGrid control, and datagrid control has build in support for pagination. What I do in this post is just something like datagrid pagination, but I add two buttons each of them to navigate to previous and next page respectively.

I use ListOfPage class to produce list of page number, you can see more on this class in my previous post here. For simplicity I use array of string as data source, in more common scenario maybe we use data from database, represent it in DataTable then use the DataTable as a data source.

I do the manual pagination in ASP.NET with code behind style. There is I put the code that produce list of page in a separate file (I named it ManualPagination.aspx.cs). The presentation page laid in ManualPagination.aspx which refers to our code behind file.

Let’s start with presentation page! It’s quite simple, this is the source code (ManualPagination.aspx):

    <%@ Page Language=”C#” CodeFile=”ManualPagination.aspx.cs” Inherits=”ManualPagination.CodeBehindClass” %><html>
    <head>
    <title>Manual Pagination in ASP.NET</title>
    <style type=”text/css”>
    .clr
    {
    background-color:lightblue;
    }
    </style>
    </head>
    <body>
    <form runat=”server”>
    <asp:Label id=”lblPresentation” runat=”server” />
    <p />
    <asp:Button id=”btnPrev” text=”Prev” onclick=”btnPrev_Click” runat=”server” />

    <asp:Label id=”lblPages” runat=”server” />

    <asp:Button id=”btnNext” text=”Next” onclick=”btnNext_Click” runat=”server” />
    </form>
    </body>
    </html>

 

One of the important portion of our presentation page relies on the following code:

Read the rest of this entry »

Posted in ASP.NET, C#, Javascript | Tagged: , , , , , , | Leave a Comment »

Page Number Generator

Posted by triaslama on May 13, 2008

One of the way to prevent show all of data in one page is pagination. Pagination is the process organizing information in pages. For instance, the information appear in a web pages is paginated such that appear 10 lines for every page.
Pagination can be a cool way to manage the looks and feels of information. Because too many tabular data often tedious, hard, or we maybe easily miss something if all of information dropped in a page.

So, what is needed to do pagination? I think one of the most apparent is a list of page! I have write a program (a simple program) in C# that generates page number. The input parameters is current page, number of rows in a page, and the amount of rows.

Output of this progam is array of integer, every number reflected page number being showed. And this is the listing of program:

Read the rest of this entry »

Posted in C#, Programming | Tagged: , , , | 4 Comments »

CSS in ASP.NET Server Controls, Declaratively vs. Programmatically

Posted by triaslama on May 7, 2008

ASP.NET controls has a bunch of attributes that take in order the look and feel of every control. For example TextBox server control, if we want the TextBox color turn into specific color we specify the ForeColor attribute to the name of Color defined in Color structure. If we want the TextBox text font appear in Georgia font, set Font-Name attribute to Georgia. ASP.NET TextBox script for above requirements will look something like this:

<asp:TextBox id="txtTest" ForeColor="Red" Font-Name="Georgia" runat="server" />

It looks simple, right?

But wait, for the one familiar with ASP.NET it doesn’t matter, but for everyone who already familiar with CSS maybe there is a bit problem because the attribute name of ASP.NET server controls slightly different with attribute in CSS file. So sometimes we may prefer that the looks and feels of ASP.NET controls ruled within CSS file. And yes, we can do this!

In ASP.NET information within a CSS file can be accessed either declaratively or programmatically, its up to you which one to choose. To make a CSS file visible within our page put this declaration inside our <head></head> tag:

<link rel="stylesheet" type="text/css" href="[filelocation/css_filename.css]" />

Read the rest of this entry »

Posted in .NET, ASP.NET, HTML / CSS | Tagged: , , , , , | 28 Comments »

Calling Client Script Events in ASP.NET Server Controls

Posted by triaslama on April 25, 2008

ASP.NET has its own controls (WebControls or HtmlControls) that rendered as elements in a page. ASP.NET server controls declared with ‘asp’ tag (<asp:[control_type] />) and contains runat=”server” attribute. ASP.NET server controls has its own attribute related to a specific control (such as onclick and text for click event and button text respectively).

For example: if we want a click event associated with a button of ASP.NET server control we use this script in our ASP.NET page:

<asp:Button id="btn" onclick="btn_Click" text="Test" runat="server" />

The click event received in onclick attribute and will be handled by btn_Click method. btn_Click is a method that will be called everytime a click occurs in this button control. We can write btn_Click method with any languages that supported by .NET framework.

But how if we want to call client script within ASP.NET server controls? Fortunately it can be accomplished to. Suppose that I have a button of ASP.NET server control but I want a click event of this button handled by Javascript function (in client side) rather than any of .NET languages (in server side).

In this example I use two buttons of ASP.NET server controls. The first button will have click event handled using server script and click event of second button handled via client script. I embed the javascript code inline inside the page, but we can pull it out and place it in separate *.js file then this file is referenced inside our ASP.NET page (expage.aspx):

Read the rest of this entry »

Posted in .NET, ASP.NET, Javascript | Tagged: , , , , , , | 20 Comments »

DOM & HTML Revisited

Posted by triaslama on April 18, 2008

What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn’t suck!
I don’t know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let’s check it out!

Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too!

This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page:
init
Initial condition, first part and second part separated by horizontal line.

Read the rest of this entry »

Posted in DOM, HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

Retrieving Query String Values in ASP.NET and Javascript

Posted by triaslama on April 12, 2008

In World Wide Web, a query string is a part of a URL that contains data to be passed to web applications (http://en.wikipedia.org/wiki/Query_string).
The query string is composed of a series of field – value pair. Below is the pattern of query string:
field1=value1&field2=value2&field3=value3

An URL that contains query string can be depicted as follow:
http://test.com/tag?name=alma&role=user
The URL and query string separated by a question mark (?). Query string consist of two parts (field and value), and each of pair separated by ampersand (&). So the example above consists of two query strings which are name and type with value of each field ‘alma’ and ‘user’ respectively.

We can retrieve the query string values programmatically and used that values. Now we will learn how to get the query string values in ASP.NET and Javascript.

Read the rest of this entry »

Posted in ASP.NET, Javascript | Tagged: , , , , | 38 Comments »

Dynamic DropDownList, Just Fill It With Array

Posted by triaslama on April 1, 2008

How to change the content of dropdownlist (combo box) dynamically? want the value of a dropdownlist changes when we change the selected item of another dropdownlist? Is there exist a simple solution for this? Get ready, because the answer is yes!

What we need to create a dynamic dropdownlist in client side is just a little knowledge of HTML and Javascript, two dropdownlist (combo box) element, and an array variable, no more! Well, because I want this will become a very simple solution eventhough the more complex and better solutions exists somewhere out there.

I will show you the HTML code, this code consist of two dropdownlist / combo box (two <select> element) with the second <select> element disabled and will be enabled if we choose something from the first <select> element. Here the HTML code (dnmddl.htm):

<html>
<head>
<title>Dynamic DropDownList, A Simple Solution</title>
<script lang=”javascript” type=”text/javascript” src=”dynamicddl.js”>
</script>
</head>
<body>
<select id=”slc_source” onchange=”srcChange(this.value)”>
<option value=””>—-</option>
<option value=”Asian”>Asian</option>
<option value=”Europe”>Europe</option>
<option value=”African”>African</option>
</select><select id=”slc_target” disabled=”true”>
</select>
</body>
</html>

Don’t be afraid, eventhough the Javascript code look a bit large but what is done by this code only initialize the array with specified value and fill it to the second dropdownlist element (slc_target). This is the Javascript code (dynamicddl.js):


var arr;
var option;


function srcChange(val)
{
var slc_target = document.getElementById("slc_target");


switch (val)
{
case "Asian":
arr = new Array("Indonesia","India","Malaysia","Japan","Pakistan","UEA");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;


case "African":
arr = new Array("Egypt","Marocco","Senegal","Tunisia","Sudan");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;


case "Europe":
arr = new Array("England","France","Germany","Italy","Spain","Swiss");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}
break;


default:
slc_target.disabled = false;
slc_target.options.length = 0;
break;
}
}

HTML code without the Javascript code will only become a static page, so HTML file above (dnmddl.htm) refers to a Javascript file named dynamicddl.js to make a dynamic dropdownlist.Dnmddl.htm has two <select> element contained within it (slc_source & slc_target). One thing that you must aware in slc_source is onchange attribute. This attribute receives srcChange(param) function as an event handler. Change event will be executed in every selected value changes in slc_source, so srcChange(param) will be called in every changes of slc_source value.

What is done by srcChange is receives a parameter, evaluates that parameter, and fills slc_target according to that parameter. We create an option will be used to fill slc_target with the following sample of code:

for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;
}

First parameter of Option object will be the text of dropdownlist and second parameter will be the value. The rest of code should works as is, and if we run our code and select a value from first dropdownlist we should get the same result as this screenshots:

Dynamic DropDownList

Try to change the value of first dropdownlist (slc_source) and you will get the second dropdownlist (slc_target) populated with different values. See you…

Posted in Javascript | Tagged: , , , , | 21 Comments »

CRUD Operations Using DOM

Posted by triaslama on March 21, 2008

CRUD (Create, Read, Update, Delete) is common operations in data storage, but now I will try to use DOM (Document Object Model) doing CRUD operations toward document content (and I think that is one of DOM objective). DOM can be used for doing CRUD operations easily and effectively. OK that’s enough for the buzz words let’s make the job done!

1. Create an Element
To create an element use document.createElement(<elmName>) method. This method receives one parameter that is the name of element that will be created. DOM method document.createTextNode(<text>) is similar to document.createElement but will create a text node instead of an element. The parameter received by document.createTextNode is text that will be created. The other DOM method that important in creating an element is appendChild(<elem>), this method will append the element specified as parameter to an element. Below is an example of add a <li> element to a <ul> element:

var ul = document.getElementsByTagName("ul")[0];
var li = document.createElement("li");
var text = document.createTextNode("'li' element.");

li.appendChild(text);
ul.appendChild(li);

2. Read Text of an Element
Please pay a special attention that a text in DOM is considered as a node, so we have to navigate to its text node first before we retrieve / read the node value. So, if ‘elm’ is a variable that point to a <li> element the following code:
var text = elm.firstChild.nodeValue;

will retrieve the text inside a <li> element and store the value to a variable named ‘text’.

3. Update an Element Content
Update operation really similar to read operation, except updating an element means we change the node value with the new one. If ‘elm’ point to a <li> element, the following code:

var newValue = "New text node value";
elm.firstChild.nodeValue = newValue;

will change the node value inside <li> element with the content of ‘newValue’ variable.

4. Delete an Element
Here, delete an element has two meanings. First delete the text node inside an element, second delete the element itself. Deleting an element can be accomplished using removeChild(<elm>) method. This method receives one parameter, that is child element that will be deleted.
This line of code:
elm.parentNode.removeChild(elm);
will remove ‘elm’ element.

I have write a simple code that demonstrate how to create, read, update, and delete (CRUD) the document content using DOM. I use the Javascript events and blend it with DOM to accomplished CRUD operations, so basic understanding of Javascript events will really helpful.

The code consists of two portions, first portion is html code (crud.htm):

<html>
<head>
<title>CRUD Operations: Complete</title>
<script lang=”javascript” type=”text/javascript” src=”crud.js” >
</script>
</head>
<body>
Want to know why DOM is awesome??
One of the possible answer is: with DOM we can create, read (retrieve), update, and delete document content quickly and easily.
<p/>
<b>Try the following example!</b>
<br/>
<b>
1. Press ‘Add’ button to add a new <li> element.<br>
2. Move the mouse cursor over a <li> element below.<br>
3. Click desired <li> element to read the node value.<br>
4. Hold down ‘Shift’ key and click desired <li> element to update the node value.<br>
5. Hold down ‘Ctrl’ key and click desired <li> element to delete the <li> element.<br>
</b>
<p>
<form id=”frm” name=”frm” style=”background-color:yellow; border:solid 2px; border-color:goldenrod;”>
<ul><b> And here is the list of <li> element:</b>
<li>First li element.</li>
<li>Second li element.</li>
<li>Third li element.</li>
<li>Fourth li element.</li>
<li>Fifth li element.</li>
</ul>
<p>
<input type=”button” id=”btnCreate” onclick=”addLiElement()” value=”Add New <li> Element” />
<p>
</form>
</body>
</html>

The other one is Javascript code (crud.js, this code is referred by html code), and this is the Javascript code:


window.onload = handleCRUD;


function addLiElement()
{
// ask input text for new <li> element
var txt = window.prompt("Text: ");
var text = document.createTextNode(txt);
// create <li> element
var elm = document.createElement("li");
/* retrieve the first <ul> element (and the only one). */
var ul = document.getElementsByTagName("ul")[0]; elm.appendChild(text);
ul.appendChild(elm);

handleCRUD();
}


function handleCRUD()
{
var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = "gainsboro";
};


lis[i].onmouseout = function()
{
this.style.backgroundColor = "yellow";
};

/* ‘click’ event handles read, update, or delete operation */

lis[i].onclick = function(e)
{
// IE handles event through window.event property
e = e||window.event;
/* again IE handles target (source) element as srcElement */
var elm = e.target||e.srcElement;
if (e.ctrlKey) {
/* because 'ctrl' key is pressed, it will be delete operation */
var txtNode = elm.firstChild;
// first, delete the text node
txtNode.parentNode.removeChild(txtNode);
// second, delete the <li> element
elm.parentNode.removeChild(elm);
return;
}
if (e.shiftKey) {
/* because 'shift' key is pressed, it will be update operation */
var newValue = window.prompt("Enter new value: ");
elm.firstChild.nodeValue = newValue;
return;
}
else {
/* neither 'ctrl' nor 'shift' key is pressed, it will be read
operation */
/* now, here we retrieve the content (text) of an element */
var content = elm.firstChild.nodeValue;
window.alert(content);
return;
}
};

}
};

The javascript code started with window.onload that executed after the document is loaded, and passed handleCRUD() function to it. Inside handleCRUD we install mouseover, mouseout, and click events foreach <li> element exist in document.

What is done by each event can be explained as follow:

  • ‘Add’ button onclick: adds an li element to the document.
  • onmouseover: changes the background color of a <li> element to ‘gainsboro’ when mouse cursor enters it.
  • onmouseout: restores the background color of a <li> element to ‘yellow’ when mouse cursor leaves it.
  • onclick, this event has three meanings:
    1. when we click an <li> element along with ‘Ctrl’ key pressed, then the specified <li> element will be deleted.
    2. when we click an <li> element along with ‘Shift’ key pressed, then the node value of specified <li> element will be updated.
    3. when we click an <li> element and neither ‘Ctrl’ key nor ‘Shift’ key is pressed then we simply read the specified <li> element.
  • onclick event handler receive one parameter that is event object (‘e’ in this code), but event object in Internet Explorer (IE) available through window.event property. So we need a regular checking ‘e’ will be still ‘e’ or if the browser is IE e will be filled with window.event.

    e = e||window.event;

    The target (non IE browser) / srcElement (IE) are properties of event object contains a reference to the element that fired to the event. We get target / source element with the following code:

    var elm = e.target||e.srcElement;

    This is screenshot output produced by crud.htm & crud.js:

    CRUD using DOM

    To make the same output as screenshot above puts crud.htm & crud.js in the same directory, type the location in address bar of your browser and you should see the same result.

    Thanks for your attentions, see you next time…

    Posted in DOM, Javascript | Tagged: , , , , , , , , | Leave a Comment »

     
    Follow

    Get every new post delivered to your Inbox.