블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



AJAX 방명록 만들기[7]

후~요즘 날씨가 너무 쌀쌀하네요!! AJAX 방명록 만들기 강좌를 빨리 끝내야하는데... 제가 좀 게을러서 늦어 지내요~^^캬캬~ 스파르타하게 빨리 빨리 올리도록 하겠습니다.^^
저번 내용은 데이터베이스는 만들어 보았습니다. 그럼 이제 작성한 글을 데이터베이스에 어떻게 연결해서 넘기게 되는지 확인해 보도록 하겠습니다. 일단 사용자가 글을 다쓰고 확인을 클릭하게 되면 비하인드코드에서 어떠한 일이 일어나는지 코드를 보시도록 하겠습니다!!

 Guest_Board.aspx.cs페이지

 protected boardClass bclass = new boardClass();


protected void WriteOK_Click(object sender, EventArgs e)

{

bclass.u_name = txtuserName.Text;

bclass.u_pass = txtpassword.Text;

bclass.u_content = txtContent.Text;

bclass.u_ip = Request.UserHostAddress;

bclass.icon = this.IMG_ICON.Value;

 

bclass.Procedure(1);

Text_Clear();

 

ListBind();

}


위 코드는 확인 버튼을 클릭하고 나서 대충유효성 검사까지 완료 되면 비하인드코드에서 일어나는 행위들입니다. 코드에서 bclassboardClass를 인스턴트로 생성한 것 입니다. 코드 위 부분에 인스턴트로 생성한 코드가 보이시지요. 그래서
boardClass에 접근이 가능하겠지요.
이제부터 설명하는 아래내용은 위 코드를 중심으로 하나하나의 코드와 구현내용을 보도록 하겠습니다.

ㅁ Property

 

bclass.u_name  : 작성자 닉네임을 boardClass의 변수값으로 넘김.

bclass.u_pass  : 작성자 비밀번호를 boardClass의 변수값으로 넘김

bclass.u_content : 작성내용을 boardClass의 변수값으로 넘김.

bclass.u_ip : 작성자의 ip 주소를 boardClass의 변수값으로 넘김.

bclass.icon : 작성자가 선택한 아이콘의 파일명이 boardClass의 변수값으로 넘김.

아래 코드는 boardClass의 변수선언 코드와 Property 부분입니다.

boardClass.cs페이지

private string U_Name;

private string U_Pass;

private string U_Content;

private string U_Ip;

private string ICon;

 

public string u_name

{

get { return U_Name; }

set { U_Name = value; }

}

public string u_pass

{

get { return U_Pass; }

set { U_Pass = value; }

}

public string u_content

{

get { return U_Content; }

set { U_Content = value; }

}

public string u_ip

{

get { return U_Ip; }

set { U_Ip = value; }

}

public string icon

{

set { ICon = value; }

}


저는 위와같이 코드를 짜보았습니다. 모 그냥 Property 만들지 않고 한페이지에서도 가능하지요!
^^;; 저는 초보라..ㅋ이렇게도 해보고 저렇게도 해보고 이렇고 있습니다.^^ㅋ 아무튼 이렇게 값들을 넘기고,그 다음에 코드를 보시면 bclass.Procedure(1); 코드가 있습니다. 이것은 어떻게 정의된 메소드인지 알아 보도록 하지요! 앞에 bclass. 이렇게 있는걸 보니..딱 boardClass에서 선언된 녀석이란걸 알수 있겠지요! 아래 코드로 확인해 보도록 하시지요!

boardClass.cs페이지

private dbClass dcon = new dbClass();


private string query;


public void Procedure(int num)

{

dcon.Open();

 

if (num == 1)

{

query = "gb_insert";

Db_Parameters(true);

dcon.ExecuteNon(query);

}

else if (num == 2)

{

query = "total_count";

total_Count = dcon.GetCheck(query);

}

else if (num == 3)

{

ds = dcon.GetDataSet(query);

}

else if (num == 4)

{

query = "gb_password";

Db_Parameters(false);

Count = dcon.GetCheck(query);

if (Count != 0)

{

dcon.Comm.Parameters.RemoveAt(0);

query = "gb_Delete";

dcon.ExecuteNon(query);

}

}

 

dcon.Close();

}


bclass.Procedure(1);
이 코드에서 보이듯 메스드에 int형식의 인자값을 받는
것을 알수 있습니다. 위 코드에서 보면 받은 인자값으로 query를 구분합니다.그럼 대충 제일 위에 코드부터 하나하나 살펴 보도록 하겠습니다. 코드 위 부분에 dbClass를 인스턴트로 생성하는 코드가 있습니다. dbClass에서는 데이터베이스 연결하고 실행하는 코드들을 정의한 Class입니다. 위 코드를 하나하나 보시면서 그때그때 dbClass 내용을 설명해 드리도록 하겠습니다. 먼저 dcon.Open();라는 코드가 선언 되어 있습니다. 그 코는 아래와 같습니다.

dbClass.cs

 private SqlConnection Conn;

public void Open()

{

Conn = new SqlConnection(ConfigurationSettings.AppSettings["constr"]);

Conn.Open();

}


전역변수로 SqlConnection을 선언하고 Open이라는 메소드에서 Connection 연결정보를 정의했
습니다. 사용자 정보는 Web.config 에 정의해 놓았습니다.(아래 코드 참고)

Web.config 페이지

 - Web.config 파일에 정의 -

<appSettings>

<add key="constr" value="server=(local);database=test;user id=kdw;password=kdw"/>

</appSettings>


그리고 SqlConnection의 Open메소드를 이용해서 데이터베이스와 연결을 했습니다.
자~그럼 아까 인자값을 1로 받았습니다. 그럼 1과 같은 조건에 걸리겠네요! 걸린 코드를 보니 일단 query라는 전역 변수에 "gb_insert"라는 저장프로시저명을 정의하고 있습니다. gb_insert의 내용은 아래코드와 같습니다.

 gb_insert Procedure

CREATE proc gb_insert

(

        @b_name varchar(20),

        @b_pass varchar(20),

        @b_content varchar(5000),

        @b_ip varchar(15),

        @b_icon varchar(20)

)

as

insert into guest_board (b_name,b_pass,b_content,b_ip,b_icon) values(@b_name,@b_pass,@b_content,@b_ip,@b_icon)

GO

 
그 다음는 Db_Parameters라는 메소드에 bool형식의 인자값을 넘기고 있습니다. Db_Parameters메소드의 코드를 보도록 하겠습니다.

 boardClass.cs페이지

 public void Db_Parameters(bool X)

{

dcon.Comm.Parameters.Add("@b_pass", SqlDbType.VarChar, 20);

dcon.Comm.Parameters["@b_pass"].Value = U_Pass;

 

if (X)

{

dcon.Comm.Parameters.Add("@b_name", SqlDbType.VarChar, 20);

dcon.Comm.Parameters.Add("@b_content", SqlDbType.VarChar, 5000);

dcon.Comm.Parameters.Add("@b_ip", SqlDbType.VarChar, 15);

dcon.Comm.Parameters.Add("@b_icon", SqlDbType.VarChar, 20);

 

dcon.Comm.Parameters["@b_name"].Value = U_Name;

dcon.Comm.Parameters["@b_content"].Value = U_Content;

dcon.Comm.Parameters["@b_ip"].Value = U_Ip;

dcon.Comm.Parameters["@b_icon"].Value = ICon;

}

else

{

dcon.Comm.Parameters.Add("@b_seq", SqlDbType.Int);

dcon.Comm.Parameters["@b_seq"].Value = seq;

}

}


받은 인자 값으로 조건을 확인하고 있습니다. 여기서 조건을 사용한 목적은 insert할 것인지비밀번호를 확인 후 삭제를 할 것인지를 확인해서 그에 맞는 Parameter를 만들기 위함 입니다. 아까 ture로 값이 넘어 왔었지요! 그럼 기본적으로 b_pass의 parameter를 만들고b_name,b_content,b_ip,b_icon 이렇게 추가로 더 만들어 습니다.(값도 다 넣어 주었지요)
그럼 이제 실행 시키면 데이터가 데이터베이스에 넘어 가겠지요. 그 다음 코드가 바로 값을 넘겨주는 코드라고 보시면 되겠습니다.^^ "dcon.ExecuteNon(query)" 이 코드 또한 dbClass에 정의된 내용 입니다. 아래 코드로 보시겠습니다.

dbClass.cs페이지

 public SqlCommand Comm = new SqlCommand();

 

public void ExecuteNon(string procedure)

{

Comm.Connection = Conn;

Comm.CommandText = procedure;

Comm.CommandType = CommandType.StoredProcedure;

Comm.ExecuteNonQuery();

}


SqlCommand
를 전역으로 선언해 두었습니다. 그리고 ExeuteNon은 인자 값으로 string형의 값을 받습니다. 그 값은 SQL Query일 것이다. 생성한 Command에 Connection 객체를 생성하고 CommanText에 해당 Query를 설정하고 그 Type를 설정한뒤에 ExecuteNonQuery를 실행하면 입력한 내용이 데이터 베이스에 기록이 되게 됩니다~!
그럼 이제 마지막 줄에 있는 코드를 보도록 하겠습니다.조건들 마지막부분에 dcon.Close() 가 있습니다. 딱 아시겠지요!! 데이터 베이스를 넘겼으니깐 더 이상 데이터베이스와 연결할 필요가 없겠지요!그래서 끊도록 합니다.  dcon.Close() 코드 또한 dbClass란걸 알수 있을 것입니다. 그럼 해당 코드에 코드내용을 보도록 하겠습니다. 모 보시지 않으셔도 대충 짐작하실것 같네요!^^;;; 

 dbClass.cs페이지

 public void Close()

{

        Comm.Parameters.Clear();

        Conn.Close();

}


자 위코드로 인해 데이터 베이스 연결이 끊겼습니다.
그럼 계속해서 이벤트 단에 있는 나머지 코드를 살펴 보도록 하겠습니다. Text_Clear() 메소드는 글을 입력 받는 TextBox에 남아있는 글을 지우는 메소드입니다. 코드는 아래와 같습니다.

Guest_Board.aspx.cs페이지

 protected void Text_Clear()

{

txtContent.Text = "";

txtuserName.Text = "";

IMG_ICON.Value = "";

}


딱 아실수 있으시겠지요!!그럼 이제 하나만은 코드를 보도록 하시지요!!
ListBind() 메소드는 리스트부분에 새로작성한 글이 업데이트 될 수 있도록 합니다.이번 내용은 여기까지 작성하도록 하겠습니다. ListBing() 메소드는 리스트부분을 다룰때 자세하게 다루겠습니다. 테스트 하실때는 ListBind()부분은 주석처리해서 데이터 베이스 연결해서 데이터가 입력 되었는지 확인해 보도록 하십시오~^^

Posted by happydong
, |



AJAX 방명록 만들기[6]


휴~6편은 좀 많이 늦게 올리게 되네요!!^^;;제가 이번주는 예비군 훈련이어서....^^;;; 군대에서는 아직 절 버리지 않았나 봐요!!좀 버려도 되는데...ㅋㅋ 암튼...네~~!
 이번에는 글이 들어갈 DB를 어떻게 만들었는지 확인하시고요!! 그다음에 어떻게 DB에 연결해서 넣는지 보도록 하겠습니다!! 보통 DB를 먼저 구성하고 프로그램을 짜지요!!아하...저 또한 그렇게 했는데...제가 처음쓰는 강좌라 DB 부분을 설명을 않하고 프로그램적인 것만 설명한 것 같습니다. ^^;;죄송~ 일단 DB를 어떻게 만드는지 천천히 보도록 하겠습니다. 이부분은 혹시 완전 초보자를 위한 것이므로 아시는 내용이면 그냥 AJAX 방명록 만들기[7] 강좌를 보시면 되겠습니다!그래도 이 강좌에는 제가 만든 테이블과 각각의 컬럼 설명도 있으니깐요 그 부분은 참고 해서 DB를 만들보세요~^^ 아래 그림부터 순서대로 따라해보세요!!^^

1. 그림 - DB생성1

사용자 삽입 이미지


많이 보셨던 화면 일 것 입니다. SQL Server Enterprise 화면 입니다. 테스트하기 위한 DB를 만들기 위해 local서버 >> 데이터베이스를 클릭해서 우리가 잘쓰는 마우스로 오른쪽 버튼을 클릭 합니다. 그럼 위와 같은메뉴들이 나오는데요..딱 보이죠~^^ "새 데이터 베이스"이렇게 하면 손쉽게 만들수 있습니다. (쿼리 분석기로도가능!테이블 생성 쿼리를 만들면 되겠죠!^^)

2. 그림 - DB생성2

사용자 삽입 이미지


위 그림과 같은 화면이 나타나면 테스트하기 위한 DB를 생성합니다~^^ 이름적고 확인 클릭!!간단하죠!!^^ 그럼 아래와 같이 DB가 생성이 됩니다.^^

3. 그림 - DB생성3

사용자 삽입 이미지


DB가 생성 되었다면 dbo권한을 설정해야 겠지요~ dbo 설정 방법은 여러가지가 있습니다. 제가 여기서 설명하는 방법 말고도 다른 방법도 있음을 기억하세요~^^;; 아래 그림을 보도록 하겠습니다.


4.그림 - dbo권한1

사용자 삽입 이미지


위 그림처럼 일단 보안 >> 로그인을 클릭해서 dbo로 설정할 id, password 설정해주세요~그러면서 dbo권한을 설정하면 됩니다. 아니면 여기서는 사용자 id,password를 만들고 DB에서 설정도 가능합니다. 아래 그림을 보도록 하겠습니다.


5.그림 - dbo권한2

사용자 삽입 이미지


위 그림처럼 해당 DB에 사용자를 클릭하셔서 마우스 오른쪽버튼을 클릭하면 "새 데이터베이스 사용자"라는 메뉴가 제일 위에 있습니다. 클릭하시면 위와 같은 화면이 나타납니다. 그럼 보안에서 만들었던 id를 입력하시고 그림과 같이 db_owner를 체크해주세요~^^그럼 끝나요~! 자~ 이제 DB도 생성이 됐으니깐 테이블을 만들어 보도록 하겠습니다!^^ (저는 참고로 DB이름을 "test"라고 해서 만들었습니다!^^)

6.그림 - 테이블 생성1

사용자 삽입 이미지


위 그림의 경로 처럼 test >> 테이블을 클릭하면 그림과 같은 화면이 나타나는데요!! 거기서 역시 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다!! 역시 딱!! 보이죠~^^ "새 테이블" 클릭하 해서 테이블을 생성해 보세요!!^^

7. 그림 - 테이블 생성2

사용자 삽입 이미지


저는 한번 위와 같은 컬럼들을 만들어 보았습니다~ 간단히 설명하자면 아래 같습니다.


 - b_seq : 글의 고유 번호가 되겠습니다.(기본 키설정)

 - b_name : 글을 작성한 사람의 닉네임을 저장합니다.

 - b_pass : 해당 글의 비밀번호를 저장합니다.

 - b_content : 해당 글의 내용를 저장 합니다.

 - b_ip : 글을 작성한 사람의 ip를 저장합니다.

 - b_time : 글의 작성 시간을 저장합니다.(기본값 : getdate())

 - b_icon : 선택한 아이콘파일의 이름을 저장합니다.


간단하게 만들었지요~^^;;이렇게 만들고 나서는 테이블 이름을 입력하고 저장하세요~^^저의 테이블 이름은 "guest_board"라고 했습니다. 이렇게 DB가 만들어 졌으니깐 작성한 글을 넣으면 되겠지요~!이제 한번 insert 프로시져을 만들어 보도록 하겠습니다. 아래 그림을 보도록 하시지요~^^


8. 그림 - insert Procedure1

사용자 삽입 이미지


위 그림과 같이 저장 프로시저를 클릭하면 그림과 같은 화면이 나타 나게 되고, 거기에서 마우스 오른쪽을 클릭하면 "새 저장 프로시져"라는 메뉴가 있습니다. 그 걸 클릭!! 따딱~하세요~^^ 그럼 아래 그림과 같이 내용을 입력 하세요~^^

9. 그림 - insert Procedure2

사용자 삽입 이미지


위 그림 처럼 내용을 입력하고 구문 검사 버튼을 클릭한 후 확인 버튼을 클릭하세요~그럼 딱 생성이 됩니다. 혹시 위 그림의 내용이 잘 안보이시는 분들를 위해 아래 코드를 참고 하세요.

 Indert Procedure

 CREATE proc gb_insert

(

             @b_name varchar(20),

             @b_pass varchar(20),

             @b_content varchar(5000),

             @b_ip varchar(15),

             @b_icon varchar(20)

)

as

insert into guest_board (b_name,b_pass,b_content,b_ip,b_icon) values(@b_name,@b_pass,@b_content,@b_ip,@b_icon)

GO


오호~이제 DB와 프로시저까지 생성이 되었군요~이제 작성글을 넣으면 되겠지요!! 이 다음 강좌에서 내용를 넣어 보도록 하겠습니다~^^ 여기까지 읽어 주셔서 감사 합니다. 참 제가 자~알 설명을 못해서 죄송스럽네요~역시 처음부터 잘하는 사람이 어디있겠습니까~!  계속 노력하고 최선을 다하겠습니다!ㅋ (잘~할수 있습니다~^^)

Posted by happydong
, |



AJAX 방명록 만들기[5]


이번에는 간단하게 글을 입력하고 유효성 검사를 하는걸 보시겠습니다. 저는 아주아주 간단하게 유효성 체크를 했습니다. 부족한점 이해해 주시고요!!
먼저 아래 그림을 보도록 하겠습니다!


사용자 삽입 이미지
위 그림은 내용을 입력한 모습 입니다 . 이미가 삽입이 되었죠. 어떻게 들어 갔는지 먼저 확인하고 유효성관련 된 내용을 보도록 하겠습니다! AJAX 방명록 만들기[4] 에서 이미지 모음 코드를 보았을 것입니다. 그 코드 거의 마지막쯤에 아래 코드가 있었을 것입니다.

Image Code(.aspx페이지)

 <img alt="" src="images/btn/imgok.gif" onclick="imgOK()" />

<img alt="" src="images/btn/cancel.gif" onclick="imgcancel()" />


간단하죠 마우스 클릭을 하면 이벤트가 일어나는 거죠.그럼 imgcancel() 함수의 호출내용을 보도록 하겠습니다. 

Script Code (.aspx페이지)

 function imgcancel()

{

document.getElementById("<%= pnl_imglist1.ClientID %>").style.display = "none";<?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

document.getElementById("<%= pnl_imglist1.ClientID %>").style.height = "0px";

document.getElementById("<%= pnl_imglist2.ClientID %>").style.display = "none";

document.getElementById("<%= pnl_imglist2.ClientID %>").style.height = "0px";

}


간단합니다. document객체중에서 getElementById메소드를 사용해서 해당 아이디를 가진 객체를 찾는 것이지요.그래서 style를 설정하는 코드입니다. 여기서 ID는 이미지 모음 Panel ID가 되겠지요<%= 로 감싸저 있는 이유는 Panel이 서버컨트롤이라 우리가 일반적으로 그냥 ID를 쓰면 접근이 않됩니다. 그렇기 때문에 꼭 위와 같이 지정하고 ClientID를 지정해 주어야 하는것이지요.  다음은 imgOK() 함수내용을 알아 보도록 하겠습니다.

Script Code(.aspx페이지)

 function imgOK()

{

imgcancel();

if(document.getElementById("base_check").checked)

icon = "icon01.gif";

var iconn = '<img alt="" src="images/list_img/'+icon+'" />';

document.getElementById("imgAdd").innerHTML = iconn;

}


위 코드를 살펴보면 먼저 imgcancel()함수를 먼저 호출하는 것을 볼수 있습니다. 왜냐..일단 이미지모음 부분을 안보이게 해야 하기 때문이겠지요^^ 그런다음에 조건이 하나 붙고있습니다. 이 조건은 이미지 모음에 있는 라디오버튼으로 사용자가 기본 check 이미지를 사용했는지를 확인하는 조건입니다. 기본 체크이미지를 선택했다면 True이기 때문에 조건에 걸려 icon변수(전역변수)에 해당값을 넣게 됩니다. 만약 사용자가 다른 이미지를 선택하게 되면 라디오버튼마다 onclick 이벤트를 주었기 때문에 아래와 같은 함수를 호출하게 됩니다.

 Script Code (.aspx페이지)

 function img_radio(value)

{

icon = "icon"+value+".gif";

}


위 img_radio함수는 인자값 하나를 갖습니다. 그 인자같은 radio버튼 속성에 value값을 받는것이지요. 저는 radio 버튼마다 value값을 설정해 주었습니다. 궁금하시면 AJAX 방명록 만들기[4]에 이미지 모음 코드를 한번 살펴보세요^^ 위 내용은 아까도 말했듯 전역으로 선언한 icon 변수에 값을 넣어 주고있습니다. 값은 이미지 파일명이 되겠습니다.value는 무엇인가 1,2,3... 이런 값이 들어 오게 됩니다. 이미지 파일명이 icon1.gif, icon2.gif..이런식으로 구성이 되어 있거든요^^ 그럼 다시 imgOk() 함수의 나머지 부분도 알아보도록 하겠습니다. 보시면 하나의 변수를 선업하고 그 값은 HTML 코드의 내용를 넣고 있습니다. img태그를 사용하고 있는 것 같지요. 맞습니다 img 태그입니다. 그리고 나서는 document개체에getElementById메소드로 imgAdd라는 ID를 찾습니다. imgAdd<div id="imgAdd"></div> 이것입니다. 아무것도 없는 div태그에 innerHTML속성을 사용해서 해당 블록에 태그가 동적으로 생성되게 한 것 입니다.그래서 위와같이 글쓰는 부분에 이미지가 들어 갈수 있었던것 입니다.이제 이미지가 어떻게 들어 갔는지 알았으니깐 간단하게 유효성 Script는 어떻게 쓰는지 알아 보도록 하겠습니다. 제일 위에 그림을 보면 "확인"버튼이 있습니다. 저 버튼은 서버컨트롤이 아닙니다. 그래서 클릭하면 Postback이 일어 나지 않습니다. 유효성에서 다 통과가 되야 Postback이 일어나는 거죠. 그럼 확인 버튼을 클릭하면 어떠한 Script 함수가 호출되는지 알아 보도록 하겠습니다. 코드는 아래와 같습니다.

 Script Code (.aspx페이지)

 function write_Ok()

{

var id = document.getElementById("<%= txtuserName.ClientID %>").value;

var pass = document.getElementById("<%= txtpassword.ClientID %>").value;

var content = document.getElementById("<%= txtContent.ClientID %>").value;

Check(id,pass,content,icon);

}

위 코드는 대충 보시면 이해하실것 같군요 지역변수를 3개 선언을 해서 그 변수에 해당 값을 넣게되는 것입니다. 그래서 Check라는 함수를 호출하게 되는 것입니다.Check 함수는 4개의 parameter을 받습니다. 그것은 아래와 같습니다.

 - id : 사용자가 입력한 닉네임(지역변수)
 - pass : 사용자가 입력한 아이디(지역변수)
 - content : 사용자가 입력한 내용(지역변수)
 - icon : 사용자가 선택한 이미지(전역변수)

그럼 Check함수를 알아 보도록 하겠습니다. Check함수는 따로 .js파이로 빼두었습니다.그냥 코드가 길어질 것 같아서요^^;;

 

boardScript.js페이지

 // JScript 파일

 

function Check(id,pass,content,_icon)

{

if(_icon == "")

{

alert("이미지를 선택해주세요!");

return;

}

if(id == "")

{

alert("닉네임을 입력해주세요!");

return;

}

else if(!id.match(/[a-zA-Z-0-9]/))

{

alert("닉네임을 정확히 입력해주세요!");

return;

}

if(pass == "")

{

alert("비밀번호를 입력해주세요!");

return;

}

else if(pass.length < 4 || !pass.match(/[a-zA-Z-0-9]/))

{

alert("비밀번호를 정확히 입력해주세요!");

return;

}

if(content == "")

{

alert("내용을 입력해 주세요!");

return;

}

DateOK();

}

아주 간단하지 않습니까?! 부끄럽습니다! 나중에 좀더 보안할 예정입니다! 일단 간단하게 설명해드리겠습니다. if(_icon == "") 이런 조건식은 사용자가 내용을 입력하지 않고 확인 버튼을 눌렸는지 알아보기 위함이고요, else if(!id.match(/[a-zA-Z-0-9]/)) 이런 조건식은 정규식을 이용한 것입니다. 사용자가 처음부터 스페이스를 이용해서 이름을 넣을 수도 있기때문이죠. 그리고 else if(pass.length < 4 || !pass.match(/[a-zA-Z-0-9]/))는PassWord 입력은 4이거나 그이상이 되야하는데 4자보다 적게 넣었는지 확인하는 것이고요!!그리고 비밀번호도 스페이스로 쓸수 없게 한것입니다. 더 정확하게 하려면 입력한 비밀번호의 length 만큼 반복을 돌려서 스페이스를 넣었는지 검사를 해야겠죠!! 아무튼 유효성을 대충 이러합니다. 아주 간단합니다. 혹시 이걸보고 만들실분들은 유효성을 직접더 짜보세요!나름 재미도 있습니다^^. 이렇게 해서 유효성에 걸리면 경고 메세지가 뜨고 return이 됩니다. 여기서 return은 함수를 아예 빠져나오게 되는 것입니다. 그리고 걸리는게 없다면 제일 아래에 있는 DateOK() 함수를 호출하게 됩니다. 그럼 DateOK() 함수를 알아 보도록 하겠습니다.

 Script Code(.aspx페이지)

 function DateOK()

{

document.getElementById("<%= IMG_ICON.ClientID %>").value = icon;

<%= Page.ClientScript.GetPostBackEventReference(WriteOK,"")%>

}


위 코드에서
IMG_ICON는 서버컨트롤의 히든필드입니다. 히든필드에 값은 icon(이미지파일이름)값을 넣게 되는 것이요! .cs파일에서는 자바스크립트 변수에 접근할수 없기때문에 값을 히든필드에 넣어습니다. 그리고 다음 코드가 처음 보는 코드인가요!! 저 코는 임의적으로 서버컨트롤에 클릭 이벤트를 주는 것입니다. WriteOK는 링크 버튼 ID입니다. 코드에 보시면WriteOK라는 링크 버튼을 보실 수 있을 것입니다.
자세한 코드 설명은 MSDN 설명으로 보시겠습니다.

Page.ClientScript MSDN 설명

 Page.ClientScript속성 : ClientScript 속성을 사용하여 웹 페이지에서 스크립트를 관리, 등록 및 추가하는 데 사용할 수 있는 ClientScriptManager 개체를 가져옵니다.ClientScriptManager 클래스는 더 이상 사용되지 않는 :Track('ctl00_LibFrame_ctl16|ctl00_LibFrame_ctl17',this);" href="http://msdn2.microsoft.com/ko-kr/library/system.web.ui.page(VS.80).aspx">Page 클래스 메서드 대신 스크립트를 관리하기 위해 ASP.NET 2.0에 새로 추가되었습니다.


그럼 GetPostBackEventReference는 무엇인가 이 또한 MSDN를 설명을 보시겠습니다

GetPostBackEventReference MSDN 설명

 GetPostBackEventReference : 서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다.


GetPostBackEventReference의 오버로드 목록은 아래표와 같습니다.

ClientScriptManager.GetPostBackEventReference (PostBackOptions)


서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다.

참조 문자열은 지정한 PostBackOptions 인스턴스에 의해 정의됩니다.

ClientScriptManager.GetPostBackEventReference (Control, String)  서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 다시 게시 작업과 추가 이벤트 정보의 문자열 인수를 처리하는 지정된 컨트롤에 의해 정의됩니다.
ClientScriptManager.GetPostBackEventReference (PostBackOptions, Boolean)  서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 지정된 PostBackOptions 개체에 의해 정의됩니다. 유효성 검사에 대한 이벤트 참조도 선택적으로 등록합니다.
ClientScriptManager.GetPostBackEventReference (Control, String, Boolean)  서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 문자열을 반환합니다. 참조 문자열은 다시 게시 작업과 추가 이벤트 정보의 문자열 인수를 처리하는 지정된 컨트롤에 의해 정의됩니다. 유효성 검사에 대한 이벤트 참조도 선택적으로 등록합니다.

저 같은 경우는 위 표에서 두번째 오버로드를 사용했다고 볼수 있습니다. 이렇게 하므로써 WriteOK 링크버튼에 OnClick="WriteOK_Click" 이벤트가 발생하는 것이며, 그로인해 서버에서는 DB에 데이터를 넣겨주는 일을 하는 것이지요! 다음에는 서버에서 DB에 어떻게 넣는지 알아보도록 하겠습니다. 읽어 주셔서 감사합니다. 제가 좀 오타가 많아서 혹시 보시면 이해해 주세요. 자꾸 이해해 달래~~!!(웃찾아 유행어 인용)

Posted by happydong
, |