ការសិក្សាពីរបៀប បង្កើត Login Form ក្នុង ASP.NET MVC 5

មាតិកា

I.    សេចក្តីផ្តើម

II.   គោលបំណង

III.  តម្រូវការ

IV.  ជំហានទី១៖ បង្កើត Project

V.   ជំហានទី២៖ បង្កើត Database

VI.  ជំហានទី៣៖ បង្កើត Store procedure

VII. ជំហានទី៤៖ ការប្រើប្រាស់ Entity Framework

VIII. ជំហានទី៥៖ បង្កើត Model class

IX.  ជំហានទី៦៖ បង្កើត Controller

X.   ជំហានទី៧៖ បង្កើត View

XI.  ជំហានទី៨៖ ដំណើរការ Application

I.         សេចក្តីផ្តើម

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀប បង្កើត Simple Login Form ដោយប្រើប្រាស់ ASP.NET MVC ជាមួយនឹង Microsoft SQL Server។ ខាងក្រោមនេះនឹងបង្ហាញពីជំហាននីមួយៗក្នុងការ implementation កូដ។

II.        គោលបំណង

ក្រោយពីអនុវត្តន៍តាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

• យល់ដឹងពីរបៀបបង្កើត Login form ជាមួយ ASP.NET MVC
• យល់ដឹងពីរបៀបប្រើប្រាស់ Wizard ក្នុង ASP.NET

III.       តម្រូវការ

ដើម្បីអាចសិក្សា បានយើងត្រូវមាន

• Microsoft Visual Studio (any version)
• Microsoft SQL Server (any version)

IV.      ជំហានទី១៖ បង្កើត Project

សូមចូលទៅបើកកម្មវិធី Microsoft visual studio

• ចុច “Start”
• បន្ទាប់ “All Programs”
• ជ្រើសរើសយក “Microsoft Visual Studio 2015”.
• ចូលទៅកាន់ File à New à Project
• សូមមើលមេរៀនពីមុនៗអំពីរបៀបបង្កើត Project ជាមួយ MVC

V.        ជំហានទី២៖ បង្កើត Database

សូមធ្វើការបង្កើត :

• Database មួយឈ្មោះថា “ConsumerBanking”
• Table មួយដែលមានឈ្មោះថា “CBLoginInfo”

ងាយៗយើងគ្រាន់តែធ្វើការ Copy កូដខាងក្រោមចូលទៅក្នុង SQL Server រួចធ្វើការ execute ជាការស្រេច។

កំណត់ចំណាំ៖ ជាទូទៅ password គេមិនដែល store ជា plain text ឡើយ។ ដោយឡែកនៅក្នុងឧទាហរណ៍នេះ ខ្ញុំសូម store វា ជា plain text​សិន។

VI.         ជំហានទី៣៖ បង្កើត Store procedure

ក្រោយពីយើងបានបង្កើត database និង​ table រួចរាល់ហើយ សូមធ្វើការបង្កើត store procedure សម្រាប់ process រាល់ logic ផ្សេងៗ។ នៅក្នុង Logic ខាងក្រោមនេះគឺចង់បានន័យដូចតទៅ៖

• ប្រសិនបើ username ហើយនិង password ត្រឹមត្រូវ វានឹង login ទទួលបានជោគជ័យរួចហើយធ្វើការ redirect ទៅកាន់ page
• ប្រសិនបើ username ពុំមាននៅក្នុង database ទេ នោះវានឹងបង្ហាញនូវពាក្យ error ថា “User Does not Exist”
• ប្រសិនបើ user ត្រឹមត្រូវ ហើយ password មិនត្រឹមត្រូវ នោះវានឹងផ្តល់នូវ message ព្រមទាំងចំនួនដែល user ព្យាយាមLogin ខុសជាច្រើនដង
• ប្រសិនបើ login ខុសលើសឬក៏ស្មើនឹង៥ដង នោះ វានឹងធ្វើការ Lock នូវ user នោះ

USE [ConsumerBanking] 

    GO 

    SET ANSI_NULLS ON 

    GO 

    SET QUOTED_IDENTIFIER ON 

    GO 

    CREATE  PROCEDURE GetCBLoginInfo

        @UserName VARCHAR(20), 

        @Password varchar(20) 

    AS 

    SET NOCOUNT ON 

    Declare @Failedcount AS INT 

    SET @Failedcount = (SELECT LoginFailedCount from CBLoginInfo WHERE UserName = @UserName) 

    IF EXISTS(SELECT * FROM CBLoginInfo WHERE UserName = @UserName) 

     BEGIN 

     IF EXISTS(SELECT * FROM CBLoginInfo WHERE UserName = @UserName AND Password = @Password ) 

        SELECT ‘Success’ AS UserExists 

    ELSE 

    Update CBLoginInfo set  LoginFailedCount = @Failedcount+1  WHERE UserName = @UserName 

    Update CBLoginInfo set LastLoginDate=GETDATE()  WHERE UserName = @UserName 

     BEGIN 

    IF @Failedcount >=5 

    SELECT ‘Maximum Attempt Reached (5 times) .Your Account is locked now.’ AS UserExists 

    ELSE 

    select CONVERT(varchar(10), (SELECT LoginFailedCount from CBLoginInfo   WHERE UserName = @UserName))   AS UserFailedcount 

    END  

    END 

     ELSE 

     BEGIN  

    SELECT ‘User Does not Exists’ AS UserExists       END 

• ដូច្នេះក្រោយពីយើងបានបង្កើត store procedure រួចរាល់ អ្នកនឹងទទួលបានដូចរូបខាងក្រោម:

VII.         ជំហានទី៤៖ ការប្រើប្រាស់ Entity Framework

នៅត្រង់ចំនុចនេះគឺខ្ញុំសូមប្រើប្រាស់ Entity Framework ដើម្បីធ្វើការទាញយក Data ដោយប្រើប្រាស់នូវ EDMX file សម្រាប់ធ្វើការ fetch data ចេញពី database។

របៀបអនុវត្តន៍៖

• Right click លើ Models folder
• រើសយក Add
• New Items…

• វានឹងបង្ហាញផ្ទាំងមួយឡើង

• សូមយក Data
• រួចយក ADO.NET Entity Data Model
• ដាក់ឈ្មោះអោយ Data Model
• បន្ទាប់មកវានឹងបង្ហាញដូចរូប

• សូមរើសយក EF Designer from database
• ចុច Next

• សូមចុចលើ New Connecction…

• ក្នុង Data source​ ខ្ញុំសុំយក Microsoft SQL Server (SqlClient)
• Server name: លោកអ្នកគ្រាន់តែវាយសញ្ញាចុច (.) រឺក៏ធ្វើការ dropdown ដើម្បីរើសយកឈ្មោះ server របស់អ្នកក៏បានដែរ
• Log on to the server ចែកជាពីរគឺ៖
  • Use Windows Authentication: មិនចាំបាច់ធ្វើការបំពេញ username និង password នៅពេល log ចូល sql server
  • Use SQL Server Authentication: សម្រាប់ធ្វើការបំពេញនូវ username និង password របស់ sql server
• Connect to a database: ធ្វើការ select យក database ដែលយើងចង់ធ្វើការលើវា
• ក្រោយពីជ្រើសរើសរួចរាល់ហើយ សូមធ្វើការចុចលើប៊ូតុង Test Connection

• message ខាងលើបង្ហាញថា connection របស់អ្នកបានធ្វើការភ្ជាប់ទៅកាន់ database បានជោគជ័យហើយ
• សូមចុច OK

• ក្នុងករណីនេះ ខ្ញុំសូមធីកលើ Yes, include the sensitive data in the connection string.
• ចុច Next

• យើងមាន version នៃ Entity Framework ចំនួនពីរដូចខាងលើ ដូចនេះអ្នករើសយក version មួយណាក៏បាន
• ករណីនេះ ខ្ញុំយក version ខាងលើ
• ចុច Next

• សូមធ្វើការរើសយក store procedure ដែលយើងបានបង្កើតខាងលើ តាមរយៈ script
• ចុងក្រោយចុច Finish
• ពេលនោះយើងនឹងទទួលបាននូវ file edmx នៅក្នុង Models ដូចរូប

VIII.         ជំហានទី៥៖ បង្កើត Model class

សូមធ្វើការបង្កើត class model មួយ ដោយ

• ដាក់ឈ្មោះថា “CBUserModel”
• មាន Properties ចំនួនពីរ គឺ​ UserName ហើយនិង Password

ការបង្កើត class model នេះឡើងក្នុងគោលបំណងសម្រាប់ធ្វើការទំនាក់ទំនងរវាង view ហើយនិង controller។ បន្ថែមពីនោះទៀតយើងក៏បានដាក់នូវ basic validationទៅលើ UserName ហើយនិង Password fields ផងដែរ។ សូមកត់ចំណាំផងដែរថា ការដាក់ validation លើmodel គឺតម្រូវអោយយើងធ្វើការប្រើប្រាស់នូវ DataAnnotations។

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

namespace Login.Models

{

    public class CBUserModel

    {

        [Required(ErrorMessage = “UserName is required”)]

        public string UserName { get; set; }

        [Required(ErrorMessage = “Password is required”)]

        [DataType(DataType.Password)]

        public string Password { get; set; }

    }

}

IX.         ជំហានទី៦៖ បង្កើត Controller

សូមធ្វើការបង្កើត Controller ដោយដាក់ឈ្មោះថា “CBLogin”

• Right click លើ Controllers folder
• Add
• Controller…

• យើងនឹងទទួលបាន controller ជាមួយ action index

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace Login.Controllers

{

    public class CBLoginController : Controller

    {

        // GET: CBLogin

        public ActionResult Index()

        {

            return View();

        }

    }

}

• សូមធ្វើការបង្កើត action index ដែលរួមមាន parameterដូចខាងក្រោម

// GET: CBLogin

        [HttpPost]

        public ActionResult Index(CBUserModel model)

        {

            ConsumerBankingEntities1 cbe = new ConsumerBankingEntities1();

            var s = cbe.GetCBLoginInfo(model.UserName, model.Password);

            var item = s.FirstOrDefault();

            if (item == “Success”)

            {

                return View(“UserLandingView”);

            }

            else if (item == “User Does not Exists”)

            {

                ViewBag.NotValidUser = item;

            }

            else

            {

                ViewBag.Failedcount = item;

            }

            return View(“Index”);

        }

• បន្ទាប់មកបង្កើត ActionResult មួយទៀត សម្រាប់ប្រើប្រាស់នៅពេលដែល user ធ្វើការបញ្ចូលនូវ username និង password ទទួលបានជោគជ័យ

   public ActionResult UserLandingView()

        {

            return View();

        }

X.         ជំហានទី៧៖ បង្កើត View

គោលដៅនៃការបង្កើត view សម្រាប់ធ្វើការបញ្ចូលនូវតម្លៃusername និង password ព្រមទាំង loginbutton ផងដែរ។

            XI.         ជំហានទី៨៖ ដំណើរការ Application

សូមធ្វើការ run application ខាងលើ

• វានឹងបង្ហាញដូចរូប

• លក្ខខណ្ឌទី១៖ នៅពេលដែលយើងមិនបានបំពេញព័ត៌មានខាងលើ រួចចុចលើប៊ូតុង Login​ តែម្តង នោះវានឹងបង្ហាញដូចរូបខាងក្រោម

• លក្ខខណ្ឌទី២៖ ករណីដែល username និង password ពុំមាននៅក្នុង database វានឹងបង្ហាញដូចរូប

• លក្ខខណ្ឌទី៣៖ ករណីដែលអ្នកព្យាយាមធ្វើការបញ្ចូល username និង password មិនត្រឹមត្រូវ នោះវានឹងរាប់នូវចំនួនដងដែលអ្នកបានបញ្ចូលនៅក្នុង system

• លក្ខខណ្ឌទី៤៖ ករណីដែលអ្នកធ្វើការបញ្ចូល username និង password មិនត្រឹមត្រូវចំនួន៥ដង ឬលើសពី៥ដងឡើង វានឹងបង្ហាញដូចរូប

• លក្ខខណ្ឌទី៥៖ ករណីដែល username និង password ត្រឹមត្រូវ វានឹងបង្ហាញដូចរូប