Friday, February 6, 2009

Link page with css file..

<-link href="style.css" rel="stylesheet" type="text/css">
  • Letak link kat atas ni dalam bahagian antara <-head> dan <-/head>
  • href = "style.css" ni kita gantikan ikut nama file css yang kita create..
So dengan ini page kita ni automatic akan link dengan file css dan kita boleh apply semua style class dalam css tersebut..

Contoh:

1. Kita ada file css nama style.css.. dan dalam file ni kita ada satu style class nama page..

/* Page */

#page {
width: 840px;
margin: 0 auto;
padding: 30px 20px 0px 20px;
background: #FFFFFF;
border-left: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
}

2. Then kita nak apply style yang diberi nama page ni dalam div.. Disebabkan kita dah link kan page kita dengan css file.. so kita bolehlah panggil semula style css tersebut dengan menggunakan class and nama style tersebut..

<-div class="page"> bla bla bla <-/div>

Wednesday, February 4, 2009

Reset buttons..

Example kita ada satu button Reset dekat page.. dan kita nak lepas tekan button Reset.. value dalam textBox atau labeltext atau dropdownlist akan reset menjadi kosong semula atau menjadi default value yang kita set kan....
So, caranye seperti kat bawah..

<--asp:button id="btnReset" runat="server" Text="Reset" Width="56px"
Font-Bold="True" onclick="btnClear_Click">
<--/asp:button>


dekat bahagian coding dekat Onclick Event:

private void btnClear_Click(object sender, System.EventArgs e)
{
     txtName.Text = "";    //reset textBox
     txtNRIC.Text = "";    //reset textBox
     label1.Text = "";    //reset labelText
     ddlGender.SelectedItem.Value = "Please Select";    //reset dropdownList
     ddlRace.SelectedItem.Value = "Please Select";    //reset dropdownList
}

Monday, February 2, 2009

Display Data in Repeater..

Repeater control digunakan untuk display data items dalam bentuk repeating list iaitu data berulang-ulang.. Repeater menggunakan templates. Paling kurang pun, setiap Repeater mesti ada ItemTemplates, manakala templates yang lain ialah sekadar pilihan untuk customize the appearance of the data list tersebut..
  • ItemTemplate
  • AlternatingItemTemplate
  • SeparatorTemplate
  • HeaderTemplate
  • FooterTemplate

Coding at Client Side:

<--asp:Repeater ID="Repeater1" runat="server">
     <--HeaderTemplate>
          <--div><--/div>
     <--/HeaderTemplate>
     <--ItemTemplate>
          <--div>
               <--a href="Profile.aspx?name=<%#Eval("Associate_Name")%>">
                    <--%#DataBinder.Eval(Container.DataItem, "Associate_Name")%>
               <--/a>
          <--/div>
     <--/ItemTemplate>
     <--AlternatingItemTemplate>
          <--div>
               <--a href="Profile.aspx?name=<%#Eval("Associate_Name")%>">
                    <--%#DataBinder.Eval(Container.DataItem, "Associate_Name")%>
               <--/a>
          <--/div>
     <--/AlternatingItemTemplate>
     <--FooterTemplate>
          <--div><--/div>
     <--/FooterTemplate>
<--/asp:Repeater>


Coding at Server Side:

protected void Page_Load(object sender, EventArgs e)
{
     try
     {
          if(!IsPostBack)
          {
               DataSet ds = new DataSet();
               SqlConnection con = new SqlConnection();
               con.ConnectionString = @"Data Source=klcpc292\SQLEXPRESS;" + @"Initial Catalog=FacePage; Integrated Security=SSPI;";
               con.Open();

               string query = "select Associate_Name from Associate_Profile where Associate_Role='Buddy'";

               SqlDataAdapter adap = new SqlDataAdapter(query,con);
               adap.Fill(ds);
               Repeater1.DataSource = ds.Tables[0].DefaultView;
               Repeater1.DataBind();
          }
     }
     catch(Exception ex)
     {
          Response.Write(ex.Message);
     }
}

How to use Session..

Page A:
Session["employee_name"] = LabelA.Text;

Page B:
LabelB.Text = Session["employee_name"].ToString();

** Dalam Page A, kita create satu session yang diberi nama employee_name dan kita simpan value atau maklumat daripada LabelA.Text yang terletak dalam Page A.. Nama untuk session ni boleh letak apa-apa jep nama.. Then kita bukak coding untuk Page B.. Kat dalam Page B ni kita boleh ambil semula maklumat atau value yang kita simpan sebagai session dalam Page A tadi.. So kita retrieve semula value dalam session menggunakan nama session yang sama iaitu employee_name dan kita simpan value tersebut dalam LabelB.Text yang terletak dalam Page B.. So dengan session, kita boleh pass maklumat daripada satu page ke satu page yang lain.. **

Thursday, January 29, 2009

Textbox Validation..

Html Code:

<--h1>Search By Name<--/h1>
    <--ul>
        <--asp:TextBox ID="TextBox1" runat="server" Width="123px"><--/asp:TextBox>
        <--asp:ImageButton ID="ImageButton1" runat="server"
            ImageUrl="~/images/search.JPG" onclick="ImageButton1_Click"
            OnClientClick=" return validate()" Height="21px" Width="29px"/>
    <--/ul>(ex: Obama)

Javascript code:

<--script language="javascript" type="text/javascript">
    function validate(){
        if(document.getElementById("<%=TextBox1.ClientID%>").value=="")
        {
            alert("Please enter an associate name!");
            document.getElementById("<%=TextBox1.ClientID%>").focus();
            return false;
        }
            var digits = "0123456789";
            var temp;
            for(var i = 0; i < document.getElementById("<%=TextBox1.ClientID %>").value.length; i++){
                temp = document.getElementById("<%=TextBox1.ClientID%>").value.substring(i, i + 1);
                if (digits.indexOf(temp) != -1) {
                    alert("Please enter a valid value!");
                    document.getElementById("<%=TextBox1.ClientID%>").focus();
                    return false;
                }
            }
            var charc = "~`!@#$%^&*()_+-=|\"':;{}[]?/><.,*";
            var tempo;
            for(var j = 0; j < document.getElementById("<%=TextBox1.ClientID %>").value.length; j++){
                tempo = document.getElementById("<%=TextBox1.ClientID%>").value.substring(j, j + 1);
                if (charc.indexOf(tempo) != -1) {
                    alert("Please enter a valid value!");
                    document.getElementById("<%=TextBox1.ClientID%>").focus();
                    return false;
                }
            }
            return true;
        }
<--/script>

Try and Catch..

Error dalam coding boleh dilihat dengan try and catch block.. So, try and catch sangat berguna untuk menangani exception.. Kalau hanya catch SQLException, error yang lain selain SQL akan tidak dapat dilihat.. Kita hanya guna SQLException kalau ada info yang kita perlukan yang berkaitan dengan SQL yang Exception sendiri sahaja tak dapat tangkap (Biasanya tiada masalah menggunakan Exception, sebab selalunya semua info tentang error yang diperlukan ada untuk menangani problem)..

Tapi kalau kita betul-betul mahukan lebih detail tentang sesuatu error dalam coding, bolehlah menggunakan kedua-dua sekali jenis catch untuk exceptions. Dengan hanya declaring dua catch blocks dengan setiap satu dengan exception masing-masing.. So bila error jep, catch block dengan exception yang sesuai akan digunakan..
Sebagai contoh:
        try
        {
            // some code here...
        }
        catch(SqlException se)
        {
            // Handle SQL Exception here... SQL Exception occurred
            Response.write(se.Message);
        }
        catch(Exception ex)
        {
            // Some non sql exception happened...Unknown Exception occurred
            Response.write(ex.Message);
        }

Wednesday, January 28, 2009

Include Files..

Include file ni salah satu cara untuk memudahkan kerja. Biasanye kita gunakan include untuk bahagian header, leftside, and footer.. Yelah, cuba pikir, kalau kita ada 100 pages, takkanlah kita nak bubuh coding header tu kat setiap pages.. jenuhlah camtu.. So kita create hanya satu page untuk header and just include kan jep files tersebut kat setiap page menggunakan coding file include.. Coding ni kita bubuh kat dalam design iaitu bahagian source code html dia.. Cara dia, create satu file baru seperti file html and then tulis code dalam bahagian body sahaja.. dekat coding dia ni kita bubuhlah banner header and tulisan-tulisan yang selalu ada kat header.. So dalam page asp, kita hanya include sahaja file html yang mengandungi code tersebut.. So secara automatic file asp tersebut pun mengandungi code yang sama macam file html kita create tadi and automatic ada header..

Contoh code nak include file:

<--html>
    <--head id="Head" runat="server">

        <--title>Home<--/title>
    <--/head>    
    <--body>

        <--form id="form1" runat="server">
            <--#include file="header.htm"-->
            <--#include file="leftside.htm"-->

            <-- main -->

            <--#include file="footer.htm"-->
    <--/body>
<--/html>

*Notes: Actually disebabkan kat blog ni tak boleh nak write html code so actually ada tanda '!' sebelum '--'.. and hanya pada include file jep..

Friday, January 23, 2009

Retrieve data from table..

Cara nak retrieve data daripada database table menggunakan SqlDataReader.. Sebagai contoh kat bawah, kita ada query yang baca semua data dalam table employee di mana associate_name ialah 'michael'.. So kita create SqlCommand yang mengandungi query ni dan connection daripada DB.. Then kita menggunakan SqlDataReader untuk create object dan gunakan ExecuteReader method.. Kalau reader.HasRows ni jumpa data and while dia baca data ni, dia akan paparkan data ni dalam Label1.Text seperti Associate_Name :

SqlConnection con = new SqlConnection();
con.ConnectionString = @"Data Source=klcpc292\SQLEXPRESS;" + @"Initial Catalog=FacePage; Integrated Security=SSPI;";
con.Open();

string query = "select * from employee where Associate_Name='michael';";

SqlCommand cmd = new SqlCommand(query, con); //create a command
SqlDataReader reader = cmd.ExecuteReader();

if (reader.HasRows)
{
    while (reader.Read())
    {
        Label1.Text = reader["Associate_Name"].ToString();
        Label2.Text += reader["Associate_Email"];
    }
}
else
{
    Response.Write("No Data!");
}

reader.Close();
con.Close();

DataAdapter, DataSet and DataTable..

DataSet digunakan untuk menyimpan salinan data daripada database tables. Datasets can not directly retrieve data from Databases. So datasets memerlukan DataAdapter sebagai penghubung antara Database dengan Dataset.

Databases ---> DataAdapter ---> DataSet/DataTable

Dalam DataSet boleh ada banyak database tables. So bolehlah nak kata DataSet sebagai ruang untuk menyimpan banyak table-table data dalam tu dan DataAdapter sebagai penghubung untuk dataset access data dalam database. Tujuan DataSet and DataAdapter juga ialah untuk display and manipulate data from database.

To read data into Dataset, you need to:

  • Create a database connection and then a dataset object.
  • Create a DataAdapter object and refer it to the DB connection already created. Note that every DataAdapter has to refer to a connection object. For example, SqlDataAdapter refers to SqlDataConnection.
  • The Fill method of DataAdapter has to be called to populate the Dataset object.
1. Create a database connection:
using System.Data.SqlClient;
using System.Data;

SqlConnection con = new SqlConnection();
con.ConnectionString = @"Data Source=klcpc209\SQLEXPRESS;" + @"Initial Catalog=FaceBook; Integrated Security=SSPI;";
con.Open(); //open connection

2. Create satu variable dalam string untuk simpan query database:
string query = "select * from employee'";

3. Create SqlCommand object dan assign query and connection dalam SqlCommand constructor:
SqlCommand cmd = new SqlCommand(query,con); //Create a command

4. Create SqlAdapter object dan assign SqlCommand object dalam SqlDataAdapter constructor. So sekarang bridge yang menghubungkan antara DataSet dan Database has been created. Sebagai contoh kat atas ni, sebab kita guna query panggil semua data dalam table 'employee', so kita telah menghubungkan Table 'employee' dengan menggunakan DataAdapter:
SqlDataAdapter adap = new SqlDataAdapter(cmd);

5. Create DataSet object
DataSet ds = new DataSet();

6. Kita boleh manupulasikan data dalam dataset dengan menggunakan Fill method. So kat sini kita masukkan table 'employee' tu dalam DataSet:
adap.Fill(ds);

So bila kita dah ada Data dalam DataSet tu, bolehlah kita nak gunakan data tu macam nak retrieve data, nak edit data, nak add data and nak delete data. Contoh full coding:

using System.Data.SqlClient;
using System.Data;

SqlConnection con = new SqlConnection();
con.ConnectionString = @"Data Source=klcpc209\SQLEXPRESS;" + @"Initial Catalog=FaceBook; Integrated Security=SSPI;";
con.Open(); //open connection

string query = "select * from employee'";

SqlCommand cmd = new SqlCommand(query,con); //Create a command
SqlDataAdapter adap = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adap.Fill(ds);

con.Close();

SQL Connection..

Tujuan kita nak buat SQL Connection ialah apabila kita nak connect website kita dengan database. So, mula-mula nak buat SQL Connection.. Kena pastikan ada namespace:

using System.Data;
using System.Data.SqlClient;

Then biasanya kita letak coding dia dalam Page_Load iaitu kat sini:

protected void Page_Load(object sender, EventArgs e) { }

Antara coding yang akan kita letak seperti create new object untuk SQLConnection, create ConnectionString and open connection..
Contoh seperti kat bawah..

SqlConnection con = new SqlConnection();
con.ConnectionString = @"Data Source=klcpc428\SQLEXPRESS;" + @"Initial Catalog=FaceBook; Integrated Security=SSPI;";
con.Open(); //open connection

- Data Source ialah server kat mana database kita simpan
- Initial Catalog ialah nama Database yang kita nak guna

And last sekali jangan lupa untuk close connection setiap kali ada open connection..

con.Close();