C# 12장. 웹 응용 프로그램 제작.

Presentation on theme: "C# 12장. 웹 응용 프로그램 제작."— Presentation transcript:

1 C# 12장. 웹 응용 프로그램 제작

2 1. ASP.NET 개요 ASP.NET 이란 ASP.NET 이란 닷넷 프레임워크와 함께 발표되었으며, 닷넷 언어를 이용해서 웹 응용프로그램을 개발하는 기술을 의미한다. ASP.NET 은 기존의 ASP에 비해 완전히 새로운 프로그래밍 모델을 제공하며, c#, VB.NET, J#, C++.NET 등의 닷넷 언어로 개발한다. ASP.NET이란, 개발 언어를 의미하는 것이 아니라 닷넷 환경에서의 웹 개발 방법과 기술이다.

3 1. ASP.NET 개요 ASP.NET의 특징 디자인과 코드의 분리
ASP는 화면에 보이는 부분은 HTML, 실제 코드는 ASP 코드로 작성해서 소스가 보기 어렵고 복잡했지만, ASP.NET은 디자인 구현 부분과 실제 프로그래밍을 구현하는 코드가 분리되어 있으므로, 개발할 때와 수정할 때 간편하게 분리해서 작업을 할 수 있다. 다양한 브라우저 지원 지금까지 웹사이트를 개발하려면 개발 언어의 특성 때문에 익스플로러와 넷스케이프용 화면을 각각 개발해야 했으나 ASP.NET은 이 두가지 브라우저 뿐만 아니라, PDA 같은 무선 장비에서도 페이지 하나만을 작성해서 적용할 수 있다. 컴파일된 닷넷 기반의 환경 닷넷과 호환되는 어떤 언어도 이용할 수 있으며, C#파일(*.cs)과 마찬가지로 실행되기 전에 컴파일을 거치므로, 일반적인 오류를 미리 검출하고 실행 속도를 향상 시킬 수 있다. 웹 폼 기반의 개발 환경 비주얼 베이직처럼 사용자 개발 환경(gui)을 직접 보면서 개발할 수 있기 때문에 개발할 때 직관성이 뛰어나다. 그리고 이벤트 드리븐(event driven)방식으로 개발하기 때문에 웹 페이지의 링크나 버튼, 여러 가지 폼에 대한 기능을 상세하게 구현할 수 있다.

4 1. ASP.NET 개요 웹 폼이란? 웹 폼(Web Form) 이란 ASP.NET의 화면 디자인 및 GUI를 개발하기 위한 기술로서, 웹 응용프로그램 개발을 위한 가장 기본적인 기능이다. ASP.NET 웹 폼(Web Form)의 확장자는 .aspx이며, 웹 폼 페이지의 내부 구조는 다음과 같이 3가지 부분으로 구성된다. @Page 지시자 : HTTP 런타임이 웹 폼 페이지를 어떻게 처리해야 하는지를 기술하며 웹 폼 페이지의 실행될 환경을 설정한다. 서버측 코드 부분 : runat=“server”속성을 포함하는 <script> 태그 부분은 일반적으로 이벤트 핸들러(Handler)나 Helper 함수들이 위치한다. 페이지 레이아웃 부분 : 페이지 레이아웃은 페이지 골격을 나타낸다. 이 부분은 서버 컨트롤, 문자열 텍스트, 그리고 HTML 태그를 포함한다.

5 1. ASP.NET 개요 ASP.NET 컴포넌트 모델
닷넷 프레임워크의 클래스 라이브러리는 클래스의 객체 지향적 계층 구조로 이뤄진다. ASP.NET은 이러한 닷넷 프레임워크의 웹 기술이기 때문에 닷넷 프레임워크의 객체 모델 특징을 직접, 또는 간접적으로 이어 받는다. 실제 ASP.NET의 웹 폼 페이지는 ASP.NET 런타임에 의해 실핼될 때, 단순히 텍스트 문서처럼 파싱되어 처리되는 것이 아니라 Page 클래스의 파생 클래스로 생성된다. 이 클래스의 인스턴스가 만들어져 실행되는 것이기 때문에 ASP.NET은 닷넷 프레임워크 클래스 라이브러리를 사용할 수 있을 뿐만 아니라 자신의 Page 클래스를 확장해서 웹 프로그램을 작성할 수 있다.

6 1. ASP.NET 개요 ASP.NET ASP.NET 서버 컨트롤은 ASP.NET 페이지에서 웹 응용 프로그램의 사용자 인터페이스(UI)를 정의하기 위해 사용되는 컴포넌트다. 이것은 웹 폼 프로그래밍 모델의 가장 핵심이 되는 요소다. 서버 컨틀롤은 크게 HTML 서버 컨트롤과 웹 서버 컨트롤로 나눠지며, 모든 서버 컨트롤은 runat = “server” 속성을 포함한다. 웹 서버 컨트롤은 ‘asp:’라는 접두어로 시작한다.

7 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
웹 사이트 클릭

8 ASP.NET 을 이용한 웹 페이지 구현 템플릿: ASP.NET 웹 사이트 클릭
위치 : C:\Websites\Chapter03 입력 언어 : Visual C# 선택 확인 클릭

9 ASP.NET 을 이용한 웹 페이지 구현 ASP.NET 웹 사이트 템플릿의 초기 화면

10 ASP.NET 을 이용한 웹 페이지 구현 솔루션 탐색기 클릭

11 ASP.NET 을 이용한 웹 페이지 구현 열기 클릭(Default.aspx.cs)

12 ASP.NET 을 이용한 웹 페이지 구현 사각형 부분 코딩 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
Response.Write("ASP.NET 으로 구현한 첫 번째 웹 페이지");

13 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
디버깅하지 않고 시작 클릭

14 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
완성된 웹 페이지

15 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
웹 사이트 클릭

16 ASP.NET 을 이용한 두번째 예제 ASP.NET 웹 사이트 클릭 확인 클릭

17 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
솔루션 탐색기 클릭

18 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
디자인 클릭

19 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
도구상자 클릭

20 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
디자인 클릭

21 ASP.NET 을 이용한 두번째 예제 끌어 놓기(Label TextBox Button)

22 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
속성 창 클릭

23 ASP.NET 을 이용한 두번째 예제 label 클릭
속성 수정(Height : 40px Text : 이곳에 인사말을… Width : 310px

24 ASP.NET 을 이용한 두번째 예제 텍스트 상자 클릭
속성 수정 ( ID : Txt1 Height : 40 px Width 310px Text : 여기에도 인사말을…

25 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
모두 저장 클릭

26 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
Button 더블 클릭

27 ASP.NET 을 이용한 두번째 예제 사각형 부분 코딩 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
Label1.Text = "안녕하세요 ASP.NET 예제입니다."; Txt1.Text = "모두들 반가워요!";

28 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
디버깅하지 않고 시작 클릭

29 ASP.NET 을 이용한 두번째 예제 실행 결과(초기값 로딩 상태) 확인 Button 클릭

30 2. 비주얼 스튜디오 닷넷을 이용한 ASP.NET 개발
버튼 클릭 결과 확인

31 ASP.NET의 파일 위치 기능 파일명 주소 디자인 모드에서의 화면 구성 Default.aspx
디자인 모드에서의 화면 구성 Default.aspx 버튼 클릭 시 이벤트 함수 작성 Default.aspx.cs 실행했을 때 브라우저의 URL 실제 저장 위치 C:\Websites\WebSite1

32 ASP.NET을 이용한 데이터베이스 연동

33 ADOTest DB 생성 SQL Server Management Studio 클릭

34 ADOTest DB 생성 연결 클릭

35 ADOTest DB 생성 새 데이터베이스 클릭

36 테이터베이스 이름 : ADOTest 입력 확인 클릭

37 데이터베이스 확장 추가된 ADOTest DB 확인

38 3. ASP.NET을 이용한 데이터베이스 연동 ASP.NET을 이용한 데이터베이스 연동

39 3. ASP.NET을 이용한 데이터베이스 연동 프로젝트 클릭

40 3. ASP.NET을 이용한 데이터베이스 연동 ASP.NET 웹 응용 프로그램 클릭 확인 클릭

41 3. ASP.NET을 이용한 데이터베이스 연동 도구 상자 클릭

42 SqlDataSource 드레그 < 왼쪽 꺾쇠표 클릭(확장) 데이터 소스 구성 클릭
3. ASP.NET을 이용한 데이터베이스 연동 SqlDataSource 드레그 < 왼쪽 꺾쇠표 클릭(확장) 데이터 소스 구성 클릭

43 3. ASP.NET을 이용한 데이터베이스 연동 새 연결 클릭

44 서버 이름 : BRAIN 선택 (컴퓨터 이름) 데이터베이스 이름 선택 : ADOTest 연결 테스트 클릭 확인 클릭
3. ASP.NET을 이용한 데이터베이스 연동 서버 이름 : BRAIN 선택 (컴퓨터 이름) 데이터베이스 이름 선택 : ADOTest 연결 테스트 클릭 확인 클릭

45 3. ASP.NET을 이용한 데이터베이스 연동 1. 연결 문자열 확인 2. 다음 클릭

46 3. ASP.NET을 이용한 데이터베이스 연동 다음 클릭

47 3. ASP.NET을 이용한 데이터베이스 연동 1. 테이블 또는뷰의 열 지정 클릭 2. 열 * 클릭 3. 다음 클릭

48 3. ASP.NET을 이용한 데이터베이스 연동 쿼리 테스트 클릭 마침 클릭

49 3. ASP.NET을 이용한 데이터베이스 연동 솔루션 탐새기 클릭

50 3. ASP.NET을 이용한 데이터베이스 연동 Web.config 더블 클릭 후 내용 확인

51 3. ASP.NET을 이용한 데이터베이스 연동 소스 클릭 후 내용 확인

52 3. ASP.NET을 이용한 데이터베이스 연동 GridView 드레그

53 3. ASP.NET을 이용한 데이터베이스 연동 확장 클릭 데이터 소스 선택 : 새 데이터 소스 선택

54 3. ASP.NET을 이용한 데이터베이스 연동 1. 데이터베이스 선택 2. 확인 클릭

55 3. ASP.NET을 이용한 데이터베이스 연동 새 연결 클릭

56 3. ASP.NET을 이용한 데이터베이스 연동 서버 이름 : BRAIN 선택 데이터베이스 이름 선택 : ADOTest

57 3. ASP.NET을 이용한 데이터베이스 연동 다음 클릭

58 3. ASP.NET을 이용한 데이터베이스 연동 다음 클릭

59 3. ASP.NET을 이용한 데이터베이스 연동 다음 클릭

60 3. ASP.NET을 이용한 데이터베이스 연동 쿼리 테스트 클릭

61 3. ASP.NET을 이용한 데이터베이스 연동 마침 클릭

62 3. ASP.NET을 이용한 데이터베이스 연동 디버깅하지 않고 시작 클릭

63 3. ASP.NET을 이용한 데이터베이스 연동