Skip to main content
Legacy Stack

หน้านี้อธิบาย stack รุ่นเก่าที่ยังใช้กับโปรเจกต์เดิม สำหรับโปรเจกต์ใหม่กรุณาใช้ stack ปัจจุบันแทน

Boilerplate (.NET 6) — Legacy Stack

Software Development Environment​

Framework สำหรับการพัฒนา

  • ASP.NET Core Blazor Server*

  • .NET Core version 6

  • IDE: Visual Studio Code , Visual Studio 2022

Dependencies​

  • AntDesign (0.12.7)

  • AntDesign.ProLayout (0.12.4)

  • IdentityModel (6.0.0)

  • Microsoft.EntityFrameworkCore.Tools (6.0.9)

  • Oracle.EntityFrameworkCore (6.21.61)

  • Newtonsoft.Json (13.0.1)

Configuration​

Project Configuration​

Project Configuration แบ่งตาม Environment ได้ 2 แบบคือ (1) Development Environment ทำการกำหนดค่าด้วยไฟล์ appsettings.Development.json และ (2) Production Environment ทำการกำหนดค่าด้วยไฟล์ appsettings.json

มีรายละเอียดดังนี้

appsettings.Development.json

{
  "DetailedErrors": true,
  "Logging": 
  {
    "LogLevel": 
    { 
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ProSettings": 
  {
    "NavTheme": "dark",
    "HeaderHeight": 48,
    "Layout": "side",
    "ContentWidth": "Fluid",
    "FixedHeader": false,
    "FixSiderbar": true,
    "Title": "ISD BoilerPlate",
    "IconfontUrl": null,
    "PrimaryColor": "cyan",
    "ColorWeak": false,
    "SplitMenus": false, 
    "HeaderRender": true, 
    "FooterRender": true, 
    "MenuRender": true, 
    "MenuHeaderRender": true 
  }, 
  "OAuthSetting": 
  {
    "OAuthBaseAddress": "https://oauth.psu.ac.th",
    "OAuthRedirectUri": "https://localhost:44381/callback/", 
    "OAuthClientID": "xxxxxxxxx", 
    "OAuthClientSecret": "xxxxxxxxx", 
    "OAuthState": "xxxxxxxxx" 
  }, 
  "FileUploadSetting": 
  { 
    "FilePathTemp": "\\Temp", 
    "FileMaxSize": 10,  
    "FilePathPrivate": "\\Upload\\\\Private", 
    "FilePathPublic": "\\Upload\\\\Public" 
  }, 
  "ConnectionStrings": 
  { 
    "DefaultConnection": "xxxxxxxxx" 
  } 
}

appsettings.json

{ 
    "DetailedErrors": true, 
    "Logging": 
    { 
      "LogLevel": 
        { 
        "Default": "Information", 
        "Microsoft.AspNetCore": "Warning" 
        } 
    }, 
    "ProSettings": 
    { 
      "NavTheme": "dark", 
      "HeaderHeight": 48, 
      "Layout": "side", 
      "ContentWidth": "Fluid", 
      "FixedHeader": false, 
      "FixSiderbar": true, 
      "Title": "ISD BoilerPlate", 
      "IconfontUrl": null, 
      "PrimaryColor": "cyan", 
      "ColorWeak": false, 
      "SplitMenus": false, 
      "HeaderRender": true, 
      "FooterRender": true, 
      "MenuRender": true, 
      "MenuHeaderRender": true 
    }, 
    "OAuthSetting": 
    { 
      "OAuthBaseAddress": "https://oauth.psu.ac.th", 
      "OAuthRedirectUri": "https://localhost:44381/callback/", 
      "OAuthClientID": "xxxxxxxxx", 
      "OAuthClientSecret": "xxxxxxxxx", 
      "OAuthState": "xxxxxxxxx" 
    }, 
    "FileUploadSetting": 
    { 
      "FilePathTemp": "\\Temp", 
      "FileMaxSize": 10,  
      "FilePathPrivate": "\\Upload\\\\Private", 
      "FilePathPublic": "\\Upload\\\\Public" 
    }, 
    "ConnectionStrings": 
    { 
      "DefaultConnection": "xxxxxxxxx" 
    } 
}

Authentication Configuration​

การเชื่อมต่อ Service Authentication ต้องมีการตั้งค่าใน appsettings.json ดังนี้

"OAuthSetting": 
{
  "OAuthBaseAddress": "https://oauth.psu.ac.th",
  "OAuthRedirectUri": "https://localhost:44381/callback/",
  "OAuthClientID": "xxxxxxxxx",
  "OAuthClientSecret": "xxxxxxxxx",
  "OAuthState": "xxxxxxxxx"
},

โดยค่าแต่ละ key มีความหมาย ดังนี้

1.OAuthBaseAddress - URL ของ Service Authentication

2.OAuthRedirectUri - Callback โดยค่าที่ใส่ จะเป็น hostname ของตัว Application ที่กำลังจะพัฒนา

3.OAuthClientID -- ID ได้จากตอนเพิ่ม application ใน Authentication Service

4.OAuthClientSecret -- รหัสผ่าน ได้จากตอนเพิ่ม Application ใน Authentication Service

5.OAuthState -- ค่าได้จากตอนเพิ่ม Application ใน Authentication Service

หมายเหตุ การเพิ่ม Application ใน Authentication Service ทำได้โดยการขอเพิ่มจากผู้ดูแลระบบ Authentication

Theme Configuration​

กำหนดค่าด้วย ProSettings Section ในไฟล์ appsettings.json

ProSettings Section​

"ProSettings": 
{
  "NavTheme": "dark",
  "HeaderHeight": 48,
  "Layout": "side",
  "ContentWidth": "Fluid",
  "FixedHeader": false,
  "FixSiderbar": true,
  "Title": "ISD BoilerPlate",
  "IconfontUrl": null,
  "PrimaryColor": "cyan",
  "ColorWeak": false,
  "SplitMenus": false,
  "HeaderRender": true,
  "FooterRender": true,
  "MenuRender": true,
  "MenuHeaderRender": true
}

การใช้เครื่องมือตั้งค่า Theme​

1.คลิกปุ่มตั้งค่า ระบบจะเปิดหน้าจอ Page style settings

2.กำหนดค่าต่าง ๆ เช่น ตำแหน่งเมนู Theme สีหลักของระบบ เป็นต้น

3.หลังจากปรับ Theme ตามที่ต้องการแล้วให้คลิกปุ่ม Copy Settings จะได้ค่าของ ProSettings Section ให้นำไปวางไว้ในไฟล์ appsettings.json

กำหนดค่าเมนูด้วยไฟล์ menu.json

menu.json

[
  {
    "path": "/",
    "name": "Home",
    "key": "home",
    "icon": "home"
  },
  {
    "path": "/search",
    "name": "Search",
    "key": "search",
    "icon": "search"
  },
  {
    "path": "/Example/UploadSample",
    "name": "Upload",
    "key": "Upload",
    "icon": "Upload"
  },
  {
    "path": "/Example",
    "name": "exampleChild",
    "key": "exampleChild",
    "icon": "Upload"
    "children": 
    [
      {
        "path": "/child1",
        "name": "child1",
        "key": "child1"
      },
      {
        "path": "/child2",
        "name": "child2",
        "key": "child2"
      }
    ]
  }
]

การตั้งค่า menu สามารถกำหนดได้โดยค่าใน Array ของ menu.json โดยจะมี object ที่มี key ดังนี้

path, name, key และ icon

ในกรณีที่มี submenu ย่อยในเมนูหลักนั้นๆ จะมีการกำหนด key ที่มีชื่อเพิ่มว่า children ส่งค่า array ที่เป็น array ของ object ที่มี key ดังนี้ path, name และ key ดังตัวอย่างข้างบน จะเห็นได้ว่า เมนูที่ชื่อว่า exampleChild จะมี submenu ย่อย 2 เมนูคือ child1 และ child2