[ 웹사이트 제작] 1. Login 화면

 

* Bootstrap4를 사용하여 제작함. 

* MVC패턴을 사용하여 제작함. 

 

 

@View 이미지

 

 

@View 코드 - Index.cshtml

<!-- login-form css 사용, shadow-lg bootstrap 사용 -->
<div class="login-form shadow-lg">

    @using (Html.BeginForm("Login","Login",FormMethod.Post))
    {
    	<!-- 이미지 삽입 부분-->
        <div class="title">
            <img src="../image/title_img.jpg" style="width:100%;">
        </div>
		<!-- 이미지 삽입 부분-->
        
        <!-- ID/PW 입력 부분-->
        <div class="form-group">
            <input type="text" class="form-control" name="ID" placeholder="ID" required="required">
        </div>

        <div class="form-group">
            <input type="password" class="form-control" name="PW" placeholder="Password" required="required">
        </div>
		<!-- ID/PW 입력 부분-->
        
        <!-- 입력된 데이터를 해당 컨트롤러/함수에 submit 하는 버튼-->
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Login</button>
        </div>

		<!-- 계정 생성하는 페이지로 넘어가는 버튼 -->
        <div class="clearfix login-form-btn">
            <a class="btn btn-outline-primary" href="@Url.Action("CreateAccount","Login")">Create Account</a>
        </div>
    }
</div>

 

- 데이터 입력후 Login 버튼 클릭 시 Login controller의 Login 함수 호출함

- "Create Account" 버튼 클릭 시 계정 생성 화면으로 넘어감. 

 

@css 부분

.login-form {
    width: 340px;
    margin: 50px auto;
    font-size: 15px;
}

.login-form form {
    margin-bottom: 15px;
    background: #f7f7f7;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

.login-form h2 {
    margin: 0 0 15px;
}

 

@LoginController 

 // GET: Login 
 public ActionResult Index()
 {
 	return View();
 }

[HttpPost]
public ActionResult Login(LoginModel model)
{
	try
	{
		if (ModelState.IsValid)
		{
			Session["AdminID"] = model.ID;

			return Content("<script language='javascript' type='text/javascript'>alert('로그인 성공'); location.href='/UserData/'</script>");
		}
	}
	catch(Exception e)
	{
    	var errorModel = new ErrorModel
		{
                    ErrorStackTrace = e.StackTrace,
                    ErrorMessage = e.Message,
        };

		return RedirectToAction("Error", "Error", errorModel);
	}

	return View();
}

 

1. Index() 함수

 

- https://localhost:44381/Login/ 혹은 https://localhost:44381/ 주소로 페이지 요청 받았을 때  호출 되는 함수. 

- return View(); 부분에서  View함수에 별다른 인자를 넣지 않았기 때문에  Views 폴더 > Login 폴더 > Index.cshtml 이 호출된다.

Views 폴더 구조

- 다른 폴더는 차후에 천천히 설명할 예정

 

2. Login(LoginModel model) 함수

 

- View의 "@using(Html.BeginForm("Login","Loin",FormMethod.Post))"{ } form에 담겨 넘어오는 LoginModel 데이터를 받아 로그인 처리 하는 함수. 

 

- BeginForm안의 데이터를 액션으로 보내기 위해서는 모델의 변수명과 BeginForm안의 태그들의 name이 같아야 한다. 

 

- 아직 DB 연결하지 않았으므로 넘어온 데이터중 아이디는 세션에 저장하고 로그인 성공 메세지를 화면에 띄운 다음 /UserData/ 로 화면 이동 

 

 

@Model - LoginModel 

// 로그인할때 사용 
    public class LoginModel
    {
        [Required(ErrorMessage = "Please Enter your ID")]
        public string ID { get; set; }

        [Required(ErrorMessage = "Please Enter your PW")]
        public string PW { get; set; }
    }

- 로그인시 필요한 정보를 받기 위해 모델로 정의하였다.