การตั้งค่า IIS และพัฒนา Website เบื้องต้น

ข้อมูลนักศึกษา

ชื่อ: นันทกรณ์ อำพนันต์
รหัสนักศึกษา: 6810301037

IIS Website 1 (Port 8080)

URL: http://localhost:8080

หน้านี้เป็นหน้าแนะนำตัวของนักศึกษา แสดงชื่อ รหัสนักศึกษา และสาขาที่เรียน มีการใช้ CSS กำหนดพื้นหลังไล่สี จัดวางกึ่งกลาง และตกแต่งรูปโปรไฟล์ให้เป็นวงกลมมีเงา

HTML Code

<!DOCTYPE html>
<html>
<head>
 <title>My Profile</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="container">
 <h1>สวัสดีครับ</h1>
 <p>ชื่อ: นันทกรณ์ อำพนันต์</p>
 <p>รหัสนักศึกษา: XXXXXXXXX</p>
 <p>สาขา: วิศวกรรมซอฟต์แวร์</p>
 <img src="profile.png" alt="My Photo">
 </div>
</body>
</html>

CSS Code

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 font-family: 'Segoe UI', Tahoma, sans-serif;
 background: linear-gradient(135deg, #a8e6ff 0%, #e0f7fa 100%);
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
.container {
 background: #ffffff;
 padding: 40px 50px;
 border-radius: 20px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 text-align: center;
 max-width: 400px;
}
h1 {
 color: #1565c0;
 font-size: 32px;
 margin-bottom: 20px;
}
p {
 color: #37474f;
 font-size: 16px;
 margin: 8px 0;
}
img {
 margin-top: 20px;
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 50%;
 border: 4px solid #1565c0;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

Screenshot

IIS Website 2 (Port 8081)

URL: http://localhost:8081

หน้านี้แสดงข้อมูลแบบ dynamic โดยใช้ ASP.NET server-side ดึงวันเวลาปัจจุบันของเซิร์ฟเวอร์ ชื่อเครื่อง และ IP ของผู้เข้าชมมาแสดงผลบนหน้าเว็บแบบเรียลไทม์

ASPX Code

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head><title>Server Info</title></head>
<body>
 <h1>ยินดีต้อนรับ</h1>
 <p>วันเวลาปัจจุบัน: <%= DateTime.Now %></p>
 <p>ชื่อเครื่อง: <%= Environment.MachineName %></p>
 <p>IP ผู้เข้าชม: <%= Request.UserHostAddress %></p>
</body>
</html>

Server-side Commands Used

<%= DateTime.Now %>
<%= Environment.MachineName %>
<%= Request.UserHostAddress %>

Screenshot

← กลับไปหน้า Portfolio