최고보다,최선을... ::

« » 2010.07
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

'Ajax방명록'에 해당되는 글 8건

AJAX 방명록 만들기[9]

프로그래밍/ASP.NET AJAX / 2007/12/05 15:03

guest_board.zip

AJAX 방명록 만들기[9]

이번에는 글을 삭제할 수 있는 삭제버튼을 구현해 보도록 하겠습니다. 제가 만든 Ajax 방명록에는 따로 수정버튼이 있지는 않기때문에 글을 쓰다가 잘 못쓰면 그냥 삭제하고 다시 써야 합니다. 조금 불편하겠네요^^;; 하지만 지금까지 만들었던 내용을 잘 생각해 보시면 수정부분 구현은그리 어렵지 않을 것 이라 생각이 되는 군요~ 그 부분은 숙제로 남기도록 하고요~ㅋ(너무 검방진말투...죄송 ^^;;) 삭제 버튼에 관해서 코드를 하나하나 보도록 하겠습니다. 먼저 아래 그림을 보시면 삭제 버튼이 어디에 붙은 녀석인지 알수 있을 것입니다.

1. 그림

그리고 삭제 버튼을 클릭하게 되면 비밀번호를 입력 할 수 있도록 메세지창 처럼 나타나게 됩니다. 아래 그림과 같이 말이죠.

2. 그림

메세지창이 나타나면 글을 입력했을 때 비밀번호를 입력 하고 삭제를 클릭하면 삭제가 되는 겁니다. 자 이제 본격적으로 코드를 보도록 하겠습니다. 먼저~! aspx 페이지의 구성된 코드를 보도록 하겠습니다.

.aspx페이지

//삭제 취소

function cancel()

{

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

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

}

//삭제 버튼을 클릭함.

function content_Delete(seq)

{

document.getElementById("<%= b_seq.ClientID %>").value = seq;

document.getElementById("<%= delete_table.ClientID%>").style.display = "block";

}

<asp:HiddenField ID="b_seq" runat="server" />

<%-- ################### 방명록 리스트 시작 ###################### --%>

<asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList_databound">

… 중간 생략 …

</HeaderTemplate>

… 중간 생략 …

<img alt="" style="cursor: pointer;" src="images/btn/imgDel.gif" id="Imgbtn_Delete"

onclick="content_Delete('<%# Eval("b_seq")%>')" />

</ItemTemplate>

</asp:DataList>

<%-- ############## 방명록 리스트 끝 ############################## --%>

<%-- ############### 삭제 관련 창 시작 작업중.. ################### --%>

<asp:Panel ID="pnl_delete" runat="server" Style="position: absolute; top: 300px; left: 500px;">

<table id="delete_table" style="display: none; background-color: #959695" cellspacing="0"

cellpadding="0" width="400" border="0" runat="server">

<tbody>

<td style="font-size: 11pt; width: 100%; color: white" id="tdHeader" align="center"

colspan="3" runat="server">

경고 > 삭제 관련

</td>

</tr>

</td>

삭제하시려면 비밀번호를 입력해주세요^^< br />

비밀 번호 : <asp:TextBox ID="User_PassWord" runat="server" TextMode="Password"></asp:TextBox>

</td>

</td>

</tr>

</td>

</tr>

</tr>

</td>

<asp:Button ID="btn_OK" runat="server" Text="삭제" OnClick="content_Deldete" />

</td>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

</asp:Panel>

<cc1:dragpanelextender id="DragPanelExtender2" runat="server" draghandleid="pnl_delete"

targetcontrolid="pnl_delete">

</cc1:dragpanelextender>

<%-- ########################## 삭제 관련 창 끝 ########### --%>

위 코드에서 중간 생략 부분은 AJAX 방명록 만들기[8] 부분에 자세하게 코드가 나와 있습니다. 참고 하실분은 참고 하세요~^^ 코드에 보시면 DataList 컨트롤에 ItemTemplate 안에 img태그가 있습니다. img 태그는 onclick Event를 가지고 있는 것을 볼 수 있습니다. 그럼 이벤트가 호출하는 JavaScript 함수에 대해 알아 보도록 하지요~! 음..인자 값으로 바인딩된 해당글의 번호를 받고 있습니다. 그리고 b_seq 라는 id를 가진 HiddenField 에 value 값으로 설정해 주고 있습니다. 그 다음에 메세지창의 table의 style 속성인 display 를 block로 설정해주고 있습니다. (메세지창의 table의 display 기본설정은 none 입니다) 이렇게 간단한 style 속성을 이용해서 기본적으로 페이지에는 존재하고 있지만 눈에 보이지 않고, 특정 이벤트가 일어날때 보이는 아주 간단한 구조 입니다.^^;;;; 이제 메세지창이 나타났겠군요~! 이 메세지창에서 삭제를 취소 하려고 버튼을 누루면 위에 JavaScript함수인 cancel함수가 호출이 됩니다. cancel 함수는 위 내용을 잘 읽으셨다면 이해하시리라 생각이 됩니다.^^;; 삭제를 진행하시려면 Textbox에 비밀번호를 입력하고 확인을 클릭하면 됩니다. 이때 일어나는 일들에 대해 알아 보도록 하겠습니다. 위 코드에서 보시면... btn_OK 라는 id를 가진 Button이 하나 있는 것을 볼 수 있을 것입니다. 한번 버튼 이벤트(content_Deldete)대해 알아 보도록 하겠습니다. 아래 코드는 비하인트 코드 부분입니다.

Guest_Board.aspx.cs페이지

protected void content_Deldete(object sender, EventArgs e)

{

delete_table.Style.Add("display", "none");

bclass.u_pass = this.User_PassWord.Text;

bclass.b_Seq = int.Parse(this.b_seq.Value);

bclass.Procedure(4);

if (bclass.pass_count != 1)

ScriptManager.RegisterStartupScript(this, this.GetType(), "testeste", "alert('비밀번호가 틀렸습니다!!')", true);

else

ScriptManager.RegisterStartupScript(this, this.GetType(), "Text", "alert('정상적으로 삭제되었습니다!!')", true);

ListBind();

}

처음으로 delete_table(메세지창의 table)의 Style 속성을 변경해 주고 있습니다. 비밀보호를 입력하고 나서는 메세지창이 계속 보여질 필요가 없으므로 않보이도록 했습니다. 그리고 bclass에 property를 이용해서 사용자가 입력한 비밀 번호화 해당글의 번호를 넘기고 있습니다. 삭제 하기 위해서는 필요한값들이지요~^^;; 아래는 property 코드 입니다.

boardClass.cs페이지

private int seq;

private string U_Pass;

public string u_pass

{

get { return U_Pass; }

set { U_Pass = value; }

}

public int b_Seq

{

set { seq = value; }

}

이렇게 값을 넣겨주고 나서는 bclass(boardclass)의 Procedure메소드를 호출하고 있습니다.이부분은AJAX 방명록 만들기 거의 모든 부분에서 다루었던 코드이므로 따로 설명 하지 않도록 하겠습니다~^^;; 인자 값으로 4를 넘기고 있습니다. 해당 코드는 아래와 같습니다~^^

boardClass.cs페이지

public void Procedure(int num)

{

… 중간 생략…

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);

}

gb_password 라는 프로시져를 query의 값으로 설정하고 있네요~
프로시져 내용은 아래와 같습니다.

gb_password Procedure

create proc gb_password

(

@b_seq int,

@b_pass varchar(20)

)

select count(*) from guest_board where b_seq = @b_seq and b_pass = @b_pass

그리고 나서 Db_Parameters 메소드를 호출하고 있습니다. 인자값으로는 bool 값을 넣겨 주고 있네요. Db_Parameters메소드는 AJAX 방명록 만들기[7] 부분에서도 다루었던 내용 입니다. 간단하게 설명하자면 받은 인자 값으로 해당 조건을 확인하고, 해당 프로지셔의 Parameter를 만듭니다.(Db_Parameters메소드의 자세한 코드는 AJAX 방명록 만들기[7]를 참고 해주세요)
그 다음 코드는 dbclass에 GetCheck 메소드를 호출하고 있습니다. 인자값으로 프로지져를 넘기고 있네요. 코드 쓰임새를 보아하니 return 값이 있는 메소드인듯 합니다. GetCheck메소드는 AJAX 방명록 만들기[8] 에서 다루었던 내용입니다. 삭제부분에서쓰여진 목적은 해당 글번호에 있는 비밀번호가 일치하는 게있는지 확인하기 위함 입니다. 일치하는 내용이 있다면 return 값이 1 이고 아니면 0 이 겠지요~^^; (GetCheck메소드의 자세한 코드는AJAX 방명록 만들기[8] 를 참고 해주세요~^^) 조건문을 확인해 보면 0이 아니라면 이니깐...1이면 삭제가 된다는 의미겠군요^^;;그럼 자시 query를 만들고 Parameter를 만들어야 하겠군요~! 프로시져는 아래와 같습니다.

gb_Delete Procedure

create proc gb_Delete

(

@b_seq int

)

delete from guest_board where b_seq = @b_seq

Parameter는 해당 글 번호 하나만 만들면 되겠군요~^^ 하지만 위에서 비밀번호와 해당글번호에 관련된 Parameter를 만들어 두었지 않습니까~!그럼 필요없는 비밀번호 Parameter만 없애 주면 되겠군요~그래서 RemoveAt메소드를 이용했습니다. 0번째를 지우는 거지요. 아까 비밀번호파라미터를 만들고 나서 글 번호 파라미터를 만들었기 때문에 0번째를 지우면 되겠지요.이렇게 지우고나서 dbclass에 ExecuteNon 메소드를 호출합니다. ExecuteNon메소드는 AJAX 방명록 만들기[7] 에서 다루었던 내용 입니다. 간단하게 설명하자면 ExecuteNonQuery메소드를 호출하도록 정의한 메소드 입니다. 이렇게 하면 데이터베이스에서 삭제가 일어 나겠군요~^^ 자 다시 이벤트 부분 코드로 돌아 와서...ㅋㅋ조건문이 하나 있군요~ 보아하니 bclass에서 property를 이용해서 Count값을 가지고와서 그 값이 1 이 맞는지 확인하는 것 같습니다. 맞습니다~! 확인하는 것입니다. 그래서RegisterStartupScript메소드를 통해서 Alert창을 뛰우는 것이지요. 그리고 나서 삭제도 되었으니깐 리스트부분을 다시 바인딩해야 하지 않겠습니까..그래서 코드 마지막에 ListBind()메소드를 호출하도록 했습니다. (ListBind 메소드는 AJAX 방명록 만들기[8]를 참고하세요~^^)
여기까지 제가 만들고자했던 AJAX 방명록이 다 만들어 졌습니다. 초보인 저 또한 이렇게 Ajax Control Toolkit를 이용해서 Ajax 방명록을 만들수 있을 알려드리려고 했는데... 도움이 되셨는지 모르겠습니다. 다소 제 설명이 너무나 미흠해서 이해가 않가실수도 있고...또는 애가 무슨소리하는거야...하는 생각이 들으 셨다면 죄송합니다. 그리고 제가 쓴 내용중에 제가 잘 못 알고 있는 부분이 있다면 서슴없이 따끔한 한마디 부탁드립니다~^^

제가 만든 소스도 올려 놓도록 하겠습니다. 혹시 소스를 보고 잘못된 부분이나 에러 같은 게있다면 말씀해 주세요~^^부족한 저에게 힘이 되어 주세요~ㅋㅋ^^
아무튼 지금까지 제가 나름 쓴 강좌를 읽어 주셔서 감솨합니다~

오늘 하루도 즐거고 행복한 하루되세요~^^홧팅~

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[8]

프로그래밍/ASP.NET AJAX / 2007/12/04 12:49

AJAX 방명록 만들기[8]

날씨도 쌀쌀해 지고 있네요.. 감기들 조심하세요~^^
AJAX 방명록 만들기[7] 부분에서 데이터를 DB에 넘기는 부분을 다루어 봤습니다^^ 이번에는 DB에 있는 데이터를 리스트 형식으로 보여주는 코드를 알아보려고 합니다~! 저는 DataList를 사용해서 만들어서 페이징을 따로 구현을 해야합니다. 그래서 먼저 페이징 구현소스를 먼저 보고, DataList 관련 소스를 보도록 하겠습니다~^^;;

제 말이 잘이해가 않되시더라도 코드를 보면서 하나하나 따라해 보세요~^^; 그리고 제가 항상 말하는 거지만 저 또한 초보개발자 입니다~!그래서 저와 같은 방식으로 만드는 것이 꼭 옮은 것은 아닐수도 있음을 기억해주세요~!ㅋ 우리 같이 더 넓은 미래를 향해 달려가자구요~ㅋㅋ 자~이제 헛소리는 그만하고 아래 코드를 보도록 하겠습니다.

.aspx페이지

function DoPage(current)

{

document.getElementById("<%= hiddenPage.ClientID %>").value = current;

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

}

<asp:LinkButton ID="pageBind" runat="server" OnClick="pageBind_Click">

</asp:LinkButton>

<asp:HiddenField ID="hiddenPage" runat="server" Value="1" />

위 코드를 보시면 JavaScript 함수도 있고... LinkButton도 있고....HiddenField도 있는 것을 볼 수있습니다. JavaScript 함수는 사용자가 페이지를 이동할 때 클릭 이벤트에서 사용 되어질 함수이며, 간단하게 설명하자면 사용자가 선택한 페이지의 번호로를 HiddenField 에Value 값으로 넣게되면서 임의적으로 LinkButton에 이벤트를 주는 것입니다. 자~ 그럼 이제는 비하인드 코드에서 어떻게 코드가 구성이 되는지 알아 보도록 하겠습니다.

Guest_Board.aspx.cs페이지

private int currentPageIndex; //보여질 페이지

protected void Page_Load(object sender, EventArgs e)

{

currentPageIndex = int.Parse(hiddenPage.Value);

Page_Number();

}

위 코드는 페이징에 필요한 변수들을 선언해 두었구요~그리고 Page_Load 이벤트에서 일어 날 행위들을 정의한 부분입니다. Page_Load 이벤트 설명으로는 위에 선언한 변수 currentPageIndex에 HiddenField의 Value 값(기본값 1로지정했음)을 넣어주고 있고요!! Page_Number 라는 메소드를 호출하고 있습니다. 그럼 Page_Number 메소드의 소스를 보도록 하겠습니다.

Guest_Board.aspx.cs페이지

protected void Page_Number()

{

bclass.Procedure(2);

totalCount = bclass.total;

Page_List();

//바인딩 부분

ListBind();

}

Page_Number 라는 메소드가 어떤 행위를 하는지 살펴보면, 처음에는 boardClass에 있는 Procedure라는 메소드를 호출하고 있습니다. 인자 값으로 2를 넘기고 있고요. boardClass 와 Procedure 메소드는 지난 강좌부분에서 다루었으므로 따로 설명하지 않도록 하겠습니다~^^그래도 혹 제가 이런말을 한다고 해서 상처 받는 사람이 있으면 안되기 때문에 Procedure 메소드에 대해 살짝 말하자면 그저 메소드 이름에서도 알 수 있듯이 Procedure를 정의한 메소드입니다. 인자값은 해당 Procedure를 사용하기위한 조건의 값이 되겠구요~^^ 자 아래 코드는 해당 Procedure에 조건 부분만 간추려온 소스 입니다. 지난 강좌 부분에 해당 소스가 있기때문에 이해안가시면 지난 강좌를 참고해 주세요~^^;;

Guest_Board.aspx.cs페이지

private int total_Count; // boardClass의 전연변수 선언

....중간 생략...

else if (num == 2)

{

query = "total_count";

total_Count = dcon.GetCheck(query);

}

역시 위에서 설명한데로 Procedure 명을 정의하고있지요~^^;;그럼 total_count 프로시져에 대해서는 아래와 같습니다.

total_count Procedure

create proc total_count

select count(*) bSeq from guest_board

간단합니다..ㅋ 너무 간단해서 부끄럽네요~^^;;; 그 다음 코드를 보니깐 dbclass에 GetCheck 라는 매소드를 호출하고 있고요, 호출한 값을 전역 으로 선언해둔 total_Count 변수에 할당을 하고 있네요..대충 추측해 보시면 알겠지만 반환값이 있는 메소드인듯 하지요~인자값은 query(프로시져명)라는 값을넘기고 있네요. 그럼 GetCheck 메소드의 소스를 보도록 하겠습니다.

dbclass.cs 페이지

public int GetCheck(string procedure)

{

Comm.Connection = Conn;

Comm.CommandText = procedure;

Comm.CommandType = CommandType.StoredProcedure;

return (int)Comm.ExecuteScalar();

}

역시 int 형의 return 값이 있네요..ㅋㅋ 위 코드는 데이터베이스에 연결하는 코드이겠죠!^^위 코드의 일부는 지난 강좌에서도 다루었던 내용이므로 따로 설명하지 않도록 하겠습니다. 위에 있는 ExecuteScalar 함수는 쿼리를 실행하고 쿼리에서 반환된 결과 집합의 첫번째 행의 첫번째 열을 반환하는 역활을 해줍니다.(MSDN 참고). 리턴된 값은 위에서 와 같이 변수에 할당이 됩니다. 자~그럼 다시 제일 위로 올라가서... 보시면 totalCount 변수에 bclass 의 total을 호출하네요 보니깐 Property 인것 같은데요.아래 코드를 보도록 하시죠~^^

boardClass.cs페이지

public int total

{

get { return total_Count; }

}

아까 db에 연결해서 총수를 가지고 와서 그걸 boardclass에 있는 total_Count 변수에 넣었잖아요!이제는 그값을 Page 쪽으로 값을 넘기고 있네요.^^ 그 다음 코드를 보도록 하겠습니다. 변수에 총수를 할당하고 나서는 Page_List라는 메소드를 호출하고 있는 것을 볼 수 있습니다. 코드는 아래와 같습니다.

Guest_Board.aspx.cs페이지

private int totalCount = 1; //총게시물 수

private int pageSize = 5; //한페이지 출력할 게시물 수

private int startGroup = 1;

private int group = 10;

private int pageCount = 0;//총 페이지 수

public void Page_List()

{

string page = null;

pageCount = (int)Math.Ceiling((double)totalCount / pageSize);

startGroup = ((currentPageIndex - 1) / group) * group + 1;

//처음으로

if (startGroup != 1)

{

page = String.Format("<a href='javascript:DoPage({0})'>{1}</a>",1,"처음");

}

//이전 버튼

if (startGroup != 1)

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",startGroup - group,"이전");

}

//페이지 있는곳까지 돌아라

int loop = 1;

while (loop <= group && startGroup <= pageCount)

{

if (startGroup == currentPageIndex)

{

page += String.Format("<span>{0}</span>", startGroup);

}

else

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",startGroup,startGroup);

}

loop++;

startGroup++;

}

//현재 페이지의 뒷 페이지로

if (startGroup <= pageCount)

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",startGroup,"다음");

}

// 마지막 페이지로

if (startGroup < (pageCount + 1))

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",pageCount, "마지막");

}

Label lblPage = new Label();

lblPage.Text = page;

pnlPageNumber.Controls.Add(lblPage);

}

코드가 참 길죠~^^;;;;; 위에 보시면 pageCount, startGroup 머리를 아프게하는 녀석들이 있죠~!그러나 우리가 페이징을 구현하기위해서 많이 사용하고 있는 공식이라 어쩌면 편하게 느껴질수도 있겠네요~ㅋ 모~쉽게 이해 하시리라 생각이 됩니다~! 총 페이지 수를 알아내기 위해서 (전체 레코드 수 - 1) / 한 페이지의 크기 + 1 이라는 연산을 수행하는 부분인 것이지요. 그리고 그 밑으로 쭈욱~나왔는 조건들..ㅋ 딱 보시면 아하~하실것입니다. 아님.."왜 이렇게 지저분하게 했냐"라는 느낌이 들수도 있는 부분이겠네요~! 그러나 저는 부끄러워 하지 않겠습니다. 저같이 머리 나뿐 초보개발자가 이렇게라도 표현을 했다는것이...정말 대견스럽지 않습니까..ㅋㅋ^^;;(죄송합니다) 아~다시 돌아와서 위에 String 형식의 변수를 선언해서 해당 조건에 걸리면 <a>링크로 만들고 있습니다. 그리고 마지막 부분에 보시면 Label를 동적으로 생성을해서 Text값을 지정하고 있이요.대충 감이 오셨겠군요 그리고 나서pnlPageNumber라는 Label에 추가 해주고 있습니다. pnlPageNumber는 어디붙은 녀석이나면요. 아래 코드를 참고해주세요~

.aspx페이지

<%-- ###################### 방명록 리스트 시작 ##################### --%>

<asp:Panel runat="server" ID="pnl_dataList" Style="width: 100%;">

<asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList_databound">

<div id="list_title" style="color: #CC6666; text-align: center; font-size: 18pt;

background-color: #CCCCCC;">방명록 List 입니다~^^</div></td>

</tr></table>

</HeaderTemplate>

</tr>

</tr><tr style="height: 150px;"><td colspan="4" style="padding: 5px;">

<img alt="" style="cursor: pointer;" src="images/btn/imgDel.gif" id="Imgbtn_Delete"

onclick="content_Delete('<%# Eval("b_seq")%>')" />

</td></tr></table>

</td></tr>

</table>

</ItemTemplate>

</asp:DataList>

<asp:Label ID="pnlPageNumber" runat="server"></asp:Label>

</asp:Panel>

<%-- ################# 방명록 리스트 끝 ####################### --%>

이렇게 하면 페이징이 리스트 아래부분에 나타나겠지요~!그리고 javascritp 함수를 호출하도록 했기때문에 클릭하면 javascript 함수가 호출하겠지요. 소스는 제일위에 있내요.DoPage(current)라는 인자값으로 보여질페이지의 번호를 넘기도록 합니다. 그래서HiddenField에 값을 지정(currentPageIndex 변수값이됨)하고 해당 링크 이벤트를 발생하게 합니다. 이벤트 코드는 아래와 같습니다.

Guest_Board.aspx.cs페이지

protected void pageBind_Click(object sender, EventArgs e)

{

this.ListBind();

}

간단하게도 ListBind 메소드를 호출하고 있습니다. 아까 위에서도 마지막 부분에 ListBind를 호출하는 소스를 보셨을 텐데요 그럼 ListBind 메소드 코드를 보도록 하시지요~!

Guest_Board.aspx.cs페이지

protected void ListBind()

{

int sum = (currentPageIndex - 1) * pageSize;

string query = String.Format("SELECT TOP {0} b_seq,b_name,b_content,b_ip,b_time,b_icon FROM guest_board WHERE b_seq NOT IN (SELECT TOP {1} b_seq FROM guest_board ORDER BY b_seq DESC)ORDER BY b_seq DESC", pageSize.ToString(), sum);

bclass.Query = query;

bclass.Procedure(3);

this.DataList1.DataSource = bclass.dataset;

this.DataList1.DataBind();

}

페이징을 위한 쿼리를 만들어서 날리는 부분이네요.(그냥 프로지져로만들면 편하겠네요) 켁~!부끄럽네요. 너무 허접해서리..ㅋ지금까지 보오셨던 데이터베이스 연결 구분과 똑같습니다. 따로 설명하지 않아도 지금까지 제가 썼던..강좌(!? 강좌라고 하는 좀 부족하죠..ㅋ)를 보시면 bclass는 이해하시리라 생각이 됩니다.^^; 코드 마지막쯤에 보시면 DataList 에DataSource는 정의하고 있네요. 그에 관련된 소스들을 그냥 한번 보도록 하겠습니다.

boardClass.cs 페이지

private DataSet ds = new DataSet();

public string Query

{

set { query = value; }

}

public void Procedure(int num)

{

.. 중간 생략 ..

else if (num == 3)

{

ds = dcon.GetDataSet(query);

}

public DataSet dataset

{

get { return ds; }

set { ds = value; }

}

dbclass.cs페이지

public DataSet GetDataSet(string procedure)

{

public SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand(procedure, Conn);

DataSet ds = new DataSet();

adapter.Fill(ds);

return ds;
}

위 코드와 Property를 이용해서 DataSet 형식을 받아서 DataSource 를 지정해주게 됩니다.그리고나서 DataBind를 시키면 다시 새로운 원하는 페이지의 글들이 나타나게 되는 거지요~^^휴~이렇게 긴 내용을 다루려고 하니깐 정말 힘드네요~! 저도 배우는 입장에서 어떻게 설명을 해야할지.. 마구 막히는 부분이 있던것 같 습니다. 이 글을 읽으시는 분들의 넓으신 아량으로 이해해 주세요~!

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[7]

프로그래밍/ASP.NET AJAX / 2007/11/21 12:45

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();

}

위 코드는 확인 버튼을 클릭하고 나서 대충유효성 검사까지 완료 되면 비하인드코드에서 일어나는 행위들입니다. 코드에서 bclass는 boardClass를 인스턴트로 생성한 것 입니다. 코드 위 부분에 인스턴트로 생성한 코드가 보이시지요. 그래서 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>

그리고 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)

)

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)

그 다음는 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 drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[6]

프로그래밍/ASP.NET AJAX / 2007/11/17 01:08

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)

)

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)

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

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[4]

프로그래밍/ASP.NET AJAX / 2007/11/17 00:53

AjAX 방명록 만들기[4]

이번에는 이미지 모음이 간단한 애니메이션 효과와 함께 나타나는 코드를 보도록 하겠습니다. 제가 스토리보드 부분에서 "이미지 삽입 클릭~^^" 부분을 클릭하면 이미지 모음이 나타난다고 했습니다. 일단 그림으로 잠깐 보도록 하겠습니다.

1 - 1 그림.

1 - 2 그림

1 - 3 그림

위 그림으로 보았듯 어떤 애니메이션 효과인지 미리 집작할수 있을 것입니다. 그림 일단 이미지 모임 구현 HTML 코드를 보도록 하겠습니다.

.aspx페이지 Code

<%--#####################이미지 리스트 시작 ###########################--%>
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

<asp:Panel runat="server" ID="pnl_imglist1" CssClass="ImgList" Style="display: none;">

<asp:Panel runat="server" ID="pnl_imglist2" CssClass="imgList" Style="display: none;">

<table border="0" cellpadding="0" cellspacing="0" style="filter: alpha(opacity=80);

background-color: White;" width="100%">

<tr>

</tr>

<tr>

</tr>

<tr>

<td><input type="radio" id="base_check" name="img_Radio"

value="01" checked="checked" onclick="img_radio(this.value)" /></td>

</tr>

중간 생략.....

<tr>

</tr>

</table>

</asp:Panel>

<cc1:dragpanelextender id="DragPanelExtender1" runat="server"

draghandleid="img_title" targetcontrolid="pnl_imglist1"></cc1:dragpanelextender>

<%--######################이미지 리스트 끝 ##############################--%>

중간 생략 부분은 같은 코드가 반복이라 생략하였습니다. 위 코드를 보시면 이미지 모음 테이블이 두개의 Panel로 감싸저 있습니다. 그리고 두개의 Panel 은Style="display: none;" 으로 설정이 되어 있습니다. 그렇기 때문에 브라우져에 나타나지 않는 것이죠!!그럼 언제 어떻게 나타나느냐!? 아래 코드를 보면 알수 있을 것입니다.

AnimationExtender Code(.aspx 페이지)

<%--##################### 애니메이션 시작 ############################# --%>

<cc1:animationextender id="Animation" runat="server" targetcontrolid="Div_img">

<Color AnimationTarget="pnl_imglist1" PropertyKey="backgroundColor"

StartValue="#AAAAAA" EndValue="#959695" />

</Parallel>

</Parallel>

<Color AnimationTarget="pnl_imglist2" PropertyKey="backgroundColor"

StartValue="#FFFFFF" EndValue="#959695" />

</Parallel>

</Sequence>

</OnClick>

</Animations>

</cc1:animationextender>

<%-- ########################## 애니메이션 끝 ####################### --%>

위 코드는 AJAX ControlToolkit중에서 animationextender 컨트롤 입니다. 이름 그대로 애니메이션 효과를 정의할 수 있는 컨드롤인 것이죠! 아직까지는 animationextender 컨트롤 사용법에 대해서 자세하게 나온 책들은 없는 것같아요!(http://www.asp.net/ajax/ajaxcontroltoolkit/samples/Walkthrough/UsingAnimations.aspx)
위 주소를 참고 하시면 여러가지 애니메이션 효과를 사용하실수 있을 것입니다. 참고 하세요!^^ 이제 코드를 본격적으로 살펴 보도록 하겠습니다.

<cc1:animationextender id="Animation" runat="server" targetcontrolid="Div_img">

위 코드에서 id는 원하는 이름으로 주시면 됩니다. 그리고 targetcontrolid는 OnClick 이벤트가 일어날 대상의 id를 정의해 주면됩니다.(주의: id를 서버컨트롤이어야 합니다.)저 같은 경우는 "이미지 삽입 클릭" 부분은 <div> 감싸고 id를 Div_img라고 했습니다. (AJAX 방명록 만들기[3] 소스참고)

애니메이션을 명시해 주고 있죠!

이벤트를 지정해 줍니다.

단어에서 뜻이 "연속..연달아 일어남.."인 듯한거 보니깐 그 안에 있는 코드가 연달아서 일어 난다고 예상할수 있을 것입니다.

어떤식으로 Action이 일어날것인지 정의해 주고 있죠!! Attribute는 style태그를 지정해주고 Value는 그style태그에 맞는 값을 지정해주는 것이죠!그리고 AnimationTarget은 이 style이 적용될 id를 넣어주면 되겠습니다. 위 코드에서 보시면 아시겠지만 pnl_imglist1 는 Panel의 id입니다. 거기 보시면 style에 display가 none으로 설정되어 있습니다. 하지만 클릭이벤트가 발생하면 그 style이 block으로 설정된다는 이야기죠!! 조금 이해가 되시죠!!

<Color AnimationTarget="pnl_imglist1" PropertyKey="backgroundColor"

StartValue="#AAAAAA" EndValue="#959695" />

</Parallel>

위 코드도 아주 멋진 애니메이션효과를 주는 코드인것 같습니다~^^

Parallel 뜻을 찾아보니.. "평행의,나란한..."이라고 하는군요!그럼 나란하게 평행하게 애니메이션이 일어 난다는 이야기겠죠!!(맞나!?)저도 공부하면서 알아보는 거라서요!ㅋ 가끔 이런식으로 이야기를 해도좀 이해해주세요^^;;자 그럼 속성을 보도록 하죠!!AnimationTarget 은 이제 바로 이해하시겠죠. Duration 은 뜻을 찾아보니깐 "지속,계속,존속" 이라고합니다.그럼 평행하게 지속적으로 무언가가 일어 난다는 거겠죠!! 저는 .3으로 설정했습니다.그간격으로 일이 진행이 되겠죠.그럼 Fps는 무엇인가..이거는 사전에도 찾을 수 없더라고요!!근데..제가 집작하는 건데요!!왠지 속도를 뜻하는게 아닐까...하네요!! 저는 25로 설정을 했는데..25를 기준으로 낮게 하면 버벅거리면서 열리고요! 높으면 아주 부드럽게 열린다고 해야하나!!그렇더라고요!!그래서 이거는 제가 직잡하는 것 입니다. 나중에 더 공부해서 알아 볼게요^^;;;

Move는 움직임을 뜻하겠죠! 수평으로 얼마큼 움직여라..수직으로 얼마큼 움직여라

는 내용입니다.

Resize 는 사이크를 발하는 것이겠습니다. 최종사이즈는 정하는 것이죠!!

Color 는 색의변화를 지정해주는 것입니다. 역시 AnimationTarget를 정하고 PropertyKey는 style태그를 넣고 StartValue 처음보여줄 색과 EndValue 마지막보여줄 색을 정의합니다.위에 Parallel 코드안에 Move와 Resize , Color가 감싸저 있으니 Parallel TargetID 에서 애니메이션이 일어 나겠죠! 자 그 다음 코드들은 반복되는 코드니깐 이제 조금 알수 있을 것이라고 생각이 됩니다!!

자 이제 다시 이미지 모임 구현 HTML 코드를 보시겠습니다. 제일 마지막쯤에 dragpanelextender컨트롤이라고 보이 실것입니다. 그 컨트롤에 대해서 알아보도록 하지요!

dragpanelextender컨트롤은 이름 그대로 드래그를 할 수 있는 컨트롤이라고 할 수 있습니다. 즉 사용자가 원하는 위치로 움직일 수있다는 이야기죠. 이제 이해가 되 셨습니까! 기존에는 이렇게 움직이는 컨트롤을 짜려면 Script로 힘들게 짜야했죠 아니면 어디서 복사해와서 쓰던지요. 그런데 dragpanelextender컨트롤를 이용하면 간단한 설정만으로 그런한 기능이 손쉽게 구현된다는 말씀입니다! 자 한번 속성을 간단하게 알아 볼까요.

TargetControlID	드래그를 가능하게 하는 패널 컨트롤의 ID입니다.
DragHandleID	패널 컨트롤을 위해 드래그를 할 수 있는 컨트롤의 ID입니다. 사용자가 이 컨트롤을 클릭하여 드래그하면 패널 컨트롤이 움직이게 됩니다

아주 간단하지 않습니다?!^^ 정말 간단해서 제가 따로 설명할 필요가 없을 것 같군요.속성의 내용만 보고도 알것습니다. 그렇죠!

그럼 이미지 모음부분은 이만 설명하도록 하겠습니다. 오~정말 제가 초보라서 그런지 설명하는데 부족한점을 많이 느끼고 있습니다.정말 쉽지 않네요. 아무튼 저같은 초보자들에게 조금이나마 도움이 되었으면 하는 바램입니다.그럼 다음에는 간단한 유효성 Script 코드를 보고 DB에 넣는 코드를 한번 보시겠 습니다~!

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[3]

프로그래밍/ASP.NET AJAX / 2007/11/17 00:47

AJAX 방명록 만들기[3]

1,2 강좌는 코드에 대한 내용이 별로 없어서 지루했을 것 같습니다.

이제 본격적으로 코드를 한번 살펴 보도록 하겠습니다. .aspx 페이지를 보시면 아래와 같은 코드가 들어가 있을 것입니다.

.aspx페이지

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Guest_Board.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

</asp:Content>

위 코드에서 <asp:Content> 와 </asp:Content> 사이에 아래와 같은 코드를 집어 넣습니다.

.aspx 페이지

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Guest_Board.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<%--########## 여기도 추가해주세요!!아래에서 설명하겠습니다.###### --%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<%--##########이렇게 추가해주세요!!###### --%>

<asp:ScriptManager runat="server" ID="Scritemanager">

</asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="Updatepanl">

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

위와 같이 코드를 직접 입력해 주셔도 되고요!!아니면 컨트롤을 끌어다가 넣으셔도 상관 없습니다. 컨트롤은 아래 그림과 같이 있습니다.

위 컨트롤을 선택후 원하는 위치에 끌어다가 넣으면 코드가 알아서 생성됩니다. 그럼 ID만 정해주면 되겠죠!그럼 위 코드에서 ScriptManager 와 UpdatePanel 이 왜들어가는지 약간 궁금하시리라 생각됩니다. Ajax 방명록을 만들기위해서 제일 중요한 컨트롤들 입니다. 이 두개의 컨트롤이 없다면 조금 복잡한 코드로 만들어야 하겠죠!
. ScriptManager 컨트롤은 Ajax 컨트롤을 사용하려면 꼭 넣어야하는 코드입니다. 안그러면 일단 에러가 나거든요!! 이름 그대로 Ajax컨트롤들의 Manager 역활을 담당하는것 같습니다.
. UpdatePanel 컨트롤은 정말 대단한것 같습니다. 기존에 Ajax기술을 구현하려면 Ajax engine를 따로 구현해야 했죠. 그렇게 해야 클라이언트 브라우저에서 깜빡이 없이 데이터가 처리가 될수 있었죠. UpdatePanel안에 감싸져 있는 것들은 페이지 깜빡인 없이 데이터가 처리될 수 있습니다! 따로 Ajax engine를 만들필요 없이말이죠. 정말 대단한 컨트롤인것 같습니다. 하지만 UpdatePanel를 너무 남발하면 않좋다고 합니다. 그리고 Ajax컨트롤들도 너무 많이 사용하면 브라우저가 무거워진다고 하네요.자 그럼 이제 글쓰는 부분의 HTML코드를 보겠습니다.

HTML Code (.aspx페이지)

<asp:UpdatePanel runat="server" ID="Updatepanl">

<%--########################방명록 글쓰기 시작 ######################## --%>

※ 주의 닉네임은 1~12자이내,비밀번호는4~12자이네,내용은 1자이상이여야합니다!

Dong wook 방명록 남겨주세요~^^      <asp:Image runat="server" ID="write_Img"

ImageUrl="~/images/btn/imgdown.gif" Style="cursor: pointer;" /></div>

</div>

<asp:Panel runat="server" ID="write_Header2">

<tr>

</div>

이미지삽입 클릭!^^

</div>

</td>

</tr>

 닉네임</td>

<asp:TextBox runat="server" ID="txtuserName" TextMode="SingleLine"

CssClass="Userinfo" MaxLength="12"></asp:TextBox></td>

비밀번호</td>

<asp:TextBox runat="server" ID="txtpassword" TextMode="password" CssClass="Userinfo"

MaxLength="12"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox runat="server" TextMode="MultiLine" ID="txtContent"

CssClass="txtContent"></asp:TextBox>

</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="write_Header2" ExpandControlID="write_Img"

CollapseControlID="write_Img" ImageControlID="write_Img"

ExpandedImage="~/images/btn/imgUp.gif" CollapsedImage="~/images/btn/imgdown.gif">

</cc1:CollapsiblePanelExtender>

<%--########################### 방명록 글쓰기 끝 ####################### --%>

</ContentTemplate>

</asp:UpdatePanel>

위 코드가 아래의 그림처럼 보여지게 되겠지요!

음.. 코드가 좀 길네요! 근데 기본적인 HTML코드를 아시는 분들은 이해하시리라 생각 됩니다. 저는 여기서 주요 요소만 설명해드리겠습니다. 먼저 한눈에 딱 들어오는 코드가 있죠! CollapsiblePanelExtender 컨트롤!! 컨트롤 앞에 cc1: 가 붙은 이유는 젤위에 코드에 아래와 같은 코드가 있기때문이죠.

Register(.aspx페이지)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

TagPrefix="cc1" %>

마치 ASP.NET server 컨트롤과 비슷하게 사용되지 않습니까 <asp:TextBox....> 비슷하죠!!TagPrefix 부분에 자신이 사용한 원하는 이름으로 바꾸셔도 상관없습니다. test로 바꾸시면<test:CollapsiblePanelExtender로 쓰시면 되겠죠^^!아무튼 CollapsiblePanelExtender 컨트롤이 모하는 컨트롤이냐면요!! 스토리보트에서 보면 글쓰는 부분이 닫혔잖아요!!그걸 가능하게 해주는 컨트롤 입니다. 기존에는 자바스크립트로 어렵게 만들어야 했지만 이컨트롤을 이용하면 아주 쉽게 해결이 됩니다. 속성은 아래표와 같습니다.

TargetControlID	확장하거나 축소하는 동작을 실행할 Panel 컨트롤 ID 입니다.
CollapsedSize	축소된 상태일 때의 대상 컨트롤의 사이즈로써, 픽셀 단위로 지정합니다.
ExpandedSize	확장된 상태일 때의 대상 컨트롤의 사이즈로써, 픽셀 단위로 지정합니다.
Collapsed	처음 컨트롤이 로딩될 때 축소된 상태 또는 확장된 상태로 화면에 보이게 할 것인지를 정의합니다. (bool형 지정)
AutoCollapse	대상 컨트롤인 Panel에서 마우스를 벗어나게 했을 경우 자동적으로 축소시킬 것인지를 정의합니다(bool형 지정)
AutoExpand	대상 컨트롤인 Panel에 마우스를 올렸을 경우 자동적으로 확장시킬 것인지를 정의합니다. (bool형 지정)
ScrollContents	컨텐츠(내용)가 패널 자신보다 더 클 경우 스크롤바를 보이게 할 것인지를 정의합니다. (bool형 지정)
ExpandControlID / CollapseControlID	확장되거나 축소하게 하는 클릭 이벤트를 줄 컨트롤 ID을 정의합니다.
TextLabelID	Panel 컨트롤이 위치된 곳에서 보여줄 "상태 글자(status text)"를 나타내는 Label 컨트롤의 ID를 정의합니다.
CollapsedText	Panel 컨트롤이 축소되었을 때 TextLabelID에 의해 정의된 컨트롤에서 보여지는 글자를 정의합니다.
ExpandedText	Panel 컨트롤이 확장되었을 때 TextLabelID에 의해 정의된 컨트롤에서 보여지는 글자를 정의합니다.
ImageControlID	Panel 컨트롤이 위치된 곳에서 축소된 상태를 가리키는 Image 컨트롤의 ID를 정의합니다.
CollapsedImage	Panel 컨트롤이 축소되었을 때ImageControlID에 의해 사용되는 이미지의 경로를 지정합니다.
ExpandedImage	Panel 컨트롤이 확장되었을 때ImageControlID에 의해 사용되는 이미지의 경로를 지정합니다.
ExpandDirection	Panel 컨트롤이 상하 또는 좌우로 확장될 것인지에 대한 "Vertical"이나 "Horizontal"을 지정합니다.

위 속성을 보시면 제가 설정한 속성을 한번에 알수 있을 것 입니다.

CollapsiblePanelExtender (.aspx 페이지)

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="write_Header2" ExpandControlID="write_Img"

CollapseControlID="write_Img" ImageControlID="write_Img"

ExpandedImage="~/images/btn/imgUp.gif" CollapsedImage="~/images/btn/imgdown.gif">

</cc1:CollapsiblePanelExtender>

아주 간단하지 않습니까^^ 초보인 저도 이렇게 가능합니다~!
이번 내용은 여기까지 다루도록 하고요 다음 편에서는 이미지 모음이 어떻게 나타나는지 알아 보도록 하겠습니다!!

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[2]

프로그래밍/ASP.NET AJAX / 2007/11/17 00:43

AJAX 방명록 만들기[2]

이제 Ajax 방명록이 어떻게 만들어 졌는지 하나하나 보도록 하겠습니다!! 항상 말하지만 저또한 .NET 초보자니깐요!! 잘못된 부분이나 부족한부분 알려 주세요~! 근데 사람들이 보기는 할까 의문입니다ㅋ 제일 먼저 Visual Studio를 실행해야 겠죠!^^ 아~! 그리고 AJAX 방명록을 만드시려면 몇가지 갖추어야 할 사항이 있습니다.

ㅁ ASP.NET Extensions 를 설치를 해야 합니다.

ㅁ ASP.NET Ajax controlToolkit 참조해야 합니다.

(다운로드 받을수 있는 곳입니다. http://www.asp.net/ajax/downloads/ 가시면 ControlToolkit과 ASP.NET Extensions v1.0버전을 다운로드 할수 있습니다! 설치 방법도 간단 합니다.실행후 다음다음...아시죠!^^)
ASP.NET Extensions는 .NET Framework 2.0 이상에서 지원이 된다고 합니다. 고로 Visual Studio2005로 AJAX방명록을 만들어야 겠죠!^^
VS2005를 실행하시면 상단 메뉴에 파일 >> 새로만들기 >> 웹사이트 클릭하시면 아래와 같은 그림이 나타 납니다.

그리고 ASP.NET Extensions 설치했다면 AJAXEnabledWebSite 템플릿이 보일 것입니다. 그걸 선택을 하고 프로잭트 이름을 주면 되는 거죠! 저는 "guest_board"라고 해봤습니다! 자 이제 프로젝트가 실행이 되었겠죠!! 그럼 이제 Ajax controlToolkit dll를 참조해야합니다.

프로제트에서 오른쪽 마우스를 클릭하면 위 그림과 같이 메뉴가 나타나는데요!! 참조추가는 클릭하면 아래와 같은화면이 나타나는데요!!거기서 찾아보기 텝을 선택하신다음에 다운로드 하신 Ajax controlToolkit dll 파일을 찾아서참조해주세요!!

자 참조 추가도 했습니다!! 이제 저와 같이 파일을 추가해볼까요!!

아마 기본적으로 Default.aspx 페이지가 있을 텐데요!! 저는 그냥 MasterPage를 만들어 보았습니다. 혹시 나중을 위해서요!!저 같이 마스터페이지를 만드실거면 처음에 생성된 Default페이지는 그냥 지워 버리세요!! 지우지 않으셔도 되긴 하지만...안에 코드를 조금 바꿔야 하거든요! 그냥 지우고 만드는 좋을것 같아서요!! 그럼 아까 처럼 프로젝트에 마우스 오른쪽클릭하면 "새 항목 추가"가 있습니다. 그걸 클릭하면 여러가지 템플릿들이 나오는데요!! 거기서 마스터 페이지를 선택하세요!! 그럼 마스터 페이지만 생길거예요!! 그 다음에 MasterPage.master 파일이 생기죠 거기에서 다시 마우스 오른쪽 클릭하면 또 여러가지 메뉴가 나타나는데요!! 거기서 콘텐트 페이지 추가를 선택하세요. 그럼 .aspx페이지가 생성됩니다. 그럼 이름을 바꾸시면 됩니다. 저는 "Guest_Board.aspx" 라고 했습니다. 지금까지 이해 안되시는 부분 없으셨죠~^^ 그 다음에 위 그림과 같이 .js파일, .css파일, images폴더, boardClass.cs, dbClass.cs 를 생성합니다. 이 파일역활을 갈약하게 설명하자면 아래 같습니다.

- boardClass.cs : 글쓴 내용을 받아서 프로시져의 Parameter를 생성하는 역활을 합니다.

(왜 이렇게 코드를 짯을까...그냥 이렇게 해보고 싶었어요!!)

- dbClass.cs : 데이터 베이스에 연결하고 쿼리를 실행하는 역활을 합니다.

- js파일 : 유효성 체크하기 위함

- css파일 : style를 적용하려고요!!(근데...짜다보니깐 별로 안쓰더라고요!제가 아직 미흡해서 그런 것 같아요!!)

아무튼 저는 이렇게 파일을 생성했습니다~^^ 이제 여기끼지 준비가 되었다면 이제 다음 강좌에서 글쓰는 부분을 만들어 보도록 하겠습니다!! 빨리빨리 만들어야하는데...짜꾸 이렇게 말만 많았네요!! 저같은 초보자들을 위해서 하나하나 차근차근 집고 넘어가기 위해서 입니다. 그러니 양해해주세요!^^

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[1]

프로그래밍/ASP.NET AJAX / 2007/11/17 00:30

AJAX 방명록 만들기[1]

저는 닷넷을 시작한지 얼마되지 않은 초보자 입니다. 제가 알고 있는 내용을 바탕으로 Ajax 방명록을 만들어 보았습니다!! 혹시 이글을 읽는 분이 있다면 혹시 잘못된 부분이나 부족한 부분들 딱끔하게 지적해주세요!! 그리고 저같은 초보자들에게 조금이나마 공부하는데 도움이 되었으면 좋겠습니다^^

자~ 그럼 한번 제가 만든 Ajax방명록을 소개 하도록 하겠습니다. 소개후 차근차근 하나하나 어떻게 만들었는지알려 드리도록 하겠습니다~^^자 그럼 시작해 볼까요!^^
방명록이라고 하면 우리가 예상할 수 있듯이 글쓰는 곳과 리스트부분이 같은 페이지에 있는 것을 예상할수 있을것입니다!!맞습니다. 제가 만들 방명록도 그러한 페이지 입니다. 하지만 조금 다른 점이있다면 ASP.NET AJAX를이용해서 페이지 깜빡이지 않고 데이터를 처리한다는 것이 조금 다르다고 할 수있겠네요!!^^

그럼 제가 만든 AJAX 방명록 스토리 보드를 보시겠습니다~^^

1. 방명록 전체 페이지 입니다!!

별거 없죠!^^ 제가 나름데로 디자인도 해보았는데...쉽지 않더라고요!! 아직 DB에 글이 없기 때문에 List에 나타나지 않았습니다.여기서 사용자가 글쓰는 부분을 닫고 싶다고 하면..."Dong wook 방명록 남겨주세요~^^" 옆에 화살표 를 클릭하면 글쓰는 부분이 닫히게 됩니다.

2. 글쓰는 부분 닫힌 모습.

말로 설명하는 것 보다 눈으로 보는게 더 좋겠죠!!^^

3.이미지 삽입

저는 방명록에 사용자가 이미지를 선택해서 입력할수 있도록 했습니다!!위 그림과 같이 글 쓰는 부분왼쪽에 보시면 "이미지 삽입 클릭!^^"이라는 내용이 있습니다! 그 부분을 클릭하면 위 그림과 같이 이미지를 선택할 수 있도록메뉴가 나타나게 됩니다!

4.글쓰기

위 그림은 첫번째 글쓰고 리스트에 보여지게 하고 두번째 글을 쓰고 있는 그림입니다!!당연히 글을 쓰면 DB에 들어가고 리스트에 보여줘야 하겠죠!!하지만 페이지는 저녀 깜빡이지 안고 리스트에 보여진다는거....나중에 코드부분에서 설명하겠습니다~!!

5. 글 삭제하기

리스트 부분에 휴지통 이미지를 클릭하면 비밀번호를 입력 할수 있는 부분이 나타납니다. TextBox에 비밀번호를입력하면 글이 삭제가 됩니다. 정상적인 비밀번호를 입력하시면 삭제가 이루어지고 "정상적으로 삭제 했습니다!"라는 메세지가 나오겠고...잘못 입력하셨다면...메세지는 "비밀번호가 잘못되었습니다"이런 식으로 메세지가 나오겠죠!^^ 자 지금까지 제가 만든 Ajax 방명록 스토리 보드는 간단하게 보았습니다!!
그럼 다음 강좌부터는 어떻게 만들어 졌는지 하나하나 보도록 하겠습니다.
제가 쓰는 글은 거의 초보자 수준이니 많이 이해해 주세요~

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

«이전 1 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'Ajax방명록'에 해당되는 글 8건

AJAX 방명록 만들기[9]

Trackback | http://www.happyday214.com/trackback/25

AJAX 방명록 만들기[8]

Trackback | http://www.happyday214.com/trackback/23

AJAX 방명록 만들기[7]

Trackback | http://www.happyday214.com/trackback/12

AJAX 방명록 만들기[6]

Trackback | http://www.happyday214.com/trackback/11

AJAX 방명록 만들기[4]

Trackback | http://www.happyday214.com/trackback/9

AJAX 방명록 만들기[3]

Trackback | http://www.happyday214.com/trackback/8

AJAX 방명록 만들기[2]

Trackback | http://www.happyday214.com/trackback/7

AJAX 방명록 만들기[1]

Trackback | http://www.happyday214.com/trackback/6

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크