[Azure] Visual Studio 서비스를 이용하여 CRUD 애플리케이션 제작하기

애저(Azure) Visual Studio 서비스를 이용하여 CRUD 애플리케이션 제작하기

들어가며

• Azure의 Visual Studio 서비스를 이용하여 CRUD 애플리케이션을 제작해보자.
• CRUD란, 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

Azure Visual Studio ⓒ https://visualstudio.microsoft.com

 

실습

애저(Azure) 포털에서 서비스 배포하기

SQL Database 서비스 배포하기

• 애저(Azure) 포털에서 SQL Database 서비스를 배포한다.
• 배포 설정과 관련된 자세한 내용은 아래의 게시글을 참고한다.

[Azure] 단일 데이터베이스 만들기

 

	반드시 @SQL 인증 사용@으로 설정해준다.

 

• SQL 데이터베이스 배포를 완료하였다. 데이터베이스 이름은 @mySampleDatabase@, 서버 이름은 @mysqlserver-111@로 설정하였다.

 

Visual Studio 서비스 배포하기

• 애저(Azure) 포털의 Marketplace에서 @Visual Studio@를 검색한 후, 리소스를 생성해준다.
• <가상 머신 만들기> 페이지에서 다음과 같이 설정하거나 추가해준다.
  • [기본] 탭
    • 플랜 : Visual Studio 2022 Enterprise on Windows Server 2022 (x64) - x64v Gen1
      • 나중에 Product Key를 입력해야 하기 때문에, Community 버전으로 실습을 진행하는 것을 권장한다.
    • 지역 : 애저에서 SQL Database 서비스를 배포한 지역과 동일하게 설정해준다.
    • 인바운드 포트 선택 : RDP

 

• 리소스를 생성하면, 로컬 PC에서 원격으로 접속하기 위해 RDP 파일을 다운로드 받는다.

[연결] 탭에서 [RDP] 탭을 클릭한 후 RDP 파일을 다운로드 받는다.

 

• 다운로드 받은 RDP 파일을 실행하여 원격 접속을 실행한다. Visual Studio 2022가 설치된 Windows Server 가상 머신으로 접속하게 된다.

	원격으로 가상 머신에 접속한 모습

 

배포한 윈도우 가상 머신에서 실습 환경 구축하기

언어를 한국어로 설정하기

• 윈도우 가상 머신의 언어를 한국어로 변경해준다.

 

• 한글 언어팩 다운로드가 완료되면, @Windows display language@를 @한국어@로 설정해준다. 리부팅을 한 후, 다시 RDP 파일을 이용하여 원격 접속을 한다.

 

시간대를 한국 시간대로 변경하기

• 다음과 같이 시간대를 한국 시간대(UTC+9)로 변경해준다.

 

SSMS(SQL Server Management System) 설치 및 연결하기

• 배포한 윈도우 가상 머신에서 SSMS를 설치해준다.

SSMS(SQL Server Management Studio) 다운로드 - SQL Server Management Studio (SSMS)

 

• SSMS(SQL Server Management System) 설치와 관련된 자세한 내용은 아래의 게시글을 참고한다.

[Azure] SSMS/VS Code를 사용하여 연결 및 쿼리 실습하기

 

 

• 설치를 완료했으면, 이제 애저에 배포한 SQL Database에 연결을 해본다.

 

참고) 실습 전, 애저의 SQL Database 페이지에서 다음과 같이 설정되었는지 확인해본다.

• @[공용 네트워크 액세스]@가 사용되고 있는지 확인하고, 밑의 @[예외]@ 섹션에 있는 @[Azure 서비스 및 리소스가 이 서버에 액세스할 수 있도록 허용]@ 체크 박스를 체크한다.

 

• 간단한 실습으로 SELECT Transact-SQL 문을 실행하여 범주별 상위 20개 제품을 쿼리해본다.
• 개체 탐색기에서 @mySampleDatabase@를 마우스 오른쪽 버튼으로 클릭한 후, @[새 쿼리(New Query)]@를 선택한다. 데이터베이스에 연결된 새 쿼리 창이 열린다.
• 쿼리 창에서 다음 SQL 쿼리문을 입력한다.

SELECT pc.Name as CategoryName, p.name as ProductName
FROM [SalesLT].[ProductCategory] pc
JOIN [SalesLT].[Product] p
ON pc.productcategoryid = p.productcategoryid;

 

SSMS에서 작업하기

새로운 데이터베이스(@BookStore@) 생성하기

• 개체 탐색기에서 @Databses@를 마우스 오른쪽 버튼으로 클릭한 후, @[새 데이터베이스(New Database)]@를 선택한다. 생성되는데 시간이 걸린다. 데이터베이스를 생성한 후, 애저 포털의 리소스 그룹 페이지(@RG111@)에서 해당 데이터베이스가 생성되었는지 확인해본다.
  • Database name : @BookStore@
  • [Options] 탭에서 [Collation]을 @[Korean_100_CI_AS]@로 설정한다.

 

@member@ 테이블 생성하기

• 이제 새로 생성한 @BookStore@ 데이터베이스에 새로운 쿼리를 추가하고@member@ 테이블을 생성하는 다음의 내용을 입력한다. 그리고 @[실행(Execute)]@ 버튼을 클릭한다.

CREATE TABLE member (
    Idx INT IDENTITY(1, 1) PRIMARY KEY,
    Names VARCHAR(45) NOT NULL,
    Addr VARCHAR(100),
    Mobile VARCHAR(13),
    Email VARCHAR(50)
)

 

@member@ 테이블에 데이터 삽입하기

• 위에서 작성하고 실행했던 쿼리문을 지우고, 아래의 쿼리문을 작성하고 실행하여 테이블에 데이터를 하나하나씩 추가해 나간다. (새로운 쿼리문을 작성하고 실행할 때 마다, 기존의 쿼리문을 지우는 작업을 반복한다.)

-- 칼럼 지정 
INSERT INTO member(Names, Addr, Mobile, Email) 
VALUES ('이동욱', '서울시 강서구', '010-2967-1016', 'ldw@naver.com')

 

-- 칼럼 생략
INSERT INTO member VALUES('방용혁', '부산시 남구', '010-9291-4419', 'byh@daum.com')

 

-- 여러개 추가
INSERT INTO member VALUES
('황동주', '제주시 서귀포시', '010-8956-7423', 'hdj@gmail.com'),
('김효용', '경주시 인왕동', '010-8736-2919', 'khy@hotmail.com'),
('박현수', '공주시 웅진동', '010-9295-6600', 'phs@yahoo.co.kr')

 

• 다음 쿼리문을 작성 및 실행하여 삽입한 데이터들을 조회해본다. (간단하게 @SELECT * FROM member@ 쿼리문을 작성하여 실행해도 된다.)

SELECT TOP (1000) [Idx], [Names], [Addr], [Mobile], [Email]
FROM [dbo].[member]

 

실습에 필요 없는 기존의 데이터베이스 삭제하기

• 작업의 편의를 위해서 실습에 필요 없는 기존의 데이터베이스(@mySampleDatabase@)를 삭제해준다.

 

Visual Studio에서 작업하기 

새 프로젝트 생성하기

• 윈도우 VM에서 @Visual Studio 2022@ 프로그램을 실행한다. 처음 구성을 하는데 시간이 오래 걸릴 수 있다.

초기 세팅을 하는 데 시간이 오래 걸릴 수 있다.

 

• 구성이 완료 되면, 새로운 프로젝트를 생성한다.
  • @Visual Studio 2022 Enterprise@ 버전을 사용하기 위해서는 Product Key가 필요하다. 실습만 진행할 것이기 때문에, 이곳에서 임시로 Product Key를 가져와서 사용한다. (반드시 실습을 위해서만 사용한다.)
  • @[Languages]@는 @C#@을 선택해주고, 검색창에 @Windows Forms App@을 검색한 후 해당 템플릿을 선택해준다.

 

로컬 PC에서 작업할 경우

• 로컬 PC에서 Visual Studio를 실행한 후, @[도구]@ > @[도구 및 기능 가져오기]@를 클릭한 후 @[.NET 데스크톱 개발]@ 항목을 선택한 후 설치해준다. (@[수정]@ 버튼을 클릭한다.)

 

• 우선, 프로그램을 실행해본다. 앞으로 프로그램을 실행하기 위해 다음과 같이 @[Debug]@ 메뉴 > @[Start Without Debugging]@ (단축키 @[Ctrl]@ + @[F5]@)을 클릭해줄 것이다.

 

• @[View]@ 메뉴 > @[Toolbox]@를 클릭하여 도구 상자(Tool Box) 창을 열어준다.

 

• 다음과 같이 그리드(@DataGridView@)와 버튼(@Button@)을 배치해준다.

 

• 다음과 같이 버튼(@Button@)을 한 번 클릭한 후, 마우스 오른쪽 버튼 > @[Properties]@를 클릭한다. 그리고 @[(Name)]@을 @btnSearch@로 지정해준다. 그리고 @[Text]@를 @검색@으로 지정해준다.

 

필요한 패키지 설치하기

• 버튼(@btnSearch@)을 더블 클릭하여 코드를 작성해나간다.

 

• 코드의 최상단에 다음의 코드를 추가한다. 이 코드는 SQL Server에 접속하기 위한 코드이다.

using System.Data.SqlClient;

 

참고) Code 모드와 Designer 모드

• 다음과 같이 @Code@ 모드와 @Designer@ 모드로 전환하여 볼 수 있다.

모드 전환 하기	Designer 모드	Code 모드

 

• 다음과 같이 @NuGet@을 이용하여 실습을 위해 필요한 라이브러리를 설치한다.
  • @NuGet@은 파이썬의 @pip@처럼 C#에서 패키지를 관리해주는 도구이다.
  • @[Browse]@ 탭의 검색창에 @System Data sqlClient@을 검색하여 @System.Data.SqlClient@ 패키지를 설치해준다.

패키지가 성공적으로 설치된 모습

 

전체 데이터 불러오기 기능 추가하기

• 이제 다음과 같이 코드를 추가한다. 연결 문자열(@strConnect@)은 애저 포털에서 생성한 SQL Database 리소스 페이지(@mysqlserver-111@)에서의 @서버 이름@과 SQL Database를 생성할 때 만들었던 ID와 Password를 입력해준다.

string strConnect = "Server = <AzureSQL서버이름>.database.windows.net; database = BookStore; uid = <id>; pwd = <password>;";

using System.Data.SqlClient;     // 코드 추가

namespace CRUDApp
{
    public partial class Form1 : Form
    {
        string strConnect = "Server = mysqlserver-111.database.windows.net; database = BookStore; uid = devastra; pwd = ***********;";    // 연결 문자열
        public Form1()
        {
            InitializeComponent();
        }

        private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
        {

        }

        private void btnSearch_Click(object sender, EventArgs e)
        {
            // 코드 추가 하기 (1)
            SqlConnection DBConn = new SqlConnection();
            DBConn.ConnectionString = strConnect;       // 연결 문자열
            DBConn.Open();
            
            if (DBConn.State == System.Data.ConnectionState.Open)
            {
                MessageBox.Show("연결되었습니다.");
            }

            DBConn.Close();
        }
    }
}

[검색] 버튼을 클릭하여 "연결되었습니다."라는 메시지가 출력되는지 확인해본다.

 

• 아래의 코드를 추가한다.

 private void btnSearch_Click(object sender, EventArgs e)
{
    // ...
    // 코드 추가하기 (2)
    string strQuery = "SELECT * FROM member";

    SqlCommand cmd = new SqlCommand();
    cmd.Connection = DBConn;
    cmd.CommandText = strQuery;

    SqlDataReader dr = cmd.ExecuteReader();

    DBConn.Close();
}

 

• 디버깅 모드(@[F5]@)를 이용하여 실제로 데이터가 불러와졌는지 확인해본다.
  • @SqlDataReader dr = cmd.ExecuteReader();@ 코드에 중단점(Break Point)를 찍은 후, @[F5]@를 클릭하여 디버그 모드에 진입한다.
  • @[검색]@ 버튼을 클릭한 후, @[F10]@ 버튼을 클릭하여 다음 줄의 코드로 이동한다.
  • 밑에 있는 @[Autos]@ 창에서 @dr@ 객체 > @[Result View]@ > @[0]@ ~ @[4]@ > @[Non-Public members]@ > @[_values]@에 진입한 후, 불러와진 값들을 확인해본다. 
  • @[Shift]@ + @[F5]@ 버튼을 눌러 디버깅 모드를 종료한다.

 

• 아래의 코드를 추가하여 그리드 뷰에 불러온 데이터들이 나타나도록 해보자. 그 전에, 위에서 작성했던 쿼리문의 일부를 주석 처리해준다.

private void btnSearch_Click(object sender, EventArgs e)
{
    // ...
    string strQuery = "SELECT * FROM member";

    SqlCommand cmd = new SqlCommand();
    cmd.Connection = DBConn;
    
    //// 주석 처리
    // 디버그 모드로 데이터가 불러와졌는지 확인해보기
    // cmd.CommandText = strQuery;
    // SqlDataReader dr = cmd.ExecuteReader();

    // 코드 추가 하기 (3)
    SqlDataAdapter adapter = new SqlDataAdapter(strQuery, DBConn);

    DataSet ds = new DataSet();
    adapter.Fill(ds);

    dataGridView1.DataSource = ds.Tables[0];

    DBConn.Close();
}

데이터가 그리드 뷰에 성공적으로 불러와지는 것을 확인할 수 있다.

 

이름으로 검색하는 기능 구현하기 (CRUD : READ)

• 이제 이름으로 검색하는 기능을 추가해본다. 다음과 같이 라벨을 추가한 후, 표시되는 텍스트를 @이름@으로 지정해준다.

 

• 그 다음, 텍스트 박스를 추가한 후, @[(Name)]@을 @txtboxSearchName@으로 지정해준다. 그리고 약간의 UI를 변경해본다.

변경된 UI의 모습

 

• @[검색]@ 버튼을 더블 클릭해준 후, 다음과 같이 코드의 일부를 수정하고 실행해본다.

private void btnSearch_Click(object sender, EventArgs e)
{
    // 코드 추가하기 (2)
    // ...

    // 코드 추가하기 (4)
    if (txtboxSearchName.Text.Length > 0)
    {
        strQuery = string.Format("Select * FROM member WHERE Names = '{0}'", txtboxSearchName.Text);
    }

   	// ...
}

'이동욱'을 검색하여 해당 데이터를 조회한 모습

 

• 그리드 뷰를 클릭한 후, 좌측의 @[Properties]@ 창에서 번개 모양 아이콘을 클릭한다. 그리고 @CellContentDoubleClick@ 이벤트를 찾는다. 그리고 더블 클릭하여, 다음 코드를 넣는다.
• 이제 그리드 뷰에 나타난 컬럼 항목에서 이름(@Name@)을 더블 클릭하면, 해당 컬럼의 이름(@Names@)이 텍스트 박스(@txtboxSearchName@)에 나타나게 되고, 특정 이름의 컬럼 항목만 검색할 수 있게 된다.

private void dataGridView1_CellContentDoubleClick(object sender, DataGridViewCellEventArgs e)
{
    txtboxSearchName.Text = dataGridView1.Rows[e.RowIndex].Cells[1].Value.ToString();
}

 

이름을 입력하지 않고 검색한 모습 (전체 검색)	'황동주' 값을 더블 클릭한 모습. 텍스트 박스에 [황동주]가 표시되어 있다.
'황동주'만 검색한 모습

 

추가 기능 구현하기 (CRUD : CREATE)

• 다음과 같이 텍스트 박스와 버튼을 추가한다.
  • 버튼
    • @(Name)@ : btnAdd
    • @Text@ : 추가
  • 텍스트 박스
    • @(Name)@ : txtboxName, txtboxAddr, txtboxMobile, txtboxEmail

 

• @[추가]@ 버튼을 더블 클릭하여, 아래의 코드를 넣어주고 실행해준다. 각각의 텍스트 박스에 데이터를 추가하고 @[검색]@ 버튼을 눌러 전체 데이터를 조회하면, 추가한 데이터를 확인할 수 있다.

private void btnAdd_Click(object sender, EventArgs e)
{
    string strQuery = string.Format("INSERT INTO member(Names, Addr, Mobile, Email) VALUES('{0}', '{1}', '{2}', '{3}')", txtboxName.Text, txtboxAddr.Text, txtboxMobile.Text, txtboxEmail.Text);

    // SqlConnection : 데이터베이스 서버와의 연결을 담당
    SqlConnection DBConn = new SqlConnection();
    DBConn.ConnectionString = strConnect;
    DBConn.Open();

    // SqlCommand : 데이터베이스 서버에서 실행될 SQL문 전달을 담당.
    SqlCommand cmd = new SqlCommand();

    cmd.Connection = DBConn;
    cmd.CommandText = strQuery;

    SqlDataReader rdr = cmd.ExecuteReader(); // DB에 바로 쿼리

    DBConn.Close();
}

 

• 추가적으로 라벨을 넣어주고, 폼의 이름을 설정해준다. 그리고 UI를 수정해준다.

 

삭제 기능 구현하기 (CRUD : DELETE)

• 아래와 같이 텍스트 박스와 버튼, 라벨을 추가한다.
  • 텍스트 박스
    • @[(Name)]@ : txtboxDel
  • 버튼
    • @[(Name)]@ : btnDel
    • @Text@ : 삭제
  • 라벨
    • @Text@ : 삭제(이름)

 

• @[삭제]@ 버튼을 더블 클릭하여 아래의 코드를 추가해준다. 그리고 프로그램을 실행하여 실습을 진행해본다.

private void btnDel_Click(object sender, EventArgs e)
{
    string strQuery = string.Format("DELETE FROM member WHERE Names = '{0}'", txtboxDel.Text);

    //SqlConnection : 데이터베이스 서버와의 연결을 담당
    SqlConnection DBConn = new SqlConnection();

    DBConn.ConnectionString = strConnect;
    DBConn.Open();

    //SqlCommand : 데이터베이스 서버에서 실행될 SQL문 전달을 담당.
    SqlCommand cmd = new SqlCommand();

    cmd.Connection = DBConn;
    cmd.CommandText = strQuery;

    SqlDataReader rdr = cmd.ExecuteReader(); // DB에 바로 쿼리

    DBConn.Close();
}

	'devastra' 컬럼이 삭제된 모습

 

업데이트 기능 구현하기 (CRUD : UPDATE)

• 간단하게 특정 컬럼의 @이름(@Names@)@을 업데이트하는 기능을 추가해보자.
• 다음과 같이 업데이트 버튼과 텍스트 박스 그리고 라벨을 추가한다. 
  • 버튼
    • @(Name)@ : btnUpdate
    • @Text@ : 업데이트
  • 텍스트 박스
    • @(Name)@ : txtboxOldName, txtboxNewName
  • 라벨
    • @Text@ : 바꿀 이름, 새로운 이름

 

• @[업데이트]@ 버튼을 더블 클릭한 후, 아래의 코드를 추가한다.

private void btnUpdate_Click(object sender, EventArgs e)
{
    string strQuery = string.Format("UPDATE member SET Names = '{0}' WHERE Names = '{1}'", txtboxNewName.Text, txtboxOldName.Text);

    SqlConnection DBConn = new SqlConnection();

    DBConn.ConnectionString = strConnect;
    DBConn.Open();

    SqlCommand cmd = new SqlCommand();

    cmd.Connection = DBConn;
    cmd.CommandText = strQuery;

    SqlDataReader rdr = cmd.ExecuteReader();     // DB에 바로 쿼리

    DBConn.Close();
}

'박현수' 이름을 '김현수'로 바꾸려고 한다.	'김현수'로 이름이 변경되었다.

 

전체 코드

using System.Data;
using System.Data.SqlClient;     // 코드 추가

namespace CRUDApp
{
    public partial class Form1 : Form
    {
        string strConnect = "Server = mysqlserver-111.database.windows.net; database = BookStore; uid = devastra; pwd = **********;";    // 연결 문자열
        public Form1()
        {
            InitializeComponent();
        }

        private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
        {

        }

        private void btnSearch_Click(object sender, EventArgs e)
        {
            // 코드 추가하기 (1)
            SqlConnection DBConn = new SqlConnection();
            DBConn.ConnectionString = strConnect;       // 연결 문자열
            DBConn.Open();

            if (DBConn.State == System.Data.ConnectionState.Open)
            {
                MessageBox.Show("연결되었습니다.");
            }

            // 코드 추가하기 (2)
            string strQuery = "SELECT * FROM member";

            // 코드 추가하기 (4)
            if (txtboxSearchName.Text.Length > 0)
            {
                strQuery = string.Format("Select * FROM member WHERE Names = '{0}'", txtboxSearchName.Text);
            }

            ////  디버그 모드로 데이터가 불러와졌는지 확인해보기
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = DBConn;

            // cmd.CommandText = strQuery;
            // SqlDataReader dr = cmd.ExecuteReader();

            // 코드 추가 하기 (3)
            SqlDataAdapter adapter = new SqlDataAdapter(strQuery, DBConn);

            DataSet ds = new DataSet();
            adapter.Fill(ds);

            dataGridView1.DataSource = ds.Tables[0];

            DBConn.Close();
        }

        private void dataGridView1_CellContentDoubleClick(object sender, DataGridViewCellEventArgs e)
        {
            txtboxSearchName.Text = dataGridView1.Rows[e.RowIndex].Cells[1].Value.ToString();
        }

        private void btnAdd_Click(object sender, EventArgs e)
        {
            string strQuery = string.Format("INSERT INTO member(Names, Addr, Mobile, Email) VALUES('{0}', '{1}', '{2}', '{3}')", txtboxName.Text, txtboxAddr.Text, txtboxMobile.Text, txtboxEmail.Text);

            // SqlConnection : 데이터베이스 서버와의 연결을 담당
            SqlConnection DBConn = new SqlConnection();

            DBConn.ConnectionString = strConnect;
            DBConn.Open();

            // SqlCommand : 데이터베이스 서버에서 실행될 SQL문 전달을 담당.
            SqlCommand cmd = new SqlCommand();

            cmd.Connection = DBConn;
            cmd.CommandText = strQuery;

            SqlDataReader rdr = cmd.ExecuteReader(); // DB에 바로 쿼리

            DBConn.Close();
        }

        private void btnDel_Click(object sender, EventArgs e)
        {
            string strQuery = string.Format("DELETE FROM member WHERE Names = '{0}'", txtboxDel.Text);

            //SqlConnection : 데이터베이스 서버와의 연결을 담당
            SqlConnection DBConn = new SqlConnection();

            DBConn.ConnectionString = strConnect;
            DBConn.Open();

            //SqlCommand : 데이터베이스 서버에서 실행될 SQL문 전달을 담당.
            SqlCommand cmd = new SqlCommand();

            cmd.Connection = DBConn;
            cmd.CommandText = strQuery;

            SqlDataReader rdr = cmd.ExecuteReader(); // DB에 바로 쿼리

            DBConn.Close();
        }

        private void btnUpdate_Click(object sender, EventArgs e)
        {
            string strQuery = string.Format("UPDATE member SET Names = '{0}' WHERE Names = '{1}'", txtboxNewName.Text, txtboxOldName.Text);

            SqlConnection DBConn = new SqlConnection();

            DBConn.ConnectionString = strConnect;
            DBConn.Open();

            SqlCommand cmd = new SqlCommand();

            cmd.Connection = DBConn;
            cmd.CommandText = strQuery;

            SqlDataReader rdr = cmd.ExecuteReader();     // DB에 바로 쿼리

            DBConn.Close();
        }
    }
}

 

참고 사이트

숫자 유형 - SQL Server

문자열 및 이진 유형 - SQL Server

SQL INSERT INTO Statement

SQL CREATE TABLE Statement