조코드

저번  기본 CRUD 게시판에 이어 페이징을 해보았다.

참고 : https://mchch.tistory.com/140

javascript, jquery를 사용, ajax통신을 태울것이다.

index.html

<div class="table form-group">
    <table class="table">

        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>날짜</th>
            </tr>
        </thead>
        <tbody id="dataTableBody">

        </tbody>
    </table>
</div>

<!-- 페이징:S -->
<ul id="pagingul">
</ul>
<!-- 페이징:E -->


<script src="~/Scripts/BoardList.js"></script>

게시물을 받아올 tbody와 페이징을 표시할 ul을 만들어준다. 

BoardList.js

let totalData; //총 데이터 수
let dataPerPage; //한 페이지에 나타낼 글 수
let pageCount = 5; //페이징에 나타낼 페이지 수
let globalCurrentPage = 1; //현재 페이지
var globalData; //controller에서 가져온 data 전역변수

$(document).ready(function () {

	dataPerPage = 5;

	var Id = 1

	var param = { Id: Id };

    ajaxPost("/Home/GetBoardAjax", param, function (data) {

        totalData = data.length;
        globalData = data;


		//글 목록 표시 호출 (테이블 생성)
        displayData(1, dataPerPage, data);

		//페이징 표시 호출
		paging(totalData, dataPerPage, pageCount, 1);

    });
});

	
function paging(totalData, dataPerPage, pageCount, currentPage) {

    totalPage = Math.ceil(totalData / dataPerPage); //총 페이지 수

    if (totalPage < pageCount) {
        pageCount = totalPage;
    }

    let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
    let last = pageGroup * pageCount; //화면에 보여질 마지막 페이지 번호

    if (last > totalPage) {
        last = totalPage;
    }

    let first = last - (pageCount - 1); //화면에 보여질 첫번째 페이지 번호
    let next = last + 1;
    let prev = first - 1;

    let pageHtml = "";

    if (prev > 0) {
        pageHtml += "<li><a href='#' id='prev'> 이전 </a></li>";
    }

    //페이징 번호 표시 
    for (var i = first; i <= last; i++) {
        if (currentPage == i) {
            pageHtml +=
                "<li class='on'><a href='#' id='" + i + "'>" + i + "</a></li>";
        } else {
            pageHtml += "<li><a href='#' id='" + i + "'>" + i + "</a></li>";
        }
    }

    if (last < totalPage) {
        pageHtml += "<li><a href='#' id='next'> 다음 </a></li>";
    }

    $("#pagingul").html(pageHtml);
    let displayCount = "";
    displayCount = "현재 1 - " + totalPage + " 페이지 / " + totalData + "건";
    $("#displayCount").text(displayCount);


    //페이징 번호 클릭 이벤트 
    $("#pagingul li a").click(function () {
        globalData

        let $id = $(this).attr("id");
        selectedPage = $(this).text();

        if ($id == "next") selectedPage = next;
        if ($id == "prev") selectedPage = prev;

        //전역변수에 선택한 페이지 번호를 담는다...
        globalCurrentPage = selectedPage;
        //페이징 표시 재호출
        paging(totalData, dataPerPage, pageCount, selectedPage);
        //글 목록 표시 재호출
        displayData(selectedPage, dataPerPage, globalData);
    });
}


//현재 페이지(currentPage)와 페이지당 글 개수(dataPerPage) 반영
function displayData(currentPage, dataPerPage, data) {
    let chartHtml = "";

    //Number로 변환하지 않으면 아래에서 +를 할 경우 스트링 결합이 되어버림.. 
    currentPage = Number(currentPage);
    dataPerPage = Number(dataPerPage);

    for (var i = (currentPage - 1) * dataPerPage; i < (currentPage - 1) * dataPerPage + dataPerPage; i++)
    {

        if (data[i] == undefined)
        {
            break;
        }
        
        chartHtml +=
            "<tr><td>" +
            data[i].Num +
            "</td><td>" +
            data[i].Title+
            "</td><td>" +
            data[i].Name +
            "</td><td>" +
            data[i].Date +
            "</td></tr>";
    }
    $("#dataTableBody").empty();
    $("#dataTableBody").append(chartHtml);
}

param값을 1로 줬는데 이유 없습니다 ...ㅎ 

임의로 넣어놓은것이고 인자값이 필요하면 맞게 넣어서 사용하면 됩니다.

HomeController.cs

public JsonResult GetBoardAjax()
        {

            List<User> result = dbSystem.GetBoard();

            return Json(result);
        }

generic list에 select된 게시물 정보를 담아 json return 해줍니다. 

참고로 dbSystem은 수정된 코드이니 전 게시물을 참고해 select해오시면 됩니다. 

Site.css

ul {
    text-align: center;
    display: inline-block;
    
    border-right: 0;
    list-style: none;
}
ul li {
    text-align: center;
    float: left;
}

ul li a {
    display: block;
    font-size: 14px;
    padding: 9px 12px;
    box-sizing: border-box;
}

ul li.on {
    background: #eda712;
}

ul li.on a {
    color: #fff;
}

개요 : 처음으로 c# asp.net을 써야할 일이 생겨서 맛보기로 CRUD 게시판을 만들어보았다. 

주의 : 이것저것 공부하면서 막 시도하며 만들다보니 변수명도 클래스명도 코드도 바보같음 주의 

의의 : 그러나 점차 기능을 붙여 발전된 형태로 만들며 연습할 것이고 나와 같이 db연결도 못하는 분에게 약간의 도움이라도 되었으면 하는 마음 

특징 : 회사 서버로 db연결함 (인터넷엔 로컬db로 연결하는 글이 대부분이라 설정값 찾는데 헤맸다...)

툴 : visualstudio2022 , ssms

게시판 미리보기

프로젝트 asp.net web application 실행 

mvc패턴으로 생성 

DB연결 

나는 두가지 방법으로 해보았다.

1. webConfig에서 connectionStrings으로 db연결 

2. cs 파일에서 using문을 사용하여 db연결 (이건 나중에 코드에서)

우선 1번 

...
    
    <connectionStrings>
		<add name="UserDB" connectionString="Data Source=ip 작성,port 작성; 
          Initial Catalog=TEST_PROFILE;User ID=sa;Password=123456789"
		  providerName="System.Data.SqlClient" />  
	</connectionStrings>
		
</configuration>

Connection String 방식

- name : 코드에서 연결될 이름

- Data Source : 서버명
- Initial Catalog : database 이름
- Integrated Security=SSPI  : db 서버 접근 인증이 windows 인증 방식인 경우(난 회사 db라 안씀)
- User ID=yourid;Password=yourpass ; db 서버 접근 인증이 SQL 인증 방식인 경우
출처: https://freeprog.tistory.com/221 [취미로 하는 프로그래밍 !!!]

SqlDataSource.ProviderName 속성
System.Data.SqlClient 공급자는 기본.NET Framework Data Provider for SQL Server입니다.
System.Data.OleDb 공급자는.NET Framework Data Provider for OLE DB입니다.
System.Data.Odbc 공급자는.NET Framework Data Provider for ODBC입니다.
System.Data.OracleClient 공급자는.NET Framework Data Provider for Oracle입니다.
출처 : https://docs.microsoft.com/ko-kr/dotnet/api/system.web.ui.webcontrols.sqldatasource.providername?view=netframework-4.8

namespace WebApplication9.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            DataSet ds = new DataSet();
            ds = User_DAL.Select_User();

			return View(ds);
        }
     }
}

RouteConfig.cs에 설정값인 시작 controller와 action명이 명시되어있는 곳 부터 시작하여 

DataSet에 게시판 글을 table data를 넣어 view로 리턴할 것이다.

출처:https://www.soowave.com/entry/ASPNET-MVC-3-MSSQL-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0-INSERT

namespace WebApplication9.DAL
{
	public class User_DAL

    {

        public static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["UserDB"].ToString());

		public static DataSet Select_User()
        {
            con.Open();

            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;

            cmd.CommandText = string.Format("SELECT [Num],[Title],[Name],[Date] FROM [TEST_PROFILE].[dbo].[USER] order by [Num] desc");

            cmd.CommandType = CommandType.Text;
            SqlDataAdapter da = new SqlDataAdapter();
            da.SelectCommand = cmd;

            DataSet ds = new DataSet();
            da.Fill(ds, "[TEST_PROFILE].[dbo].[USER]");
            con.Close();

            return ds;
        }
     }
}

SqlConnection으로 webconfig에 설정해놓은 name인 UserDB 매핑해주기

@model System.Data.DataSet
@using System.Data

@{
    ViewBag.Title = "Home Page";
}

<br />
<table class="table">
    <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
        </tr>
    </thead>
    <tbody>
        @foreach (DataRow row in Model.Tables["[TEST_PROFILE].[dbo].[USER]"].Rows)
        {
        <tr>
            <th>@(row["Num"])</th>
            <th>@Html.ActionLink("" + row["Title"], "About", new { id = row["Num"] })
            <th>@(row["Name"])</th>
            <th>@(row["Date"])</th>
        </tr>
        }
    </tbody>
</table>
<hr />

<button class="btn btn-default">@Html.ActionLink("글 쓰기", "About", "Home")</button>

view단 게시판 간단하게 select 완료

string strConn = "Data Source=ip,port;Initial Catalog=TEST_PROFILE;User ID=id;Password=12345679;";

string sql = "select * from [TEST_PROFILE].[dbo].[USER]";

 using (SqlConnection conn = new SqlConnection(strConn))
 using (SqlCommand cmd = new SqlCommand(sql, conn))
 {
     try
     {
         conn.Open();

         using (SqlDataReader rdr = cmd.ExecuteReader())
         {
             while (rdr.Read())
             {
                 String num = rdr["Num"] as string;
                 String title = rdr[1] as String;
                 String name = rdr[2] as String;
                 String date = rdr[3] as String;
                 Console.WriteLine(" {0}, {1}, {2}, {3}", name, title, name, date);
             }
         }
     }
     catch (Exception ex)
     {
         Console.WriteLine(" ============= exception ===============");
         Console.WriteLine(ex.Message);
     }

 }

이런식으로 using을 사용하여 바로 db연결하여 사용도 가능 

그러나 호출 할 때 마다 저렇게 db 정보를 적는것보다 web.config에서 관리하는게 당연히 더 나은 방식으로 보인다.

출처 : https://freeprog.tistory.com/221

다음 crud는 

https://github.com/jodongyeon/boardEx

있습니당.