Skip to content
<input> ช่องกรอกข้อมูล<textarea> ช่องกรอกข้อมูลแบบกว้าง<select> ตัวเลือก เมนูดรอปดาวน์
ฟอร์มแนวตั้ง (Default - Vertical form)
ค่าเริ่มต้นคือจัดฟอร์มแบบแนวตั้ง (label อยู่บน input)ฟอร์มแนวนอน (Horizontal form)
ใช้ Grid ช่วยจัดให้ label และ input อยู่ในแถวเดียวกันฟอร์มแบบเรียงในบรรทัดเดียว (Inline form)
ใช้ .form-inline สำหรับฟอร์มที่ต้องการให้ label และ input อยู่ในบรรทัดเดียว
.form-control-lg ใหญ่.form-control-sm เล็ก
MySQL
วันที่ 21 พฤษภาคม 68
1. การพัฒนา Website สำนักงานสาธารณสุขจังหวัดชัยภูมิ
- ออกแบบและสร้าง Forms บันทึกข้อมูลประชาสัมพันธ์ Website สำนักงานสาธารณสุขจังหวัดชัยภูมิ
2. จำลองเครื่องแม่ข่าย
- ติดตั้ง Linux OS
- ติดตั้ง Package สำหรับบริการ Web Server
3. ศึกษาโปรแกรม จัดการและถ่ายโอนไฟล์ สำหรับ Server (ตัวอย่างเช่น PuTTY,Fillzilla)
การพัฒนา Website สำนักงานสาธารณสุขจังหวัดชัยภูมิ
- ออกแบบและสร้าง Forms บันทึกข้อมูลประชาสัมพันธ์ Website สำนักงานสาธารณสุขจังหวัดชัยภูมิ
Forms
บน → Label
ล่าง → ช่อง input
ใช้คลาส .form-control กับ
ใช้คลาส .form-control-file ให้แนบไฟล์ได้
ใช้คลาส .form-text สำหรับข้อความอธิบายสั้น ๆ ใต้ช่อง input
readonly ผู้ใช้เห็นแต่แก้ไขไม่ได้ อ่านอย่างเดียว
ใช้คลาส .form-control-plaintext แสดงข้อความแบบไม่อยู่ในกล่อง input
disabled ปิดการใช้งานช่องกรอกข้อมูล
Checkboxes และ radios (ช่องติ๊กเลือก)
ใช้คลาส .form-check
.form-check-input กำหนด type=“checkbox” หรือ “radio”
รูปแบบการจัดฟอร์ม
ขนาดของช่อง input
การบันทึกข้อมูลจาก Forms ลงฐานข้อมูล
โปรเจกต์ส่วน Frontend
สร้างหน้าใหม่
หน้ารวมข้อมูลประชาสัมพันธ์
ng generate component news
หน้าฟอร์มสร้างข้อมูลประชาสัมพันธ์ใหม่
ng generate component news-post
เพิ่ม route ไปยังหน้า news
ใน app.routes.ts ใส่ path
ใน layout.component.ts
import { RouterModule } from '@angular/router'; เพื่อลิ้งก์ไปหน้าอื่นได้
สร้างหน้าแสดงรวมข้อมูลในหน้า news.component.html
สร้างฟอร์มในหน้า news-post.component.html
โปรเจกต์ส่วน Backend
เปิด XAMPP กด start MySQL
เข้า Command Prompt
mysql -u root
สร้างฐานข้อมูลชื่อ moph
CREATE DATABASE moph;
เลือกใช้ฐานข้อมูล
USE moph;
สร้างตารางเก็บข้อมูลข่าว
CREATE TABLE news (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
images JSON,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
);
สร้างไฟล์ server.js
เชื่อมต่อกับฐานข้อมูล MySQL
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'moph'
});
GET ดึงข้อมูลมาแสดง
SELECT * FROM news
POST เพิ่มโพสต์ใหม่
INSERT INTO news (title, content, images, timestamp)
รันทั้ง 2 โปรเจกต์พร้อมกัน
Frontend
ng serve
Backend
node server.js หรือ nodemon
หน้าโพสต์ประชาสัมพันธ์
หน้ารวมประชาสัมพันธ์ทั้งหมด
จำลองเครื่องแม่ข่าย
- ติดตั้ง Linux OS
Ubuntu
หน่วยความจำหลัก (RAM) 8192 MB (8 GB)
ติดตั้งแล้วกด เริ่ม เพื่อเปิดหน้าจอเสมือน
password 1234
เข้า Terminal
$ sudo apt-get update
ติดตั้ง MySQL
- ติดตั้ง Package สำหรับบริการ Web Server *****
เว็บเซิร์ฟเวอร์ (Web Server) คือ โปรแกรมที่คอยให้บริการแก่ไคลแอน (Client) ที่ร้องขอข้อมูลเข้ามาโดยผ่านเว็บเบราว์เซอร์โปรแกรมที่นิยมนำใช้เป็นเครื่องบริการเว็บ ได้แก่ อะปาเช่ (Apache Web Server) และไมโครซอฟท์ไอไอเอส (Microsoft IIS = Internet Information Server) เป็นต้น
Web server คือโปรแกรมที่อยู่และทำงานบนเครื่องฝั่ง Server (Host) ทำหน้าที่ในการรับคำสั่งจากการร้องขอของฝั่ง Client (โดยผ่านทาง Browser) และประมวลผลการทำงานจากการร้องขอดังกล่าว แล้วส่งข้อมูลกลับไปยังเครื่องของ Client ที่ร้องขอ
โปรแกรมที่คอยให้บริการแก่ Client ที่ร้องขอข้อมูลเข้ามาโดยผ่าน Browser
ศึกษาโปรแกรม จัดการและถ่ายโอนไฟล์ สำหรับ Server (ตัวอย่างเช่น PuTTY,Fillzilla)
FTP (File Transfer Protocol) เป็น Protocol ในระดับ Application Layer เพื่อให้คอมพิวเตอร์ 2 เครื่องสามารถเข้าถึงข้อมูลซึ่งกันและกันได้ผ่านเครือข่ายออนไลน์ ไม่ว่าจะเป็นไฟล์ ซอฟต์แวร์ ไดเรกทอรี่ ฯลฯ โดยเครื่องที่เริ่มเปิดการเชื่อมต่อก่อนจะเป็นฝั่ง local host ส่วนเครื่องที่รับคำร้องขอการเชื่อมต่อทางไกลจะเป็น remote host
หน้าที่หลักของ FTP จะใช้สำหรับการถ่ายโอนไฟล์ออนไลน์ระหว่างอุปกรณ์ปลายทาง 2 เครื่อง หรือระหว่างฝั่งผู้ใช้ (client) กับฝั่งเครื่องที่อยู่ไกล (remote server) ก็ได้ ไม่ว่าจะเป็นการขอไฟล์ (get), เพิ่มไฟล์ (put), การลบไฟล์, หรือแม้แต่แก้ไขไฟล์ก็ตาม
หลักการทำงานของ FTP
Connect server ที่ต้องการอัปโหลดไฟล์
เลือกไฟล์ที่ต้องการอัปลง
n8n
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.