25

บทท 3

วธการด าเนนงาน

การออกแบบและพฒนา เวบไซดสาขาการเงน คณะการบญชและการจดการ มหาวทยาลย

มหาสารคาม มการออกแบบระบบซงมรายละเอยดดงน

3.1 ระบบงานเดม

3.1.1 แผนภมกางปลา (Fishbone Diagram)

3.2 ระบบงานใหม

3.2.1 ผงงาน (Flowchart) ระบบงานใหม

3.2.2 แผนภาพการไหลของขอมล (Context Diagram)

3.2.3 แผนภาพแสดงความสมพนธระหวางขอมล (ER.Diagram)

3.2.4 พจนานกรมขอมล (Data Dictionary)

3.2.5 Site map

3.2.6 Output Design

3.2.7 Input Design

26

3.1 ระบบงานเดม

3.1.1 แผนภมกางปลา (Fishbone Diagram)

ภาพท 3-1 แผนภมกางปลา

จากแผนภมกางปลา สรปปญหาและสาเหตไดดงน

ปญหา คอ ระบบงานประชาสมพนธไมมประสทธภาพ

สาเหตของปญหา ประกอบดวย

1.สาเหตจากบคลากร

. บคลากรท างานลาชา

. บคลากรท างานผดพลาดบอย

2.สาเหตจากงบประมาณ

. ขาดเงนทนสนบสนนในการพฒนาระบบงานใหม

. คาใชจายเดมทเกดขนในระบบงานปจจบนมมาก เชน คากระดาษ

3.สาเหตจากการด าเนนงานในปจจบน

. การด าเนนงานลาชา

. การด าเนนงานไมรองรบอนาคต

4.สาเหตจากเทคโนโลยปจจบน

. ขาดเทคโนโลยสารสนเทศในการจดเกบขอมล

. ขาดเทคโนโลยสารสนเทศทชวยใหการท างานรวดเรวขน

27

3.2 ผงงาน (Flowchart) ระบบงานใหม

3.2.1 สวนของอาจารยในการเขาระบบ

3.2.1.1 สวนทอาจารย Login เขาสระบบ

Username Password

Username Password

Login Login

Admin Admin

ภาพท 3-2 Flowchart ของอาจารยในการ Log in เขาสระบบ

28

3.2.1.2 สวนส าหรบเปลยนรหสผานของอาจารย

Admin Admin

ภาพท 3-3 Flowchart ของอาจารยในการเปลยนรหสผาน

29

3.2.1.3 ระบบงานยอยในการเพม ลบ แกไข ขอมลประชาสมพนธ ของอาจารย

ภาพท 3-4 Flowchart ของอาจารยในการเพม ลบ แกไข ขอมลประชาสมพนธ

30

3.2.1.4 ระบบงานยอยในการเพม ลบ แกไข ขอมลบคลากร ของอาจารย

ภาพท 3-5 Flowchart ของอาจารยในการเพม ลบ แกไข ขอมลบคลากร

31

3.2.1.5 ระบบงานยอยในการเพม ลบ แกไข ขาวดวน ของอาจารย

ภาพท 3-6 Flowchart ของอาจารยในการเพม ลบ แกไข ขาวดวน

32

3.2.1.6 ระบบงานยอยในการเพม ลบ แกไข ขอมลเวบบอรด ของอาจารย

ภาพท 3-7 Flowchart ของอาจารยในการเพม ลบ แกไข ขอมลเวบบอรด

33

3.2.2 แผนภาพการไหลของขอมล (Context Diagram)

0

ภาพท 3-8 Context Diagram เวบสาขาการเงน

34

3.2.3 Data Flow diagram

2

3

4

D4

D5

D3

Login

1

Username, passwordD1

D2

D6

5

6

D9

D7

D8

Username,Password

ภาพท 3-9 DFD level 1 เวบไซตสาขาการเงน

35

1.1

Login

1.2

Username, Password

D1

Username,Password

Username, Password

ภาพท 3-10 DFD level2 of Process 1 การ Login เขาสระบบ

2.1

2.2

2.3

D2

D3

D2

ภาพท 3-11 DFD level2 of Process 2 จดการขอมลประชาสมพนธ

36

3.1

3.2

3.3

D4

ภาพท 3-12 DFD level2 of Process 3 จดการขอมลบคลากร

4.1

4.2

4.3

D5

D6

D5

D6

D5

ภาพท 3-13 DFD level2 of Process 4 จดการขอมลขาวดวน

37

5.1

5.2

5.3

D7

D7

D8

D8

D7

D8

ภาพท 3-14 DFD level2 of Process 5 จดการขอมลเวบบอรด

6.1

6.2

6.3

D8

ภาพท 3-15 DFD level2 of Process 6 จดการขอมลสมาชกเวบบอรด

38

3.2.3 ER.Diagram Model

Username Password

Username

Password

1

11

1

11 1

M

M

M

1

1

M

M 1

M

M

MMM1

M

ภาพท 3-16 ER.Diagram

39

3.2.4 พจนานกรมขอมล (Data Dictionary)

ตารางท 3-1 แสดงตาราง admin (เกบขอมลของอาจารย)

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนด

คย

อางอง A_id integer 4 รหสอาจารย PK A _username varchar 10 User ในการ Login A _password varchar 10 Password ในการ Login A _name varchar 50 ชอของอาจารย A _pic text ภาพประจ าตว

ตารางท 3-2 แสดงตาราง public_relation (เกบขอมลประชาสมพนธ)

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนด

คย

อางอง PR_id integer 4 รหสประชาสมพนธ PK Type_PR integer 4 รหสประเภทประชาสมพนธ FK TypePR PR_title varchar 300 หวขอ PR_des text รายละเอยด PR_date date วนท PR_file varchar 300 ไฟลแนบ PR_logo varchar 300 ภาพประจ าหวขอ

ตารางท 3-3 แสดงตาราง TypePR (เกบขอมลประเภทประชาสมพนธ)

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนด

คย

อางอง Type_PR integer 4 รหสประเภท PK Type_name varchar 50 ชอประเภท

ตารางท 3-4 แสดงตาราง Personal (เกบขอมลบคลากร)

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนดคย อางอง Per_id integer 4 รหสขอมลบคลากร PK Per_name_thai varchar 80 ชอ.นามสกลภาษาไทย Per_name_eng varchar 80 ชอ.นามสกลภาษาองกฤษ Per_website text เวบไซต

40

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนดคย อางอง Per_edu text วฒการศกษา Per_position text ต าแหนง Per_tel varchar 10 เบอรโทรศพท Per_email varchar 50 อเมล Per_pic varchar 100 ภาพบคลากร Per_calender varchar 100 ปฏทนการปฏบตงาน Per_work text วนทเขาท างาน Per_interest text งานวจยทสนใจ Per_exp text ประสบการณการท างาน Per_teach text วชาทสอน Per_syndicate text คณะกรรมการ Per_book text ต ารา Per_sheet text เอกสารประกอบการสอน Per_research text งานวจย Per_project text โครงการบรการวชาการ Per_seminar text บทความทางวชาการ

ตารางท 3-5 แสดงตาราง imageslide (เกบขอมลขาวดวน)

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนด

คย

อางอง Id_image integer 4 รหสภาพ PK Image_title varchar 300 หวขอขาว Image_des text รายละเอยด Image_name varchar 300 ชอภาพ Image_date datetime วนท

ตารางท 3-6 แสดงตาราง gallery (เกบภาพกจกรรม)

ชอฟลด ชนดขอมล ขนาด

ขอมล

ค าอธบาย ก าหนดคย อางอง img_id integer 4 รหสภาพ PK PR_id integer 4 รหสประชาสมพนธ FK public_relation

41

ชอฟลด ชนดขอมล ขนาด

ขอมล

ค าอธบาย ก าหนดคย อางอง Img_name varchar 300 ชอภาพ Img_date date วนท

ตารางท 3-7 แสดงตาราง Quiz_Webboard (เกบค าถามเวบบอรด)

ชอฟลด ชนดขอมล ขนาด

ขอมล

ค าอธบาย ก าหนดคย อางอง Quiz_id integer 4 รหสหวขอเวบบอรด PK Mem_id integer 4 รหสสมาชกเวบบอรด FK Member_web Ans_id integer 4 รหสค าตอบเวบบอรด FK Ans_Webboard Quiz_title varchar 100 หวขอเวบบอรด Quiz_description text รายละเอยด Quiz_date date วนท

ตารางท 3-8 แสดงตาราง Ans_Webboard (เกบค าตอบเวบบอรด)

ชอฟลด ชนดขอมล ขนาด

ขอมล

ค าอธบาย ก าหนดคย อางอง Ans_id integer 4 รหสค าตอบเวบบอรด PK Mem_id integer 4 รหสสมาชกเวบบอรด Ans_description text รายละเอยด Ans_date date วนท

ตารางท 3-9 แสดงตาราง Member_web(เกบขอมลสมาชกเวบบอรด)

ชอฟลด ชนดขอมล ขนาดขอมล ค าอธบาย ก าหนดคย อางอง Mem_id integer 4 รหสสมาชกเวบบอรด PK Mem_name varchar 50 ชอสมาชก Mem_lastname varchar 50 นามสกล Mem_username varchar 50 ชอในการใชเขาสระบบ Mem_password varchar 50 รหสผานใชเขาสระบบ Mem_email varchar 40 อเมล Mem_date text วนทสมคร

42

3.2.5 Site map

/ /

ภาพท 3-17 Sitemap ของ เวบไซตสาขาการเงน คณะการบญชและการจดการ

43

3.2.6 Output Design

ภาพท 3-18 ภาพแสดงหนาหลกของเวบไซต

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

Hot news

บทความ กจกรรม

อบรม/สมมา

นา

รบสมครงาน

Link Zone

44

ภาพท 3-19 ภาพแสดงหนาขาวดวนของเวบไซต

ภาพท 3-20 ภาพแสดงหนาบทความของเวบไซต

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

Hot news

ค าบรรยาย

ประมวลภาพ

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

บทความ

ค าบรรยาย

45

ภาพท 3-21 ภาพแสดงหนากจกรรมของเวบไซต

ภาพท 3-22 ภาพแสดงหนาอบรม/สมมนาของเวบไซต

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

กจกรรม

ค าบรรยาย

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

อบรม/สมมนา

ค าบรรยาย

46

ภาพท 3-23 ภาพแสดงหนารบสมครงานของเวบไซต

ภาพท 3-24 ภาพแสดงหนาคณาจารยในสาขาของเวบไซต

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

รบสมครงาน

ค าบรรยาย

Header

Menu

เกยวกบสาขาการเงน

หลกสตร

คณาจารยในสาขา

ศษยเกา

กระดานสนทนา

คณาจารยในสาขา

รปภาพ ขอมลบคลากร

47

3.2.7 Input Design

ภาพท 3-25 แสดงหนา Login ส าหรบอาจารย

ภาพท 3-26 แสดงหนาจดการขอมลภายในเวบไซตส าหรบอาจารย

Header

Log in

ส าหรบอาจารย

Header

ภาพ

ประจ าตว

ยนดตอนรบ เขาสระบบ

ออกจากระบบ

จดการขอมล

ประชาสมพนธ

จดการขอมล

บคลากร

จดการขอมลเวบ

บอรด

เมน

48

ภาพท 3-27 แสดงหนาจดการขอมลประชาสมพนธส าหรบอาจารย

Header

ภาพ

ประจ าตว

ยนดตอนรบ เขาสระบบ

ออกจากระบบ

ขอมลประชาสมพนธ

รายการขอมลประชาสมพนธ

ประเภทประชาสมพนธ

หวขอ

รายละเอยด

49

ภาพท 3-28 แสดงหนาจดการขอมลบคลากรส าหรบอาจารย

Header

ภาพ

ประจ าตว

ยนดตอนรบ เขาสระบบ

ออกจากระบบ

ขอมลบคลากร

ชอ.สกล

วฒการศกษา

ต าแหนง

เบอรโทรศพท

อเมล

รปภาพ

รายการขอมลบคลากร