copy from narumon repo

Documents/Latex/.gitignore

+## Core latex/pdflatex auxiliary files:
+*.aux
+*.lof
+*.log
+*.lot
+*.fls
+*.out
+*.toc
+*.fmt
+*.fot
+*.cb
+*.cb2
+.*.lb
+
+## Intermediate documents:
+*.dvi
+*.xdv
+*-converted-to.*
+# these rules might exclude image files for figures etc.
+# *.ps
+# *.eps
+# *.pdf
+
+## Generated if empty string is given at "Please type another file name for output:"
+.pdf
+
+## Bibliography auxiliary files (bibtex/biblatex/biber):
+*.bbl
+*.bcf
+*.blg
+*-blx.aux
+*-blx.bib
+*.run.xml
+
+## Build tool auxiliary files:
+*.fdb_latexmk
+*.synctex
+*.synctex(busy)
+*.synctex.gz
+*.synctex.gz(busy)
+*.pdfsync
+
+## Build tool directories for auxiliary files
+# latexrun
+latex.out/
+
+## Auxiliary and intermediate files from other packages:
+# algorithms
+*.alg
+*.loa
+
+# achemso
+acs-*.bib
+
+# amsthm
+*.thm
+
+# beamer
+*.nav
+*.pre
+*.snm
+*.vrb
+
+# changes
+*.soc
+
+# comment
+*.cut
+
+# cprotect
+*.cpt
+
+# elsarticle (documentclass of Elsevier journals)
+*.spl
+
+# endnotes
+*.ent
+
+# fixme
+*.lox
+
+# feynmf/feynmp
+*.mf
+*.mp
+*.t[1-9]
+*.t[1-9][0-9]
+*.tfm
+
+#(r)(e)ledmac/(r)(e)ledpar
+*.end
+*.?end
+*.[1-9]
+*.[1-9][0-9]
+*.[1-9][0-9][0-9]
+*.[1-9]R
+*.[1-9][0-9]R
+*.[1-9][0-9][0-9]R
+*.eledsec[1-9]
+*.eledsec[1-9]R
+*.eledsec[1-9][0-9]
+*.eledsec[1-9][0-9]R
+*.eledsec[1-9][0-9][0-9]
+*.eledsec[1-9][0-9][0-9]R
+
+# glossaries
+*.acn
+*.acr
+*.glg
+*.glo
+*.gls
+*.glsdefs
+
+# gnuplottex
+*-gnuplottex-*
+
+# gregoriotex
+*.gaux
+*.gtex
+
+# htlatex
+*.4ct
+*.4tc
+*.idv
+*.lg
+*.trc
+*.xref
+
+# hyperref
+*.brf
+
+# knitr
+*-concordance.tex
+# TODO Comment the next line if you want to keep your tikz graphics files
+*.tikz
+*-tikzDictionary
+
+# listings
+*.lol
+
+# makeidx
+*.idx
+*.ilg
+*.ind
+*.ist
+
+# minitoc
+*.maf
+*.mlf
+*.mlt
+*.mtc[0-9]*
+*.slf[0-9]*
+*.slt[0-9]*
+*.stc[0-9]*
+
+# minted
+_minted*
+*.pyg
+
+# morewrites
+*.mw
+
+# nomencl
+*.nlg
+*.nlo
+*.nls
+
+# pax
+*.pax
+
+# pdfpcnotes
+*.pdfpc
+
+# sagetex
+*.sagetex.sage
+*.sagetex.py
+*.sagetex.scmd
+
+# scrwfile
+*.wrt
+
+# sympy
+*.sout
+*.sympy
+sympy-plots-for-*.tex/
+
+# pdfcomment
+*.upa
+*.upb
+
+# pythontex
+*.pytxcode
+pythontex-files-*/
+
+# tcolorbox
+*.listing
+
+# thmtools
+*.loe
+
+# TikZ & PGF
+*.dpth
+*.md5
+*.auxlock
+
+# todonotes
+*.tdo
+
+# vhistory
+*.hst
+*.ver
+
+# easy-todo
+*.lod
+
+# xcolor
+*.xcp
+
+# xmpincl
+*.xmpi
+
+# xindy
+*.xdy
+
+# xypic precompiled matrices
+*.xyc
+
+# endfloat
+*.ttt
+*.fff
+
+# Latexian
+TSWLatexianTemp*
+
+## Editors:
+# WinEdt
+*.bak
+*.sav
+
+# Texpad
+.texpadtmp
+
+# LyX
+*.lyx~
+
+# Kile
+*.backup
+
+# KBibTeX
+*~[0-9]*
+
+# auto folder when using emacs and auctex
+./auto/*
+*.el
+
+# expex forward references with \gathertags
+*-tags.tex
+
+# standalone packages
+*.sta
+

Documents/Latex/1-introduction.tex

+\chapter{บทนำ}
+
+\section{ที่มาและเหตุผล }
+เนื่องจากในปัจจุบันการแต่งกายถือเป็นเรื่องที่สำคัญ การใช้ชีวิตประจำวันในแต่ละวันที่ต้องไปทำงานหรือต้องไปเรียนทุกคนต่างต้องมีการแต่งกายเพื่อให้ตัวเองดูดีและมีความน่าเชื่อถือ เพราะการแต่งกายสามารถบ่งบอกได้ถึงบุคลิกภาพของผู้ใส่ได้ และการแต่งกายให้เข้ากับรูปร่างยังถือเป็นเรื่องที่ยาก เนื่องจากรูปร่างของแต่ละบุคคลนั้นมีความแตกต่างกัน ดังนั้นการเลือกใส่เสื่อผ้าที่ใส่แล้วทำให้เราดูดีขึ้น การเลือกใส่เสื้อผ้าที่เหมาะสมกับรูปร่างจะส่งผลให้เราดูมีบุคลิกภาพที่ดีขึ้นได้ เพราะสามารถเพิ่มความมั่นใจในการใช้ชีวิตประจำวันได้ ในการเลือกซื้อเสื้อผ้าในแต่ละครั้งบางท่านอาจใช้เวลาในการเลือกนาน เนื่องจากไม่ทราบว่าควรใส่เสื้อผ้าแบบไหนที่ใส่แล้วจะทำให้ดูดีขึ้น   เสื้อผ้าที่ใส่แล้วจะไม่ทำให้ดูอวบหรือผอมเพิ่มมากขึ้น จึงทำให้เสียเวลาไปกับการเลือกซื้อเสื้อผ้าไปนาน ดังนั้นการแต่งกายจึงถือเป็นเรื่องที่มีความสำคัญเป็นอย่างมาก และปัจจุบันระบบขายสินค้าออนไลน์ได้รับความนิยมอย่างมากเช่น shopee, lazada เป็นต้น ทำให้ลูกค้าได้รับความสะดวกในการซื้อขายสินค้า แต่สินค้าประเภทเสื้อผ้าเครื่องแต่งกายนั้นกลับมีทำตลาดผ่านการขายผ่านสังคมเครือข่ายเช่น facebook, instagram โดยผู้ที่มีทำการ live เป็นปัจจัยที่สำคัญในการตัดสินใจเลือกซื้อของลูกค้าเนื่องจากการแนะนำ ให้ความรู้เรื่องการแต่งกายที่เหมาะสม และการแนะนำชุดตัวอย่างให้ลูกค้าได้พิจารณาเลือกตาม อย่างไรก็ดี ลูกค้าที่เลือกชุดแต่งกายอาจจะมีรูปร่าง ลักษณะ บุคลิกที่แตกต่างกันออกไป และอาจจะแตกต่างจากผู้ทำการ live ขายสินค้า ทำให้การสินค้าที่เสนอ ไม่ตรงตามความต้องการของผู้ใช้งาน
+\newline
+\indent
+ในปัจจุบันการใช้อินเตอร์เน็ตเป็นปัจจัยหนึ่งในชีวิตของมนุษย์ไปแล้ว และมีการพัฒนาอย่างต่อเนื่องทั้งด้านฮาร์ดแวร์ (Hardware) และซอฟต์แวร์ (Software) เพื่อตอบสนองความตองการของผู้ใช้งานทั้งในด้านบวกและด้านลบ จึงทำให้ผู้พัฒนามีความคิดที่จะสร้างแอปพลิเคชันที่เป็นประโยชน์ให้แก่ผู้ใช้งาน
+\newline
+\indent
+ดังนั้นผู้พัฒนาจึงได้สร้างเป็นเว็บที่จะมาช่วยให้แนะนำการแต่งกายให้กับสุภาพบุรุษและสุภาพสตรีทุกท่านที่มีปัญหาในเรื่องของการเลือกใส่เสื้อผ้า จะช่วยท่านในเรื่องของการเลือกใส่เสื้อผ้าแบบไหนที่จะเข้ากับรูปร่างและใส่แล้วเหมาะสมกับหุ่นของท่าน ระบบแนะนำการแต่งกายสุภาพบรุษและสุภาพสตรีนี้จะช่วยทำให้การแต่งกายเป็นเรื่องที่ง่ายและสนุกมากยิ่งขึ้น โดยใช้หลักการของ Collaborative Filtering เพื่อแนะนำเสื้อผ้าที่เหมาะสมจากหลายร้านค้าให้กับผู้ใช้งานโดยพิจารณาจากกลุ่มผู้ใช้ที่มีคุณลักษณะและประวัติการซื้อที่ใกล้เคียงกัน ข้อมูลที่จัดเก็บสามารถนำมาวิเคราะห์ข้อมูลการซื้อขายและการจัดกลุ่มลูกค้าเพื่อให้ร้านค้าที่เป็นสมาชิกสามารถนำไปวิเคราะห์เพื่อทำการส่งเสริมการขายของร้านต่อไป  	จุดเด่นคือสมาชิกสามารถเลือกเสื้อผ้าจากหลายร้านค้าในระบบเพื่อสร้างเป็นชุดที่ชื่นชอบ สามารถนำไปแสดงเป็นข้อความสาธารณะบนสังคมเครือข่าย โดยสมาชิกคนอื่นสามารถติดตามและให้เสนอข้อคิดเห็นได้
+
+\section{วัตถุประสงค์}
+\begin{enumerate}[label=\arabic*.]
+	\item เพื่อพัฒนาเว็บแนะนำการเลือกเสื้อผ้าโดยใช้หลักการเรียนรู้ของเครื่อง
+	\item เพื่อพัฒนาระบบเว็บเพื่อนำเสนอความรู้และให้คำแนะนำในการแต่งกายให้แก่สุภาพบุรุษและสุภาพสตรี 
+\end{enumerate}
+\section{ขอบเขตของโครงงาน}
+\begin{enumerate}[label=1.3.\arabic*]
+	\item ผู้ใช้งาน
+	\begin{itemize}
+		\item สามารถสมัครสมาชิกได้
+		\item สามารถเข้าสู่เข้าสู่ระบบได้
+		\item สามารถแก้ไขข้อมูลผู้ใช้งานได้
+		\item สามารถดูรายการเสื้อผ้าจากร้านค้าได้
+		\item สามารถดูรายการร้านค้าได้
+		\item สามารถดูรายการแนะนำเสื้อผ้าได้
+		\item สามารถบันทึกรายการเสื้อผ้าที่ถูกใจได้
+		\item สามารถบันทึกรายการร้านค้าที่ถูกใจได้
+		\item สามารถดูบันทึกรายการเสื้อผ้าที่ถูกใจได้
+		\item สามารถดูบันทึกรายการร้านค้าที่ถูกใจได้
+		\item สามารถดูค้นหาเสื้อผ้าได้
+	\end{itemize}
+\newpage
+	\item ร้านค้า
+	 \begin{itemize}
+		 	\item สามารถสมัครสมาชิกได้
+		 	\item สามารถเข้าสู่ระบบได้
+		 	\item สามารถแก้ไขข้อมูลร้านค้าได้
+		 	\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลเสื้อผ้าในร้านค้าได้
+		 	\item สามารถดูรายการคนที่ถูกใจเสื้อผ้าได้
+		 	\item สามารถดูรายการคนที่ถูกใจร้านค้าได้
+	 \end{itemize}
+ 	\item ผู้ดูแลระบบ
+ 	\begin{itemize}
+ 		\item สามารถเข้าสู่ระบบได้
+ 		\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลร้านค้าได้
+ 		\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลผู้ใช้งานได้
+ 	\end{itemize}
+\end{enumerate}
+\section{ประโยชน์ที่คาดว่าจะได้รับ}
+\begin{enumerate}[label=\arabic*.]
+	\item มีระบบแนะนำการแต่งกายสำหรับสุภาพบุรุษและสุภาพสตรี
+	\item มีระบบเว็บแนะนำในเรื่องของการแต่งกายให้เหมาะกับรูปร่าง เพื่อช่วยให้ลูกค้าสามารถเลือกดูสินค้าทุกเวลาที่สะดวก
+  	\item มีระบบสามารถแนะนำสินค้าตามรสนิยมของผู้ใช้ได้
+\end{enumerate}
+\section{เครื่องมือที่ใช้ในการพัฒนา (Development tools)}
+\subsection{ฮาร์ดเเวร์}
+\begin{enumerate}[label=\arabic*.]
+	
+	\item เครื่องคอมพิวเตอร์ส่วนบุคคล (Personal computer)
+		\begin{itemize}
+			\item  หน่วยประมวลผลกลาง CPU Intel ® CoreTM i3-50005U CPU @ 2.0GHz 3MB L3Cache 
+			\item  หน่วยความจำหลัก ขนาด  4 GB 
+			\item  หน่วยความจำสำรอง Solid State Drive (SSD) ขนาดความจุ 240 GB
+			\item  หน่วยความจำแสดงผล Intel ® Graphics 5500
+			\item  ระบบปฏิบัติการ: Windows 10 Education 64 bit
+		\end{itemize}
+\end{enumerate}
+
+\subsection{ซอฟต์แวร์ (Software)}
+\begin{enumerate}[label=\arabic*.]
+	\item Visual Studio Code เป็น text editor เครื่องมือสำหรับพัฒนาเว็บแอปพลิเคชัน
+	\item PythonAnywhere คือ เว็บที่ให้บริการเครื่องมือที่ใช้ในการพัฒนาโปรแกรม (IDE) และ เป็น web hosting service โดยใช้ภาษา Python
+	\item Django คือ โปรแกรม OpenSource สำหรับพัฒนา web application ซึ่งเขียนในภาษา Python
+	\item SQLite เป็นโปรแกรมฐานข้อมูลที่มีขนาดเล็ก เก็บฐานข้อมูลเป็นไฟล์โดยไม่จำเป็นต้องมีเซิร์ฟเวอร์
+	\item Collaborative filtering คือระบบ RS ที่ใช้ข้อมูลการกระทำของเราและผู้ใช้งานท่านอื่น เพื่อใช้แนะนำการกระทำที่เราน่าจะทำหรือน่าสนใจ
+\end{enumerate}
+
+\newpage
+\subsection{แผนการดำเนินการ}
+	ในการสร้างระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรีนี้ ผู้พัฒนาได้แบ่งขั้นตอน การดำเนินงานไว้ด้วยกัน 8 ขั้นตอน ดังตารางที่ 1.1
+
+%\begin{landscape}
+%\sffamily
+\begin{table}[H]
+	\noindent
+	\caption{ขั้นตอนการดำเนินงาน}
+	\begin{ganttchart}[
+		canvas/.append style={fill=none, draw=black!5, line width=.75pt},
+		vgrid={*2{draw=black!7, line width=.75pt}},
+		title label font=\bfseries\footnotesize,
+		bar label node/.append style={
+			align=left,
+			text width=width("7. Functional Testing On")},
+		bar/.append style={draw=none, fill=black!63}
+		]{1}{12}
+		\gantttitle{2562}{4}
+		\gantttitle{2563}{8}\\
+		\gantttitle{พ.ย.}{2}
+		\gantttitle{ธ.ค.}{2} 
+		\gantttitle{ม.ค.}{2}
+		\gantttitle{ก.พ.}{2}
+		\gantttitle{มี.ค.}{2}
+		\gantttitle{เม.ย.}{2} \\
+		\ganttbar{1.ศึกษาความเป็นไปได้}{1}{2} \\
+		\ganttbar{2.เสนอหัวข้อโครงงาน}{2}{3} \\
+		\ganttbar{3.ศึกษาค้นคว้าข้อมูล}{3}{8} \\
+		\ganttbar{4.ศึกษาการใช้เครื่องมือ}{3}{7} \\
+		\ganttbar{5.วิเคราะห์และออกแบบ}{3}{5} \\
+		\ganttbar{6.เขียนโปรแกรม}{4}{9} \\
+		\ganttbar{7.ทดสอบและแก้ปัญหา}{6}{9} \\
+		\ganttbar{8.จัดทำเอกสาร}{7}{11} \\
+	\end{ganttchart}
+	\label{tab:ganttchart}
+\end{table}
+%\end{landscape}
+%TODO แก้เทมเพลตเอาชื่อตารางไว้ด้านบน

Documents/Latex/2-background.tex

+\chapter{ทฤษฎีที่เกี่ยวข้อง}
+ในบทนี้จะกล่าวถึงรายละเอียดเกี่ยวกับทฤษฎีและงานวิจัยที่เกี่ยวของกับการพัฒนาระบบ แนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี โดยแบ่งเนื้อหาออกเป็น 2 ส่วน ได้แก่ ส่วนที่หนึ่ง เป็นเนื้อหาพื้นฐานเกี่ยวกับทฤษฎีการเขียนโปรแกรมและเทคโนโลยีที่นำมาใช้ในการพัฒนาในหัวข้อที่ 2.1-2.6 ได้แก่ ความรู้พื้นฐานเกี่ยวกับ Visual studio code, PythonAnywhere, Django, SQLite, Collaborative Filtering และภาษา Python  และในส่วนที่สองเป็นเนื้อหาเกี่ยวกับเว็บที่เกี่ยวของกับโครงงานนี้ในหัวข้อที่ 2.7
+
+\section{ความรู้เกี่ยวกับ Visual Studio Code}
+	วิชวล สตูดิโอโค้ด (Visual Studio Code) \cite{VisualStudioCode} เป็นโปรแกรม Code Editor ที่ใช้ในการแก้ไขและปรับแต่งโค้ด จากค่ายไมโครซอฟท์ (Microsoft) มีการพัฒนาออกมาในรูปแบบของ OpenSource จึงสามารถนำมาใช้งานได้แบบฟรีที่ต้องการความเป็นมืออาชีพ ซึ่ง Visual Studio Code นั้น เหมาะสำหรับนักพัฒนาโปรแกรมที่ต้องการใช้งานข้ามแพลตฟอร์ม (platform) รองรับการใช้งานทั้งบน Windows, macOS และ Linux สนับสนุนทั้งภาษา JavaScript, TypeScript และ Node.js สามารถเชื่อมต่อกับ Git ได้ นำมาใช้งานได้ง่ายไม่ซับซ้อนมีเครื่องมือส่วนขยายต่าง ๆ ให้เลือกใช้อย่างมาก การเปิดใช้งานภาษาอื่น ๆ ทั้ง ภาษา C++, C#, Java, Python, PHP หรือ Go
+	
+\section{ความรู้พื้นฐาน Java}
+PythonAnywhere \cite{PythonAnywhere} เป็นเว็บไซต์ที่ให้บริการ Online IDE และ Web Hosting Service โดยใช้ภาษา Python เป็นหลัก มี Python Web Framework ต่างๆ เช่น Django, Flask, Bottle สามารถสมัครสมาชิกได้ฟรี หรือสามารถจ่ายเงินเป็นรายเดือนเพื่อเพิ่มความสามารถต่างๆ ได้ โดยสมาชิกแบบฟรีสามารถ Deploy Web App ได้ 1 Web App (ไม่สามารถตั้งชื่อโดเมน Web App เองได้ โดยทางเว็ปไซต์จะให้ใช้ ID เป็นชื่อโดเมนของ Web App)
+
+
+	\section{ความรู้เกี่ยวกับ Django}
+	แจงโก้ (Django) \cite{DjangoFramework} เป็น framework ที่ใช้ในการสร้าง Web Application ในฝั่งของ Back End ที่พัฒนาด้วยภาษา Python โดยในตัว Framework จะมีส่วนประกอบทุกอย่างที่จำเป็นตั้งแต่การเชื่อมต่อฐานข้อมูล ไปจนถึงการ Render ข้อมูลออกมาให้ฝั่ง Front End แสดงผลข้อมูลเหล่านั้นได้ ซึ่ง Framework ในรูปแบบนี้ในภาษาอื่นๆ เช่น Ruby on rails สำหรับภาษา Ruby, Play Framework สำหรับภาษา Java หรือ Scala, Groovy on Grails สำหรับภาษา Groovy, Laravel สำหรับภาษา PHP หรือ Express สำหรับภาษา Javascript ของ Node.js เป็นต้น
+	 
+	 \subsection{คุณสมบัติของ Django Framework \cite{Python&Django}}
+	 \begin{enumerate}
+	 	\item Object-Relational Mapper คือ การกำหนด Data Model ในภาษา Python เพื่อการทำงานด้านข้อมูล และสนับสนุน Dynamic Database-Access API
+	 	\item Automatic Admin Interface คือ ส่วนของการสร้าง Interface อัตโนมัติสำหรับการ Add, Edit, Delete และ Search ด้วย Django Framework
+	 	\item Elegant URL design คือ การทำให้ URL มีความสวยงาม สั้น กระชับ และสื่อความหมายของหน้านั้น ๆ ได้อย่างชัดเจน เหมาะสมกับการทำ SEO ในปัจจุบัน
+	 	\item Template System คือ Django นั้นมีการออกแบบ Template Language เพื่อการเขียนแยกส่วนระหว่าง Design และ Business Logic
+	 	\item Cache System คือ ส่วนของการบันทึก หรือจัดการข้อมูลที่มีการดาวน์โหลดไปแล้ว เพื่อเพิ่มประสิทธิภาพการทำงานของเว็บไซต์ด้านความเร็ว และด้านอื่น ๆ
+	 	\item nternationalization คือ Django สนับสนุน Application ที่มีความหลากหลายด้านภาษาในการแสดงผล
+	 \end{enumerate}
+
+	 \section{ความรู้เกี่ยวกับ SQLite}
+	 เอสคิวแอลไลท์ (SQLite) \cite{SQLite} เป็นห้องสมุดที่น่าทึ่งที่ฝังตัวอยู่ภายในแอปพลิเคชันที่ใช้งาน ในฐานะที่เป็นฐานข้อมูลแบบไฟล์ในตัว SQLite มีชุดเครื่องมือที่ยอดเยี่ยมในการจัดการข้อมูลทุกประเภทโดยมีข้อ จำกัด และความสะดวกน้อยกว่ามากเมื่อเปรียบเทียบกับฐานข้อมูลเชิงสัมพันธ์แบบโฮสต์กระบวนการ (เซิร์ฟเวอร์)
+	 \newline
+	 \indent
+	 เมื่อแอปพลิเคชันใช้ SQLite กาพรวมจะทำงานกับการเรียกใช้งานและการโทรโดยตรงกับไฟล์ที่เก็บข้อมูล (เช่นฐานข้อมูล SQLite) แทนการสื่อสารผ่านอินเทอร์เฟซประเภท (พอร์ตพอร์ตซ็อกเก็ต) สิ่งนี้ทำให้ SQLite รวดเร็วและมีประสิทธิภาพเป็นอย่างยิ่งและยังมีเทคโนโลยีพื้นฐาน
+	 \newline
+	 \indent
+	 ประเภทข้อมูลที่สนับสนุนของ SQLite
+	 \begin{itemize}
+	 	\item โมฆะ:
+	 \end{itemize}
+	  ค่า NULL
+	  \begin{itemize}
+	  	\item จำนวนเต็ม:
+	  \end{itemize}
+	  เลขจำนวนเต็มที่ลงนามซึ่งเก็บใน 1, 2, 3, 4, 6 หรือ 8 ไบต์ขึ้นอยู่กับขนาดของค่า
+	  \begin{itemize}
+	  	\item จริง:
+	  \end{itemize}
+	  ค่าจุดลอยตัวเก็บไว้เป็นหมายเลขทศนิยม IEEE 8 ไบต์
+	  \begin{itemize}
+	  	\item ข้อความ:
+	  \end{itemize}
+	  สตริงข้อความที่จัดเก็บโดยใช้การเข้ารหัสฐานข้อมูล (UTF-8, UTF-16BE หรือ UTF-16LE)
+	  \begin{itemize}
+	  	\item หยด:
+	  \end{itemize}
+	  หยดของข้อมูลที่จัดเก็บเหมือนกับข้อมูลที่ป้อนเข้า
+	  \newline
+	  หมายเหตุ: หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับประเภทข้อมูลของ SQLite และความสัมพันธ์ประเภท SQLite ให้ตรวจสอบเอกสารอย่างเป็นทางการเกี่ยวกับเรื่องนี้
+	  \newline
+	  \indent
+	  ข้อดีของ SQLite
+	  \begin{itemize}
+	  	\item ไฟล์ที่ใช้:
+	  \end{itemize}
+	  ฐานข้อมูลทั้งหมดประกอบด้วยไฟล์เดียวบนดิสก์ซึ่งทำให้พกพาได้อย่างมาก
+	  \begin{itemize}
+	  	\item มาตรฐานการตระหนักถึง:
+	  \end{itemize}
+	  แม้ว่ามันอาจดูเหมือนการใช้งานฐานข้อมูล“ แบบง่าย” แต่ SQLite ก็ใช้ SQL มันมีคุณสมบัติบางอย่างที่ถูกละเว้น (เข้าร่วมขวาหรือเพื่อแต่ละงบ) แต่บางส่วนเพิ่มเติมจะถูกอบเข้า
+	  \begin{itemize}
+	  	\item เหมาะสำหรับการพัฒนาและการทดสอบ:
+	  \end{itemize}
+	  ในระหว่างขั้นตอนการพัฒนาแอปพลิเคชั่นส่วนใหญ่สำหรับคนส่วนใหญ่มีแนวโน้มที่จะต้องการโซลูชันที่สามารถปรับขนาดสำหรับการทำงานพร้อมกัน SQLite ซึ่งมีฐานคุณลักษณะที่หลากหลายสามารถให้มากกว่าสิ่งที่จำเป็นสำหรับการพัฒนาด้วยความเรียบง่ายในการทำงานกับไฟล์เดียวและไลบรารีบนฐาน C ที่เชื่อมโยง
+	  \newline
+	  \indent
+	  ข้อเสียของ SQLite
+	  \begin{itemize}
+	  	\item ไม่มีการจัดการผู้ใช้:
+	  \end{itemize}
+	  ฐานข้อมูลขั้นสูงมาพร้อมกับการสนับสนุนสำหรับผู้ใช้เช่นการเชื่อมต่อที่มีการจัดการที่มีสิทธิ์ตั้งค่าการเข้าถึงฐานข้อมูลและตาราง เมื่อพิจารณาถึงวัตถุประสงค์และลักษณะของ SQLite (ไม่มีระดับที่สูงขึ้นของการทำงานพร้อมกันของไคลเอนต์หลายรายการ) คุณลักษณะนี้ไม่มีอยู่
+	  \begin{itemize}
+	 	\item ขาดความเป็นไปได้ที่จะจัดด้วยสำหรับประสิทธิภาพเพิ่มเติม
+	 \end{itemize}
+	 อีกครั้งโดยการออกแบบ SQLite เป็นไปไม่ได้ที่จะได้รับประสิทธิภาพที่เพิ่มขึ้นอย่างมาก ไลบรารี่นั้นง่ายต่อการปรับแต่งและใช้งานง่าย เนื่องจากมันไม่ซับซ้อนจึงเป็นไปไม่ได้ในทางเทคนิคที่จะทำให้มันมีประสิทธิภาพมากกว่ามันแล้วน่าประหลาดใจคือ
+	 \newline
+	 \indent
+	 เมื่อต้องการใช้ SQLite
+	 \begin{itemize}
+	 	\item แอปพลิเคชันแบบฝัง:
+	 \end{itemize}
+	 แอปพลิเคชันทั้งหมดที่ต้องการความสะดวกในการพกพาซึ่งไม่จำเป็นต้องมีการขยายเช่น แอพพลิเคชั่นในท้องถิ่นแอปพลิเคชันมือถือหรือเกม
+	 \begin{itemize}
+	 	\item การแทนที่การเข้าถึงดิสก์:
+	 \end{itemize}
+ 		ในหลายกรณีแอปพลิเคชันที่จำเป็นต้องอ่าน / เขียนไฟล์ไปยังดิสก์โดยตรงจะได้ประโยชน์จากการสลับไปใช้ SQLite สำหรับการทำงานเพิ่มเติมและความเรียบง่ายที่มาจากการใช้ภาษาที่มีโครงสร้างของแบบสอบถาม (SQL)
+ 	 \begin{itemize}
+ 		\item การทดสอบ:
+ 	\end{itemize}
+ 	มันเกินความเป็นจริงสำหรับแอปพลิเคชันขนาดใหญ่เพื่อใช้กระบวนการเพิ่มเติมสำหรับการทดสอบตรรกะทางธุรกิจ (เช่นวัตถุประสงค์หลักของแอปพลิเคชัน: ฟังก์ชันการทำงาน)
+ 	\newline
+ 	\indent
+ 	เมื่อไม่ต้องการใช้ SQLite
+ 	 \begin{itemize}
+ 		\item แอปพลิเคชันผู้ใช้หลายคน: 
+ 	\end{itemize}
+ 	หากคุณกำลังทำงานกับแอปพลิเคชันที่ลูกค้าหลายรายต้องการเข้าถึงและใช้ฐานข้อมูลเดียวกัน RDBM ที่มีคุณสมบัติครบถ้วน (เช่น MySQL) น่าจะเลือก SQLite ได้ดีกว่า
+ 	 \begin{itemize}
+ 		\item แอปพลิเคชันที่ต้องการปริมาณการเขียนสูง:
+ 	\end{itemize}
+ 	หนึ่งในข้อ จำกัด ของ SQLite คือการดำเนินการเขียน DBMS นี้อนุญาตให้ใช้งานการเขียน * เพียงครั้งเดียวในเวลาที่กำหนดดังนั้นจึงอนุญาตให้มีปริมาณงานที่ จำกัด
+ 	 
+
+\section{ความรู้เกี่ยวกับภาษา Python}
+ภาษาโปรแกรม Python \cite{Python} คือภาษาโปรแกรมคอมพิวเตอร์ระดับสูง โดยถูกออกแบบมาให้เป็นภาษาสคริปต์ที่อ่านง่าย  โดยตัดความซับซ้อนของโครงสร้างและไวยกรณ์ของภาษาออกไป ในส่วนของการแปลงชุดคำสั่งที่เราเขียนให้เป็นภาษาเครื่อง Python มีการทำงานแบบ Interpreter คือเป็นการแปลชุดคำสั่งทีละบรรทัด เพื่อป้อนเข้าสู่หน่วยประมวลผลให้คอมพิวเตอร์ทำงานตามที่เราต้องการ นอกจากนั้นภาษาโปรแกรม Python ยังสามารถนำไปใช้ในการเขียนโปรแกรมได้หลากหลายประเภท โดยไม่ได้จำกัดอยู่ที่งานเฉพาะทางใดทางหนึ่ง (General-purpose language) จึงทำให้มีการนำไปใช้กันแพร่หลายในหลายองค์กรใหญ่ระดับโลก เช่น Google, YouTube, Instagram, Dropbox และ NASA เป็นต้น
+\newline
+\indent
+ประวัติของภาษาโปรแกรม Python ได้เริ่มต้นขึ้นในเดือนธันวาคมปี 1989 โดยนาย Guido van Rossum โปรแกรมเมอร์ชาวดัตช์ ในตอนนั้นทำงานอยู่ที่สถาบันวิจัยแห่งชาติ Centrum Wiskunde & Informatica (CWI) ซึ่งเป็นสถาบันวิจัยทางด้านคณิตศาสตร์และวิทยาการคอมพิวเตอร์ในเมืองอัมสเตอร์ดัม ประเทศเนเธอร์แลนด์ ในเวลานั้น Guido ต้องพัฒนาโปรแกรมสำหรับผู้ดูแลระบบ เพื่อใช้ในโครงการ Amoeba ซึ่งเป็นโครงการเกี่ยวกับระบบปฏิบัติการแบบกระจาย (Distributed operating system) อย่างไรก็ตามเขารู้สึกว่าภาษาโปรแกรม ABC, C  และ Bourne shell มีข้อจำกัดมากมาย  ทั้งเรื่องใช้เวลาในการพัฒนานานมากและไม่สามารถตอบโจทย์หลายประการ ดังนั้น Guido จึงได้ตัดสินใจเริ่มพัฒนาภาษาโปรแกรมระดับสูงขึ้นมาใหม่เพื่อใช้งานเองเป็นงานอดิเรก โดยนำเอาสิ่งที่ชอบในภาษา ABC มาพัฒนาลงไปในภาษาโปรแกรม Python รวมถึงได้พัฒนาส่วนอื่น ๆ เพิ่มเติมเข้าไป และในเวลาต่อมาจึงได้เผยแพร่ Python 1.0 เวอร์ชันแรกในปี 1994 หากเทียบกับภาษา Java ที่ได้ทำการเผยแพร่เวอร์ชันแรกในปี 1996 จะเห็นได้ว่าภาษา Python มีอายุมากกว่าภาษา Java ถึง 2 ปีที่มาของชื่อภาษาโปรแกรม Python นั้นไม่ได้มีที่มาเกี่ยวข้องกับงูเหมือนกับชื่อของมันแต่อย่างใด แต่ในช่วงที่ตัดสินใจเลือกชื่อนั้น ชื่อแรกที่เข้ามาในความคิดของ Guido ก็คือ มอนตี้ ไพธอน: ละครสัตว์เหินหาว (Monty Python’s Flying Circus) ซึ่งเป็นชื่อรายการโทรทัศน์ทางช่อง BBC แนวตลกชื่อดังจากฝั่งอังกฤษที่เขาชื่นชอบมาก ๆ โดยเขาให้เหตุผลว่า “Python” เป็นชื่อที่สั้น จำได้ง่าย ฉีกแนวนิดๆ และดูลึกลับ ในตอนนั้นโดยทั่วไปมักจะนิยมเอาชื่อของบุคคลที่มีชื่อเสียงมาใช้เป็นชื่อภาษาโปรแกรมคอมพิวเตอร์ เช่น Ada, Pascal และ Eiffel ถึงแม้ว่าทีมนักแสดงในรายการจะไม่ได้มีชื่อเสียงทางด้านวิทยาศาสตร์และเทคโนโลยี แต่ก็เป็นที่ชื่นชอบในกลุ่มชาว Geek อย่างมาก รวมถึงกลุ่มคนที่ทำงานใน CWI ก็มักจะนิยมเอาชื่อรายการทีวีโชว์มาตั้งชื่อในงานของตัวเองอีกด้วย นี่คือเหตุผลที่มาที่ไปของชื่อภาษา Python นอกจากนั้น Guido ยังใช้ชื่อของนักแสดงตลกชาวอังกฤษชื่อดังและเป็นหนึ่งในสมาชิกผู้ก่อตั้งทีม Monty Python ที่ชื่อ Eric Idle มาใช้เป็นชื่อ IDE หรือเครื่องมือที่ใช้ในการพัฒนาโปรแกรมว่า “IDLE” อีกด้วย
+
+	 \section{ความรู้เกี่ยวกับ Collaborative filtering}
+	 \subsection{ ระบบแนะนำ (Recommender System)}
+	 ระบบผู้แนะนำ (Recommender System) หมายถึง  การเสนอแนวทางเลือกให้แก่บุคคลใดบุคคลหนึ่ง ยกตัวอย่างสิ่งที่สามารถแนะนำ เช่น เสื้อผ้า ร้านอาหาร เพลง หนัง เป็นต้น ซึ่งในที่นี้จะเป็นระบบการแนะนำเสื้อผ้าให้แก่ผู้ใช้งาน โดยจะใช้หลักการของ Collaborative Filtering จะเลือกแนะนำสิ่งที่ผู้ใช้คนอื่นๆ ในระบบที่มีลักษณะความชอบคล้ายคลึงกับผู้ใช้ปัจจุบันมาก และผู้ใช้เหล่านี้ได้ให้คะแนนความชอบต่อไอเทม (item) นั้นไว้ค่อนข้างสูง ในขณะที่ผู้ใช้ปัจจุบันยังไม่เคยใช้ไอเทมนั้นมาก่อน
+	 \newline
+	 ระบบผู้แนะนำสามารถแบ่งออกได้เป็น 5 ประเภทตามลำดับความซับซ้อนของเทคนิคที่ใช้ได้แก่ \cite{recommenders}
+	 	\begin{enumerate}[label=\arabic*.]
+		 \item ไอเท็มยอดนิยม - กลยุทธ์ที่ง่ายที่สุด (Most Popular Items - The Simplest Strategy)
+		 \newline
+		 วิธีที่ง่ายที่สุดคือให้ลูกค้าสิ่งที่ได้รับความนิยมมากที่สุดไม่ว่าจะเป็นภาพยนตร์หนังสือหรือบทความเกี่ยวกับเสื้อผ้า โดยไม่ต้องทำอะไรมากกว่าดูในบันทึกการขายของคุณคุณสามารถทำได้ ไม่ต้องใช้วิทยาศาสตร์ข้อมูล ข้อมูลไม่ได้เป็นแบบส่วนบุคคล แต่อาจมีประโยชน์หากคุณรู้น้อยมากเกี่ยวกับผู้เข้าชม ต้องมีคุณสมบัติเนื้อหาพื้นฐานเพื่อสร้างหมวดหมู่ย่อยที่สามารถจับคู่การเรียกดูปัจจุบันของผู้เข้าชม ตัวอย่างเช่นหากคุณเสนอสินค้าที่หลากหลายเช่นทุกอย่างตั้งแต่เครื่องมือไปจนถึงเสื้อผ้าหรือภาพยนตร์หนังสือหรือข่าวที่ดึงดูดความสนใจ จะต้องพยายามจับคู่รายการอย่างน้อยในหมวดหมู่เดียวกัน แม้จะมีข้อจำกัดเหล่านี้ Home Depot ใช้ผู้ขายที่ดีที่สุดอย่างสม่ำเสมอและ GAP ใช้ผลิตภัณฑ์ล่าสุด และมาถึงเร็วนี้เป็นประจำเพื่อเพิ่มรายได้ เป็นไปได้มากที่จะพิจารณาผู้แนะนำที่นิยมมากที่สุดว่าเป็นวิธีเสริม
+		 \item การวิเคราะห์ความสัมพันธ์หรือการวิเคราะห์ตลาด (Association or Market Basket Analysis)
+		 \newline
+		 \indent
+		 การวิเคราะห์ความสัมพันธ์และการวิเคราะห์ตลาดมองเฉพาะเนื้อหา การวิเคราะห์ทางสถิติประเภทนี้ขึ้นอยู่กับการคำนวณที่ง่ายที่สุดเท่านั้นในการค้นหารายการที่ใช้ร่วมกันบ่อยครั้ง การวิเคราะห์ความสัมพันธ์และการวิเคราะห์ตลาดมีความเหมือนกันทางคณิตศาสตร์ เมื่อลูกค้ามักจะได้รับรายการหรือบริการหนึ่งครั้ง (เช่นบริการธนาคาร) เรียกสมาคมนี้ว่า เมื่อลูกค้าอาจซื้อหลายอย่างพร้อมกันเรียก Market Basket ดังนั้นการวิเคราะห์ความสัมพันธ์จะดำเนินการในระดับลูกค้า (สิ่งที่อยู่ในบัญชีของลูกค้า) ในขณะที่การวิเคราะห์ตลาดจะดำเนินการในระดับการทำธุรกรรม (สิ่งที่อยู่ในรายการชองลูกค้า) มี 3 ขั้นตอนหลัก:
+		 \begin{enumerate}[label=\arabic*]
+		 	\item ประเมินความสัมพันธ์ระหว่างแต่ละผลิตภัณฑ์ของสินค้าและผลิตภัณฑ์อื่นที่ได้เสนอโดยใช้อัลกอริทึมของคณิตศาสตร์
+		 	\item ระบุการจับคู่ที่มีความสัมพันธ์ที่ดี (โดยทั่วไปจะเป็นคะแนนความสัมพันธ์ 2 หรือสูงกว่า) ตัวอย่างเช่นลูกค้าที่มีบัตรเครดิตอาจพบว่ามีแนวโน้มที่จะมีสินเชื่อรถยนต์มากกว่าสองเท่าหรือสามเท่ากว่าลูกค้าสินเชื่อรถยนต์ที่สุ่มเลือก
+		 	\item สร้างข้อเสนอส่วนบุคคลสำหรับลูกค้าที่มีผลิตภัณฑ์หนึ่งของคู่ที่เชื่อมโยงอย่างยิ่ง แต่ไม่ใช่อีกข้อ
+		 \end{enumerate}
+		 \newline
+		 ข้อดีสำหรับเทคนิคนี้
+		 \begin{itemize}
+		 	 \item ง่ายและรวดเร็วมาก
+		 	 \item จะทำงานกับฐานลูกค้าขนาดเล็กและกระจัดกระจาย ตัวอย่างเช่นหากเป็นผู้ให้บริการขนาดเล็กเช่นธนาคารระดับภูมิภาคที่มีลูกค้าน้อยกว่า 5,000 รายและอาจมีเพียง 30 ผลิตภัณฑ์หรือผู้ให้บริการอีคอมเมิร์ซบูติกขนาดเล็กในทำนองเดียวกัน
+		 	 \item ความรู้เกี่ยวกับลูกค้า นอกเหนือจากผลิตภัณฑ์หรือบริการที่มีอยู่ในปัจจุบันไม่จำเป็นต้องมี การเตรียมข้อมูล เนื่องจากการเพิ่มความรู้เกี่ยวกับลูกค้าอาจใช้เวลานานและมีค่าใช้จ่ายสูงและไม่จำเป็นที่นี่การวิเคราะห์ความสัมพันธ์ของกลุ่มลูกค้าและตลาดจึงเป็นวิธีที่คุ้มค่าที่สุดสำหรับการสร้างข้อเสนอส่วนบุคคล
+		 \end{itemize}
+	 	\indent
+	 	การวิเคราะห์ลุ่มลูกค้าและการวิเคราะห์ตลาดเป็นหัวใจสำคัญของคำแนะนำอีคอมเมิร์ซภายใต้หัวข้อ“ ลูกค้าที่ซื้อสิ่งนี้และถือว่าเป็นรายการเหล่านี้” หรือ“ รายการที่ซื้อด้วยกัน” ซึ่งเป็นวัตถุดิบหลักของ Amazon เนื่องจากต้องการข้อมูลลูกค้าน้อยมากจึงไม่ได้ผลเช่นกันเพราะการเลือกนั้นกว้างมากเช่นภาพยนตร์หนังสือหรือเพลงและมีคนรู้น้อยเกี่ยวกับสิ่งที่ลูกค้าชอบ อย่างไรก็ตามสามารถกรองโดยใช้กิจกรรมการเรียกดูปัจจุบันของผู้เข้าชม
+		 \item การกรองเนื้อหา (Content Filtering :CF)
+		 \newline
+		 \indent
+		 การกรองตามเนื้อหาเป็นสิ่งดีเมื่อ 10 ปีที่แล้ว ยังคงพบในการใช้งานที่หลากหลายและมีแอปพลิเคชันที่ใช้ได้ เนื่องจากชื่อแสดงถึง CF จะมองหาความคล้ายคลึงกันระหว่างรายการที่ลูกค้าบริโภคหรือเรียกดูในอดีตเพื่อนำเสนอทางเลือกในอนาคต CFs เป็นตัวแยกประเภทเฉพาะของผู้ใช้ที่เรียนรู้ที่จะจัดประเภททางเลือกในเชิงบวกหรือเชิงลบโดยยึดตามความชอบของผู้ใช้ (โปรไฟล์ผู้ใช้)
+		 \newline
+		 อัลกอริทึม:
+		 \newline
+		 ระบบจะสร้างโปรไฟล์ตามเนื้อหาของผู้ใช้โดยใช้แอตทริบิวต์ที่ไม่ต่อเนื่อง ประวัติความเป็นมาของการบริโภคหรือการเรียกดูของผู้ใช้ถูกใช้เพื่อสร้างเวกเตอร์ถ่วงน้ำหนักของคุณสมบัติของรายการ น้ำหนักจะเรียนรู้หรือกำหนดให้แตกต่างกันไปตามความสำคัญของคุณลักษณะสำหรับผู้ใช้เฉพาะ น้ำหนักนั้นถูกใช้เพื่อเปรียบเทียบกับน้ำหนักเวกเตอร์ของรายการต่าง ๆ ที่อาจแนะนำ เทคนิคการคำนวณอาจแตกต่างจากค่าเฉลี่ยถ่วงน้ำหนักอย่างง่ายไปจนถึงตัวจําแนกเบส์การวิเคราะห์กลุ่มต้นไม้ตัดสินใจหรือวิธีการที่ซับซ้อนมากขึ้นรวมถึงตาข่ายประสาทเทียม คุณจะต้องตรวจสอบวิธีแก้ปัญหาแบบแพคเกจเพื่อประเมินวิธีการคำนวณและประสิทธิผล
+		\newline
+		คุณสมบัติของรายการ:
+		\newline
+		ข้อกำหนดที่ชัดเจนคือสามารถอธิบายเนื้อหาจำนวนมากเพื่อใช้ในการจำแนกประเภท สิ่งเหล่านี้สามารถเป็นบูลีนได้ (ภาพยนตร์เป็นภาพเคลื่อนไหวผู้แต่งหนังสือเล่มนี้คือ Clive Cussler วัสดุของเสื้อเชิ้ตเป็นผ้าฝ้าย พวกเขายังสามารถต่อเนื่องเช่นการจัดอันดับภาพยนตร์ที่ได้รับจากแหล่งการจัดอันดับ “การจัดอันดับเฉลี่ย” ของลูกค้ารายอื่นที่บริโภครายการหรือร้อยละหรือจำนวนนาทีในภาพยนตร์ที่พิจารณาว่าเป็น “การกระทำ”
+		ความสามารถในการรับและรักษาแอตทริบิวต์ของเนื้อหาเป็นทั้งเกณฑ์หลักและข้อจำกัดที่สำคัญของ CF คุณลักษณะบางอย่างอาจหาได้ง่าย แต่คุณสมบัติอื่นอาจไม่ใช่ (เช่นคุณลักษณะที่อัปเดตอย่างต่อเนื่องของอุปกรณ์อิเล็กทรอนิกส์ใหม่หรือคุณลักษณะของภาพยนตร์) ในสภาพแวดล้อมเช่นภาพยนตร์เพลงและข่าวสินค้าคงคลังอาจมีการเปลี่ยนแปลงอย่างรวดเร็วและมีขนาดใหญ่จนการรับและบำรุงรักษาคุณลักษณะนั้นยากหรือมีค่าใช้จ่ายสูงเกินไป 
+		ในบางสภาพแวดล้อมที่มีปริมาณการซื้อขายสูงอาจมีข้อมูลภายนอกอยู่ ตัวอย่างเช่น Pandora Radio ที่ใช้ CF สามารถใช้คุณลักษณะ 400 รายการทั้งเพลงและศิลปินที่จัดทำโดยโครงการจีโนมดนตรีเพื่อค้นหาความคล้ายคลึงกัน มะเขือเทศเน่าเว็บไซต์แนะนำภาพยนตร์เป็นอีกตัวอย่างหนึ่งของการนำ CF มาใช้
+		\newline
+		เพิ่มประสิทธิภาพ:
+		\newline
+		หากตัวจําแนกมีอะไรที่จะทำงานกับอื่น นอกเหนือจากการซื้อแบบไบนารีหรือไม่ซื้อคำแนะนำผลลัพธ์จะขาดความแม่นยำ วิธีแก้ทั่วไปที่มีค่าในบางสภาพแวดล้อม แต่ไม่รวมอยู่ในสภาพอื่น
+		\begin{itemize}
+			\item โพสต์คะแนนการแนะนำ:   ผู้ใช้จะได้รับตัวเลือกในการใช้ปุ่มชอบหรือไม่ชอบสำหรับคำแนะนำที่นำเสนอแม้ว่าพวกเขาจะไม่ได้ซื้อหรือเลือก
+			\item โพสต์ซื้อคะแนน:   ผู้ใช้ให้คะแนน (ปกติ 1 ถึง 5) เกี่ยวกับความพึงพอใจของพวกเขากับรายการ
+			\item โปรไฟล์อาสาสมัครการบริโภคล่วงหน้า:   สำหรับแอปพลิเคชันจำนวนมากที่ขอให้ผู้ใช้ล่วงหน้าเพื่อให้ข้อมูลโปรไฟล์บางอย่างเกี่ยวกับการกำหนดลักษณะช่วยในทางเลือกการกรองล่วงหน้าอย่างมาก
+			\item การทำโปรไฟล์ผู้ใช้: โปรไฟล์ ผู้ใช้สามารถปรับปรุงด้วยการแบ่งส่วนหรือข้อมูลประชากร 
+		\end{itemize}
+	จุดแข็งและจุดอ่อน:
+	\begin{enumerate}[label=\arabic*.]
+		\item ระบบผู้แนะนำที่ใช้จริงส่วนใหญ่แก้ปัญหา Cold Start ของวิธีจัดการกับผู้เยี่ยมชมที่มีประวัติเพียงเล็กน้อยหรือไม่มีเลยเนื่องจากคำแนะนำสามารถขับเคลื่อนโดยการรวมประวัติการสืบค้น (สั้น ๆ ) พร้อมทั้งชอบหรือไม่ชอบหรือการทำโปรไฟล์โดยสมัครใจ
+		\item การปรับปรุงโปรไฟล์อาจไม่สามารถทำได้หรืออยู่ในระดับที่เท่ากันสำหรับผู้ใช้ทุกคนที่ปล่อยให้ปัญหาการกระจัดกระจายในการคำนวณ คุณอาจไม่มีแท็กสำหรับทุกหมวดหมู่สำหรับทุกรายการ
+		\item การใช้งาน CF โดยทั่วไปสามารถเรียนรู้จากแหล่งเดียว (เว็บไซต์ของคุณ) ซึ่งจำกัดความสามารถในการให้คำแนะนำที่ไม่ได้เป็นส่วนหนึ่งของ 'เมล็ดพันธุ์' ดั้งเดิม ระบบบางระบบเช่นตัวรวบรวมข่าวได้รับการออกแบบเพื่อรวมเนื้อหาจากหลายแหล่งเพื่อปรับปรุงข้อจำกัดนี้
+		\item หากไม่มีการขยายโปรไฟล์หรือข้อเสนอแนะของผู้ใช้ระบบ CF จะใช้การคำนวณอื่น นอกเหนือจากการบริโภคหรือไม่ได้ใช้
+	\end{enumerate}
+		 \item การคัดกรอง (Collaborative Filtering: CB)
+		 \newline
+		 ตัวกรองความร่วมมือมุ่งเน้นไปที่ผู้ใช้และผู้ใช้อื่นที่พบว่ามีลักษณะทางคณิตศาสตร์คล้ายกับผู้ใช้ ในทางทฤษฎีไม่จำเป็นต้องมีคุณลักษณะเฉพาะสำหรับเนื้อหาที่ CB สามารถอนุมานได้ หลังจากนั้นเราจะเห็นว่าการเพิ่มคุณสมบัติเนื้อหาสามารถเพิ่มประสิทธิภาพ แต่ไม่จำเป็นต้องใช้ทางเทคนิค หลักฐานพื้นฐานคือหากผู้ใช้สองคนมีความชอบและชอบที่ไม่เหมือนกันในอดีตที่ผ่านมาพวกเขาจะยังคงมีความคล้ายคลึงกันที่แข็งแกร่งในอนาคต CB จะจับคู่คนที่ชอบหนังแนวโรแมนติกกับภาพยนตร์ที่มีเนื้อหาโรแมนติกที่แข็งแกร่งโดยไม่ต้องมีการกำหนด “ความรัก” เมื่อสร้างความคล้ายคลึงกันแล้วรายการที่บริโภคโดยผู้ใช้รายหนึ่งสามารถแนะนำให้กับผู้ใช้รายอื่นที่คล้ายคลึงกันได้ การมีอยู่ของการจัดอันดับภายหลังการเลือกการบ่งชี้ว่าชอบหรือไม่ชอบทันทีและ / หรือโปรไฟล์ผู้ใช้ที่มีอยู่ก่อนมีความจำเป็นเพื่อให้เทคนิคนี้ทำงานได้ CB พยายามที่จะทำนายการจัดอันดับผู้ใช้สำหรับรายการที่มองไม่เห็น ความถูกต้องของการทำนายสามารถกำหนดได้โดยการเปรียบเทียบการจัดอันดับที่คาดการณ์กับการจัดอันดับจริงเมื่อได้รับรายการที่แนะนำ
+		 \newline
+		 อัลกอริทึม:
+		 \newline
+		 ระบบ CB ส่วนใหญ่ใช้การแยกตัวประกอบเวกเตอร์และเริ่มต้นด้วยการสร้างเวกเตอร์คุณลักษณะที่อธิบายผู้ใช้ (ผลิตภัณฑ์และคุณสมบัติที่ระบุว่าน่าสนใจขนาดและความถี่ของการซื้อก่อนหน้า ฯลฯ ) ในระบบ CB ขั้นสูงเพิ่มเติม (รวม CB / CF ระบบ) คุณสมบัติเวกเตอร์นอกจากนี้ยังสร้างขึ้นสำหรับผลิตภัณฑ์ (ผู้เขียน  ประเภท คุณสมบัติ ฯลฯ ) การคำนวณความคล้ายคลึงกันของโคไซน์นั้นเกิดขึ้นกับเวกเตอร์คุณลักษณะเพื่อระบุลูกค้าและผลิตภัณฑ์ที่คล้ายคลึงกัน ข้อเสนอแนะสามารถทำขึ้นอยู่กับความคล้ายคลึงกันของลูกค้าหรือความคล้ายคลึงกันของผลิตภัณฑ์กับผลิตภัณฑ์อื่นที่ลูกค้าได้ซื้อหรือเรียกดูการแยกตัวประกอบตามลูกค้าเป็นพีชคณิตเชิงเส้นตรงไปตรงมาและสามารถรีเฟรชในหน่วยความจำแบบเรียลไทม์หลังจากการจัดอันดับแต่ละครั้งหรือการเลือกหรือไม่เลือกรายการที่แนะนำ ประสิทธิภาพจะเพิ่มขึ้นตามหลักวิชาการระหว่างการโต้ตอบของผู้ใช้กับไซต์ของคุณเมื่อพวกเขาจัดอันดับและเลือกรายการใหม่ โปรดทราบว่าสำหรับฐานผู้ใช้ขนาดใหญ่มากที่มีสินค้าคงคลังขนาดใหญ่มากพลังการคำนวณอาจมีความสำคัญ แต่อยู่ในช่วงของบริการคลาวด์ MPP การแยกตัวประกอบตามผลิตภัณฑ์มีแนวโน้มมากขึ้นจากการรวมกลุ่มหรือสถิติเช่นสหสัมพันธ์ของเพียร์สันและดำเนินการในแบทช์ออฟไลน์
+		 \newline
+		 คุณสมบัติของผู้ใช้:
+		 \newline
+		 ระบบ CB พึ่งพาข้อมูลสองประเภทเพื่อให้ทำงานได้ดี รายการแรกคือรายการที่เราขอให้ผู้ใช้ระบุ ได้แก่ 
+		 \newline
+		 \begin{itemize}
+		 	\item ให้คะแนนรายการในระดับห้าจุดหรือใช้ปุ่มชอบหรือไม่ชอบทันที
+		 	\item ขอให้ผู้ใช้ค้นหารายการและปฏิบัติตามข้อกำหนดที่ใช้
+		 	\item การสร้างโปรไฟล์ของไลค์และไม่ชอบตามปัจจัยต่าง ๆ เช่นประเภทผู้แต่งหรือปัจจัยที่คล้ายกัน
+		 	\item นำเสนอสองทางเลือกและถามผู้ใช้ว่าดีกว่า (การวิเคราะห์ร่วมกัน)
+		\end{itemize}
+	 	เราจะรวบรวมข้อมูลเกี่ยวกับพฤติกรรมออนไลน์ที่แท้จริงของผู้ใช้ซึ่งรวมถึง:
+	 	\begin{itemize}
+		 	\item การสังเกตรายการที่ดูรวมถึงเวลาที่ใช้ดู
+		 	\item การซื้อจริง
+		 	\item หากได้รับอนุญาตให้รวบรวมข้อมูลจากคอมพิวเตอร์ของผู้ใช้เช่นรายการที่รับฟังหรือดูจริง
+		 	\item การใช้แหล่งข้อมูลภายนอกเช่นไซต์เครือข่ายสังคมออนไลน์เพื่อเพิ่มไลค์และไม่ชอบสำหรับผู้ใช้รายนี้
+		 \end{itemize}
+	 จุดแข็งและจุดอ่อน:
+	 \begin{enumerate}[label=\arabic*.]
+	 	\item CBs ไม่พึ่งพาแอตทริบิวต์เนื้อหาที่กำหนดไว้ล่วงหน้าและสามารถให้คำแนะนำที่ถูกต้องสำหรับเนื้อหาประเภทต่างๆโดยไม่จำเป็นต้องมีความเข้าใจในรายการเอง แอ็ตทริบิวต์สังเคราะห์เหล่านี้มีค่าสามารถส่งออกไปยังระบบกรองเนื้อหาได้อย่างไรก็ตามอาจยากที่จะทำให้มนุษย์ตีความได้
+	 	\item CBs ต้องการข้อมูลจำนวนมากเพื่อวิเคราะห์ ในกรณีที่ความหลากหลายของรายการมีขนาดใหญ่มากอาจมีรายการที่ไม่ได้ติดแท็กจำนวนมากที่สร้างปัญหา Sparsity ในการคำนวณ อาจเป็นการยากที่จะค้นหาผู้ใช้รายอื่นที่ให้คะแนนรายการเดียวกัน แม้แต่ไอเท็มที่ได้รับความนิยมมากที่สุดอาจมีเรตติ้งไม่กี่อย่างเท่านั้น
+	 	\item รายการที่ใหม่และไม่เคยได้รับการจัดอันดับไม่สามารถแนะนำได้เนื่องจากคำแนะนำนั้นขึ้นอยู่กับการให้คะแนนก่อน
+	 	\item CBs มักจะแนะนำรายการที่เป็นที่นิยมและอาจอยู่ภายใต้การดำเนินการสำหรับผู้ใช้ที่มีรสนิยมเฉพาะ
+	 	\item การแยกตัวประกอบเมทริกซ์อาจเหมาะสมเกินไปหากมีพารามิเตอร์มากเกินไป
+	 	\item รายการยอดนิยมส่วนใหญ่ (เช่นภาพยนตร์) สามารถดำเนินการแยกต่างหากจากสินค้าคงคลังแบบเต็ม (ถ้ามีขนาดใหญ่มาก) เพื่อให้สามารถอัปเดตรายการยอดนิยมแบบเรียลไทม์แม้ว่าสินค้าคงคลังทั้งหมดมีขนาดใหญ่เกินไปที่จะประมวลผลหลังจากการเลือกของผู้ใช้แต่ละคน
+	 \end{enumerate}
+		 \item ไฮบริด (Hybrid)
+		 \newline
+		 มีการตีความสองอย่างของผู้แนะนำไฮบริดและคุณควรคิดว่าพวกเขาเป็นทั้งสองด้านกับเหรียญเดียวกัน
+			 \begin{itemize}
+				\item ความรู้ 
+				\item ระบบ CF / CB แบบรวม 
+			 \end{itemize}
+		 	\begin{enumerate}[label=\arabic*.]
+		 	\item ความรู้
+		 	\newline
+		 	การเปลี่ยนแปลงนี้ค่อนข้างง่ายที่จะเข้าใจเนื่องจากมันเกี่ยวข้องกับการเพิ่มกฎโดยผู้เชี่ยวชาญในประเด็นมนุษย์ ผู้จัดการฝ่ายการตลาดผลิตภัณฑ์ที่ดีสามารถกำหนดผลิตภัณฑ์ที่ทำและไม่ไปด้วยกันได้บ่อยครั้งและผลิตภัณฑ์ใดบ้างที่อาจเป็นส่วนเสริมและเสริม
+		 	\item ระบบ CF / CB แบบรวม
+		 	เมื่อรู้เกี่ยวกับผู้แนะนำ CF และ CB อาจจะเป็นประโยชน์ต่อทั้งสองฝ่าย โปรดทราบว่าระบบ CB บางเวอร์ชันใช้ทั้งแอททริบิวต์ลูกค้าและไอเท็มแล้วแม้ว่าแอททริบิวต์ไอเท็มในกรณีนี้โดยทั่วไปจะเป็นตัวแปรที่คำนวณจากการสังเคราะห์ซึ่งอาจไม่มีตรรกะที่เข้าใจได้ง่าย ในกรณีนี้ระบบ CF / CB ที่รวมกันนั้นแตกต่างกันไปขึ้นอยู่กับหลาย ๆ วิธีที่ระบบเหล่านี้สามารถรวมกันได้
+		 	\begin{figure}[H]
+		 		\centering
+		 		\includegraphics[width=1\columnwidth]{Figures/2/2.1}
+		 		\caption{ระบบ CF / CB แบบรวม}{ที่มา : https://www.datasciencecentral.com/profiles/blogs/5-types-of-recommenders}
+		 		\label{Fig:sc1}
+		 	\end{figure}
+		 \end{enumerate}
+	 ไม่มีแนวปฏิบัติสากลที่ดีที่สุดเฉพาะสำหรับไฮบริดผู้แนะนำซึ่งจะต้องใช้ความเข้าใจของคุณในสถานการณ์พิเศษของธุรกิจของคุณ กลยุทธ์บางอย่างอาจรวมถึง:
+		 \begin{itemize}
+		 	\item น้ำหนัก: กลยุทธ์การลงคะแนนระหว่างผู้แนะนำคู่แข่ง 
+		 	\item การเลือกฐานกฎ: ตามกฎที่คุณกำหนดในบางกรณีผู้แนะนำรายหนึ่งจะโดดเด่นกว่าอีกฝ่าย
+		 	\item การรวมกัน: คำแนะนำจากทั้งสองจะถูกนำเสนอเข้าด้วยกัน
+		 	\item การรวมคุณสมบัติ: การใช้ข้อมูลเมตาจากผู้แนะนำทั้งสองเพื่อขับยังคงเป็นผู้แนะนำที่สาม
+		 \end{itemize}
+	 ในทางปฏิบัติแล้วการเพิ่มองค์ประกอบฐานความรู้ไปยังเทคนิคอื่น ๆ คุณอาจเลือกที่มีกฎฐานความรู้เป็นตัวกรองแรกสำหรับคำแนะนำที่เป็นไปได้หรือเป็นตัวกรองสุดท้าย
+	 Netflix ใช้ผู้แนะนำ CB / CF ไฮบริด มันมีคำแนะนำทั้งสองตามนิสัยของลูกค้าที่คล้ายกัน (Collaborative Filtering) เช่นเดียวกับคำแนะนำจากภาพยนตร์ที่ได้รับการจัดอันดับสูงซึ่งมีลักษณะคล้ายกันโดยแอตทริบิวต์เนื้อหา (การกรองเนื้อหา)
+	 \subsection{Collaborative Filtering Technique}
+	 \indent
+	 Collaborative filtering \cite{RecommendationSystems} คือระบบผู้แนะนำประเภทหนึ่งที่ใช้ข้อมูลการกระทำของเราและเพื่อน เพื่อใช้แนะนำการกระทำที่เราน่าจะทำหรือน่าสนใจ แต่ระบบนี้มีปัญหา Cold Start Problem หรือคือการที่ต้องมีข้อมูลเยอะพอสมควรเพื่อเป็นฐานข้อมูลในการแนะนำ และนอกจากนั้นระบบแบบนี้จะแนะนำการกระทำที่เป็นกระแสในช่วงนั้น โดยไม่แนะนำการกระทำนอกกระแส ก็เป็นข้อเสียเปรียบของระบบผู้แนะนำแบบนี้ก็ว่าได้ ระบบผู้แนะนำนี้ยกตัวอย่าง เช่น Amazon, Facebook, Twitter, LinkedIn, Spotify, Google News และ Last.fm
+	 Collaborative filtering ช่วยค้นหารูปแบบ Patterns หรือกฏ Rules ในการแนะนำสินค้า ซึ่งแบ่งได้ง่ายๆ เป็น 2 แบบ ได้แก่ User-Based Filtering ซึ่งเป็นการแนะนำโดยหาลูกค้าที่พฤติกรรมเหมือนกัน  และ Item-Based Filtering ซึ่งเป็นการแนะนำโดยหาสินค้าที่ถูกซื้อด้วยลูกค้ากลุ่มเดียวกัน สามารถแสดงให้เห็นข้อแตกต่างได้ดังรูปที่ 2.1
+	 \begin{figure}[H]
+	 	\centering
+	 	\includegraphics[width=1\columnwidth]{Figures/2/2.2}
+	 	\caption{Collaborative filtering แบบ User-Based Filtering และ แบบ Item-Based Filtering}{ที่มา : http://www.salemmarafi.com/code/collaborative-filtering-r/}
+	 	\label{Fig:sc1}
+	 \end{figure}
+ 	K-Nearest Neighbour หรือ KNN เป็นเทคนิคที่นิยมมาใช้ใน CB ซึ่งจะช่วยจัดกลุ่มผู้ใช้หรือกลุ่มสินค้าที่ควรแนะนำได้ โดยเทคนิคนี้จะสามารถบอกรายการแนะนำเพื่อตอบคำถามต่อไปนี้
+ 	\begin{itemize}
+ 		\item สินค้าแนะนำ k รายการให้กับสมาชิก u 
+ 		\item สมาชิก  k คน ที่มีรสนิยมใกล้เคียงกันกับ u 
+ 	\end{itemize}
+ 	\subsection{การทดสอบประสิทธิภาพของเทคนิคที่ใช้}
+ 	\indent
+ 	เทคนิคที่ใช้สำหรับระบบผู้แนะนำนั้นโดยพื้นฐานแล้วจะสร้างต้นแบบจากการเรียนรู้ข้อมูลการให้คะแนน rating ของสมาชิกทุกคนในระบบ จากนั้นจะสามารถใช้ต้นแบบเหล่านี้เพื่อประเมินว่าสมาชิก u จะให้ rating สินค้า i เท่าใด  ซึ่งโดยปกติแล้ว rating จะมีค่าระหว่าง 1 ถึง 5 
+ 	\newline
+ 	\indent
+ 	ประสิทธิภาพของต้นแบบจึงสามารถวัดได้จากค่าประเมินว่าแตกต่างจากค่า rating จริงเท่าใด ในเชิงวิจัยการวัดประสิทธิภาพของต้นแบบจากชุดข้อมูล data ทั้งหมด n รายการที่แต่ละรายการประกอบไปด้วย สมาชิก(u), สินค้า(i), rating(r) สามารถวัดได้จากค่าแตกต่างทางสถิติรวมทุกรายการที่เรียกว่า Root-Mean Square Error: RMSE หรือไม่เอาผลต่างไปยกกำลังสองแล้วถอดรากที่สองแต่ใช้ค่าสัมบูรณ์แทนเรียกว่า Mean Absolute Error (MAE)
+ 	\begin{figure}[H]
+ 		\centering
+ 		\includegraphics[width=0.3\columnwidth]{Figures/2/2.0}
+ 	\end{figure}
+ 	เมื่อ:
+ 	\begin{itemize}
+ 		\item rj หมายถึง รายการที่ j ใน data ซึ่งประกอบไปด้วย หมายเลขสมาชิก (u), หมายเลขสินค้า (i), rating (r) 
+ 		\item ej หมายถึง ค่าประเมินที่ต้นแบบคำนวณได้จากการระบุ หมายเลขสมาชิก (u) และหมายเลขสินค้า (i) 
+ 	\end{itemize}
+ \newline
+ \indent
+ ชุดข้อมูล data สำหรับสร้างต้นแบบนั้นจะแบ่งออกเป็น K กลุ่มเท่าๆ กันเพื่อใช้ K-1 กลุ่มในการสร้างต้นแบบ (trainset) และเหลืออีกกลุ่มสำหรับทดสอบความถูกต้อง (testset) โดยทำวนซ้ำสลับแต่ละกลุ่มเป็นกลุ่มทดสอบทั้งหมด K ครั้งเพื่อให้แต่ละกลุ่มได้มีโอกาสใช้เป็นกลุ่มทดสอบ การทดสอบประสิทธิภาพแบบนี้เรียกว่า K-fold cross-validation
+ 
+	 \section{เอกสารและงานวิจัยที่เกี่ยวข้อง}
+		\subsection{เว็บแอปพลิเคชัน Wongnai}
+		\indent
+		Wongnai \cite{Wongnai} เป็นเว็บไซต์และแอปพลิเคชันที่ให้บริการเกี่ยวกับการค้นหาร้านอาหาร สถาน ที่ท่องเที่ยว ร้านเสริมสวย มีฟังก์ชันการทำงานพื้นฐานอันได้แก่ การค้นหา ดูข้อมูล โพสต์รีวิว บันทึกร้านที่ชอบ เป็นต้น
+		\subsection{ข้อแตกต่างระหว่างเว็บแอปพลิเคชัน wongnai กับเว็บของโครงงาน}
+		\indent
+		เว็บแอปพลิเคชันของ Wognai ยังไม่มีฟังก์ชันการแนะนำการแต่งกายให้ผู้ใช้ โดยในเว็บแอปพลิเคชั่นของ Wognai ยังขาดในส่วนของการแนะนำเสื้อผ้า ซึ่งเป็นอีกหนึ่งฟังก์ชันที่หน้าสนใจเพราะในปัจจุบัน คนนิยมเข้าซื้อของออนไล์มากยิ่งขึ้น หากเพิ่มในส่วนของการขายเสื้อผ้าหรือการแนะนำรายการเสื้อผ้าให้แก่ผู้ใช้งานได้อีกจะยิ่งทำให้ระบบมีการให้บริการแก่ลูกค้าที่ครอบคลุมมากยิ่งขึ้น  ผู้พัฒนาจึงได้ทำฟังก์ชันการแนะนำการแต่งกายที่เหมาะสมตามรสนิยมของผู้ใช้เพิ่มลงในเว็บของโครงงาน
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.8\columnwidth]{Figures/2/2.3}
+			\caption{หน้าแรกของเว็บไซต์ Wongnai}{ที่มา : https://www.wongnai.com/}
+			\label{Fig:sc1}
+		\end{figure}
+		
+	
\ No newline at end of file

Documents/Latex/4-implementation.tex

+\chapter{การพัฒนาระบบ}
+ในบทนี้จะกล่าวถึงการสร้างระบบงานของระบบเว็บแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี โดยนำผลที่ได้จากการวิเคราะห์และออกแบบระบบมาสร้างเป็นระบบงานซึ่งจะอธิบายถึงตัวอย่างการเขียนโปรแกรมการทำงานของระบบในส่วนต่างๆ ดังต่อไปนี้
+
+\section{การพัฒนาในส่วนการสมัครสมาชิกหรือเพิ่มข้อมูล}
+	เมื่อผู้ใช้ต้องการทำการสมัครสมาชิก การเพิ่มร้านค้า และการเพิ่มสินค้า โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การสมัครสมาชิก เนื่องจากการทำงานของทั้งการสมัครสมาชิก การเพิ่มร้านค้า และการเพิ่มสินค้ามีการทำงานเหมือนกัน มีรายละเอียดการทำงานดังนี้
+	
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+def registeruser(req):
+	form = MemberForm()
+	if req.method == 'POST':
+		form = MemberForm(req.POST, req.FILES)
+		if form.is_valid():
+			form.instance.password = make_password(req.POST['password'])
+			form.save()
+		else:
+			print("==== form.errors ====")
+			print(form.errors)
+member = form.instance
+dob = f'{member.dob.month:02}/{member.dob.day:02}/{member.dob.year}'
+return render(req, 'lookinggreat/registeruser.html', {
+	'form': form,
+	'dob': dob,
+	'member': form.instance,
+	'shapes': Shape.objects.all(),
+	'skinColors': SkinColor.objects.all(),
+	'genders': Gender.objects.all(),
+})
+			\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้สมัครสมาชิกหรือเพิ่มข้อมูล}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้สมัครสมาชิกหรือเพิ่มข้อมูล}
+	\end{figure}
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้สมัครสมาชิกหรือเพิ่มข้อมูล} โครงสร้างของไฟล์ views.py อธิบายการทำงานได้ดังนี้ สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มสมัครสมาชิกระบบจะเข้ามาทำงานในฟังก์ชัน registeruser
+		\item บรรทัดที่ 2 เป็นการสร้าง form เพื่อเก็บข้อมูลของผู้ใช้งานโดยจะสร้างแยกออกไปยังไฟล์ forms.py
+		\item บรรทัดที่ 3-11 เป็นการตรวจสอบว่าข้อมูลที่กรอกเข้ามาถูกต้องตรงตามที่กำหนดในไฟล์ forms.py ถ้าครบและถูกต้องให้ทำการบันทึกข้อมูลได้ แต่ถ็าไม่ถูกต้องให้แสดง error ในส่วนที่ผิดนั้นออกมา
+		\item บรรทัดที่ 12 เป็นการตั้งค่าการแสดงวัน เดือน ปี
+		\item บรรทัดที่ 13 เป็นการส่งค่าไปแสดงยังหน้า registeruser.html 
+		\item บรรทัดที่ 14-19 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า registeruser.html
+	\end{itemize}
+	
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+class MemberForm(forms.ModelForm):
+	class Meta:
+		model = Member
+		fields = [ 'username', 'password', 'email', 'dob', 'gender', 'shape', 'skincolor', 'cover' ]
+		\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้สมัครสมาชิกหรือเพิ่มข้อมูล (ต่อ)}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้สมัครสมาชิกหรือเพิ่มข้อมูล (ต่อ)}
+	\end{figure}
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้สมัครสมาชิกหรือเพิ่มข้อมูล (ต่อ)} โครงสร้างของไฟล์ forms.py สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1-4 เป็นการสร้าง form ข้อมูลแยกออกมาเพื่อทำการส่งค่าไปยังไฟล์ views.py เพื่อให้ได้ข้อมูลที่ครบและถูกต้องตามที่กำหนด
+	\end{itemize}
+
+\newpage
+\section{การพัฒนาในส่วนการเข้าสู่ระบบ}
+เมื่อผู้ใช้กรอกข้อมูลทั้งหมดเสร็จทำการกดปุ่มเข้าสู่ระบบ ระบบจะมีรายละเอียดการทำงานดังนี้
+	\begin{figure}[H]
+	{\setstretch{1.0}\begin{lstlisting}
+def login(req):
+	if req.method == 'POST':
+		user = authenticate(username=req.POST['username'], password=req.POST['password'])
+		if user is not None:
+			authlogin(req, user)
+			return redirect('/')
+else:
+	print('เขายังไม่ได้กรอก login/password (ครั้งแรกที่เข้าหน้านี้)')
+return render(req, 'lookinggreat/login.html')
+
+		\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้เข้าสู่ระบบ}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้เข้าสู่ระบบ}
+	\end{figure}
+	
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้เข้าสู่ระบบ} โครงสร้างของไฟล์ views.py สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1 เมื่อผู้ใช้กดเข้าสู่ระบบจะเข้ามาทำงานในฟังก์ชัน login()
+		\item บรรทัดที่ 2-3 เป็นการยิงข้อมูล username และ password ที่ผู้ใช้กรอกเข้ามาเพื่อนำไปตรวจสอบกับข้อมูลในฐานข้อมูล
+		\item บรรทัดที่ 4-6 หากผู้ใช้กรอก username หรือ password ไม่ตรงกับข้อมูลในฐานข้อมูลและกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าเข้าสู่ระบบเหมือนเดิม
+		\item บรรทัดที่ 7-9 หากผู้ใช้ยังไม่ได้กรอก username และ password แล้วกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าเข้าสู่ระบบเหมือนเดิม
+	\end{itemize}
+
+\newpage
+\section{การพัฒนาในส่วนการแสดงข้อมูลทั้งหมด}
+เมื่อผู้ใช้กดเลือกรายการเสื้อผ้าทั้งหมด และรายการร้านค้าทั้งหมด โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การแสดงรายการเสื้อผ้าทั้งหมด เนื่องจากการทำงานของทั้งการรายการเสื้อผ้าทั้งหมด และรายการร้านค้าทั้งหมดมีการทำงานเหมือนกัน ระบบจะมีรายละเอียดการทำงานดังนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+def clothe(req):
+	cloths = Cloth.objects.all()
+	if req.method == 'POST':
+		search = req.POST['search']
+		result = []
+		for cloth in cloths:
+			if search in cloth.name:
+				result.append(cloth)
+	return render(req, 'lookinggreat/clothe.html', { 'cloths': result })
+return render(req, 'lookinggreat/clothe.html', {
+	'cloths': cloths,
+	'has_store': has_store(req),
+})
+			\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้กดดูรายการเสื้อผ้าทั้งหมด}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการเสื้อผ้าทั้งหมด}
+	\end{figure}
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการเสื้อผ้าทั้งหมด}  โครงสร้างของไฟล์ views.py  สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มเสื้อผ้าทั้งหมดระบบจะเข้ามาทำงานในฟังก์ชัน clothe()
+		\item บรรทัดที่ 2 เป็นการเรียกดูข้อมูลทั้งหมดที่มีในตารางของเสื้อผ้า
+		\item บรรทัดที่ 3-9 เป็นการค้นหาเสื้อผ้าจากชื่อของเสื้อผ้า
+		\item บรรทัดที่ 10  เป็นการส่งค่าไปแสดงยังหน้า clothe.html
+		\item บรรทัดที่ 11-12 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า clothe.html
+	\end{itemize}
+	
+		\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+def clothe_cat(req, cid=-1):
+	cat = Category.objects.get(pk=cid)
+	cloths = Cloth.objects.all()
+	result = []
+	for cloth in cloths:
+		if cloth.category == cat:
+		result.append(cloth)
+return render(req, 'lookinggreat/clothe.html', {
+	'cloths': result,
+	'has_store': has_store(req),
+})
+				\end{lstlisting}}
+			\caption{การทำงานของระบบเมื่อผู้ใช้กดดูรายการเสื้อผ้าทั้งหมด (ต่อ)}
+			\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการเสื้อผ้าทั้งหมด (ต่อ)}
+	\end{figure}
+		จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการเสื้อผ้าทั้งหมด (ต่อ)} โครงสร้างของไฟล์ views.py สามารถอธิบายการทำงานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มเลือกดูเฉพาะเสื้อระบบจะเข้ามาทำงานในฟังก์ชัน clothe cat() โดยระบบได้แยกประเเภทของเสื้อผ้าทั้งหมดออกเป็น 6 ประเภท ได้แก่ เสื้อ กางเกง กระโปรง เดรส สูท และอื่นๆ
+			\item บรรทัดที่ 2 เป็นการดึงข้อมูลจากตารางของประเภทเสื้อผ้ามาแสดง โดยจะแสดงตามประเภทที่ผู้ใช้ได้เลือก
+			\item บรรทัดที่ 3 เป็นการเรียกดูข้อมูลทั้งหมดที่มีในตารางของเสื้อผ้า
+			\item บรรทัดที่ 4-7 เป็นการแสดงผลหลังจากได้ทำงานกดเลือกประเภทเสื้อผ้านั้น
+			\item บรรทัดที่ 8 เป็นการส่งค่าไปแสดงยังหน้า clothe.html
+			\item บรรทัดที่ 9-10 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า clothe.html
+		\end{itemize}
+
+\newpage		
+\section{การพัฒนาในส่วนการแสดงรายละเอียดของข้อมูล}
+เมื่อผู้ใช้กดปุ่มดูรายละเอียดสินค้า และรายละเอียดร้านค้า โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การดูรายละเอียดสินค้า เนื่องจากการทำงานของทั้งการดูรายละเอียดสินค้า และรายละเอียดร้านค้ามีการทำงานเหมือนกัน ระบบจะมีรายละเอียดการทำงานดังนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+def clothedetail(req, cid=0):
+	clothe = Cloth.objects.get(pk=cid)
+	is_favorite = False
+	member = None
+	try:
+		member = Member.objects.get(username=req.user.username)
+		favoritecloth = FavoriteCloth.objects.filter(member=member, cloth=clothe)
+		if favoritecloth:
+			is_favorite = True
+except: pass
+return render(req, 'lookinggreat/clothedetail.html', {
+	'clothe': clothe,
+	'is_favorite': is_favorite,
+	'has_store': has_store(req),
+	'member': member
+})
+				\end{lstlisting}}
+			\caption{การทำงานของระบบเมื่อผู้ใช้กดดูรายละเอียดสินค้า}
+			\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายละเอียดสินค้า}
+		\end{figure}
+			จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายละเอียดสินค้า} โครงสร้างของไฟล์ views.py  สามารถอธิบายการทำงานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มดูรายละเอียดสินค้าระบบจะเข้ามาทำงานในฟังก์ชัน clothedetail() 
+				\item บรรทัดที่ 2 เป็นการแสดงรายละเอียดของสินค้าตามที่ผู้ใช้ได้ทำการเลือกดู
+				\item บรรทัดที่ 3-4 เป็นการตรวจสอบว่าผู้ใช้ได้เป็นสมาชิกและเข้าสู่ระบบแล้วหรือไม่ ถ้ายังไม่เข้าสู่ระบบ ระบบจะไม่แสดงปุ่มเพิ่มเป็นสินค้าโปรด
+				\item บรรทัดที่ 5-10 เป็นการตรวจสอบว่าผู้ใช้ได้เป็นสมาชิกและเข้าสู่ระบบแล้วหรือไม่ ถ้าเข้าสู่ระบบเรียบร้อยแล้ว ระบบจะแสดงปุ่มเพิ่มเป็นสินค้าโปรดและสามารถกดเพิ่มได้
+				\item บรรทัดที่ 11 เป็นการส่งค่าไปแสดงยังหน้า clothedetail.html
+				\item บรรทัดที่ 12-15 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า clothedetail.html
+			\end{itemize}
+
+\newpage			
+\section{การพัฒนาในส่วนการแก้ไขข้อมูล}
+เมื่อผู้ใช้กดปุ่มแก้ไขสินค้า แก้ไขข้อมูลผู้ใช้งาน และแก้ไขร้านค้า โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การแก้ไขสินค้า  เนื่องจากการทำงานของทั้งการแก้ไขสินค้า แก้ไขข้อมูลผู้ใช้งาน และแก้ไขร้านค้ามีการทำงานเหมือนกัน ระบบจะมีรายละเอียดการทำงานดังนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+def editcloth(req, cid=0):
+	clothe = Cloth.objects.get(pk=cid)
+	sizes = Size.objects.all()
+	colors = Color.objects.all()
+	categorys = Category.objects.all()
+	store = Store.objects.all()
+	if req.method == 'POST':
+		form = ClothForm(req.POST, req.FILES, instance=clothe)
+		if form.is_valid():
+			form.save()
+		else:
+			print("==== form.errors ====")
+			print(form.errors)
+else:
+	form = ClothForm(clothe)
+return render(req, 'lookinggreat/editclothe.html' ,{
+	'form': form,
+	'clothe': clothe,
+	'store': store,
+	'sizes': sizes,
+	'colors': colors,
+	'categorys': categorys,
+	'has_store': has_store(req),
+})
+
+			\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้กดแก้ไขสินค้า}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดแก้ไขสินค้า}
+	\end{figure}
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดแก้ไขสินค้า} โครงสร้างของไฟล์ views.py สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มแก้ไขสินค้าระบบจะเข้ามาทำงานในฟังก์ชัน editcloth()
+		\item บรรทัดที่ 2 เป็นการแสดงรายละเอียดของสินค้าตามที่ผู้ใช้ได้ทำการเลือกแก้ไข
+		\item บรรทัดที่ 3-6 เป็นการเรียกดูข้อมูลจากตารางต่างๆ เพื่อนำมาแสดงในรายละอียดของสินค้าแต่ละชิ้น
+		\item บรรทัดที่ 7-15 เป็นการตรวจสอบว่าข้อมูลที่ได้กรอกไปนั้นถูกต้องและตรงตามที่กำหนดในไฟล์ forms.py หรือไม่ ถ้าครบและถูกต้องให้ทำการบันทึกข้อมูลได้ แต่ถ้าไม่ถูกต้องให้แสดง error ในส่วนที่ผิดนั้นออกมา
+		\item บรรทัดที่ 16 เป็นการส่งค่าไปแสดงยังหน้า editcloth.html
+		\item บรรทัดที่ 17-23 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า editcloth.html
+	\end{itemize}
+
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+class ClothForm(forms.ModelForm):
+	class Meta:
+		model = Cloth
+		fields = [ 'name', 'num', 'price', 'size', 'category', 'namecolor', 'cover' ]
+			\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้กดแก้ไขสินค้า (ต่อ)}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดแก้ไขสินค้า (ต่อ)}
+	\end{figure}
+
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดแก้ไขสินค้า (ต่อ)} โครงสร้างของไฟล์ forms.py สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1-4  เป็นการสร้าง form ข้อมูลแยกออกมาเพื่อทำการส่งค่าไปยังไฟล์ views.py เพื่อให้ได้ข้อมูลที่ครบและถูกต้องตามที่กำหนด
+	\end{itemize}
+
+\newpage
+\section{การพัฒนาในส่วนการลบข้อมูล}
+เมื่อผู้ใช้กดปุ่มลบสินค้า ลบรายการสินค้าโปรด และลบรายการร้านโปรด โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การลบสินค้า เนื่องจากการทำงานของทั้งการลบสินค้า การลบรายการสินค้าโปรด และการลบร้านค้าโปรดมีการทำงานที่เหมือนกัน ระบบจะมีรายละเอียดการทำงานดังนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+def delete_clothe(req, cid=0):
+	cloth = Cloth.objects.get(pk=cid)
+	cloth.delete()
+	return HttpResponseRedirect(req.META.get('HTTP_REFERER'))
+			\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้กดลบสินค้า}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดลบสินค้า}
+	\end{figure}
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดลบสินค้า} โครงสร้างของไฟล์ views.py สามารถอธิบายการทำงานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มลบสินค้าระบบจะเข้ามาทำงานในฟังก์ชัน delete clothe() 
+		\item บรรทัดที่ 2-3 เป็นการลบสินค้าตามที่ผู้ใช้ได้ทำการเลือก
+		\item บรรทัดที่ 4 เป็นการส่งค่าไปยังหน้าหลักที่ใช้งานอยู่คือหน้า manageproduct.html
+	\end{itemize}
+
+\newpage
+\section{การพัฒนาในส่วนการเพิ่มเป็นสินค้าโปรด}
+เมื่อผู้ใช้กดปุ่มเพิ่มเป็นสินค้าโปรด และเพิ่มเป็นร้านโปรด ระบบจะมีการทำงาน แสดงดังรูปที่ 4.10 โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การเพิ่มเป็นสินค้าโปรด เนื่องจากการทำงานของทั้งเพิ่มเป็นสินค้าโปรดและเพิ่มเป็นร้านโปรดมีการทำงานที่เหมือนกัน ระบบจะมีรายละเอียดการทำงานดังนี้
+		\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+def favoriteclothadd(req, cid):
+	c = Cloth.objects.get(pk=cid)
+	fav = FavoriteCloth()
+	fav.member = Member.objects.get(username=req.user.username)
+	fav.cloth = c
+	fav.save()
+	return HttpResponseRedirect(req.META.get('HTTP_REFERER'))
+
+				\end{lstlisting}}
+			\caption{การทำงานของระบบเมื่อผู้ใช้กดเพิ่มเป็นสินค้าโปรด}
+			\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดเพิ่มเป็นสินค้าโปรด}
+		\end{figure}
+		จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดเพิ่มเป็นสินค้าโปรด} โครงสร้างของไฟล์ views.py สามารถอธิบายการทำงานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มเพิ่มเป็นสินค้าโปรดระบบจะเข้ามาทำงานในฟังก์ชัน favoriteclothadd()
+			\item บรรทัดที่ 2 เป็นการรับค่าของสินค้าที่ผู้ใช้เลือกเพื่อทำการเพิ่มเป็นสินค้าโปรด
+			\item บรรทัดที่ 3 เป็นการกำหนดค่าตัวแปลเพื่อนำไปใช้ในการการเก็บค่าของสินค้าโปรด
+			\item บรรทัดที่ 4 เป็นการตรวจสอบว่าผู้ใช้ได้ทำการเน้าสู้ระบบแล้วหรือไม่
+			\item บรรทัดที่ 5-6 เป็นการเก็บค่าของข้อมูลสินค้าโปรดและทำการบันทึกลงในรายการสินค้าโปรด
+			\item บรรทัดที่ 7 เป็นการส่งค่าไปยังหน้าหลักที่ใช้งานอยู่คือหน้า clothedetail.html
+		\end{itemize}
+
+\newpage		
+\section{การพัฒนาในส่วนการดูรายการคนที่ถูกใจสินค้า}
+เมื่อผู้ใช้กดปุ่มดูรายการคนที่ถูกใจสินค้า และถูกใจร้านค้า โดยผู้พัฒนาจะยกตัวอย่างการทำงานแค่การดูรายการคนที่ถูกใจสินค้า เนื่องจากการทำงานของทั้งรายการคนที่ถูกใจสินค้าและรายการคนที่ถูกใจร้านค้ามีการทำงานที่เหมือนกัน ระบบจะมีรายละเอียดการทำงานดังนี้
+		\begin{figure}[H]
+			{\setstretch{1.0}\begin{lstlisting}
+def favoritelistcloth(req, sid=0):
+	member = Member.objects.get(username=req.user.username)
+	store = Store.objects.get(pk=sid)
+	favoritecloths = FavoriteCloth.objects.filter(cloth__store=store)
+	return render(req, 'lookinggreat/favoritelistcloth.html',{
+		'member': member,
+		'store': store,
+		'favoritecloths': favoritecloths,
+		'has_store': has_store(req),
+})
+				\end{lstlisting}}
+			\caption{การทำงานของระบบเมื่อผู้ใช้กดดูรายการคนที่ถูกใจสินค้า}
+			\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการคนที่ถูกใจสินค้า}
+		\end{figure}
+		จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการคนที่ถูกใจสินค้า}  โครงสร้างของไฟล์ views.py สามารถอธิบายการทำงานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มดูรายการคนที่ถูกใจสินค้าระบบจะเข้ามาทำงานในฟังก์ชัน favoritelitecloth()
+			\item บรรทัดที่ 2-4 เมื่อผู้ใช้เข้าสู่ระบบเรียนร้อยแล้ว ระบบจะทำการแสดงชื่อผู้ใช้งาน ร้านค้า และรายการคนที่ถูกใจร้านค้า
+			\item บรรทัดที่ 5 เป็นการส่งค่าไปแสดงยังหน้า favoritelitecloth.html
+			\item บรรทัดที่ 6-9 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า favoritelitecloth.html 
+		\end{itemize}
+	
+\newpage
+\section{การพัฒนาในส่วนแนะนำสินค้า}
+	\subsection{การฝึกต้นแบบของระบบผู้แนะนำ}
+	ลำดับในการฝึกต้นแบบของระบบผู้แนะนำมีดังนี้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.8\columnwidth]{Figures/4/ตารางการจำลองข้อมูลการให้ดาว}
+		\caption{ภาพประกอบตารางการจำลองข้อมูลการให้ดาว ตัวอย่าง 10 แถว จาก 60 แถว}
+		\label{Fig:ตารางการจำลองข้อมูลการให้ดาว}
+	\end{figure}
+		จากภาพที่ \ref{Fig:ตารางการจำลองข้อมูลการให้ดาว} สามารถอธิบายได้ดังนี้
+	\begin{itemize}[label={--}]
+			\item เป็นภาพประกอบตารางการจำลองข้อมูลการให้ดาว ตัวอย่าง 10 แถว จาก 60 แถว ข้อมูลจะเป็น excel ประเภท xlsx โดยข้อมูลในส่วนนี้จะนำไปใช้ในการสร้าง model เพื่อนำไปใช้ในการวิเคราะห์ผลในการแนะนำรายการเสื้อผ้า
+	\end{itemize}
+
+\newpage
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.8\columnwidth]{Figures/4/แปลงข้อมูล favoritecloth}
+		\caption{ภาพประกอบไฟล์จากการ download แปลงข้อมูล favoritecloth จาก xlsx เป็น csv}
+		\label{Fig:แปลงข้อมูล favoritecloth}
+	\end{figure}
+	จากภาพที่ \ref{Fig:แปลงข้อมูล favoritecloth} สามารถอธิบายได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item เป็นตารางที่ได้จากการ download แปลงข้อมูล favoritecloth จาก xlsx เป็น csv เพื่อนำไปใช้ในการจำลองข้อมูลเพื่อสร้าง model
+	\end{itemize}
+
+\begin{figure}[H]
+	\centering
+	\includegraphics[width=0.5\columnwidth]{Figures/4/คำสั่งแปลง 11-column csv}
+	\caption{คำสั่งแปลง 11-column csv เป็น 3-column csv ที่สามารถอ่านด้วย pandas ได้}
+	\label{Fig:คำสั่งแปลง 11-column csv}
+\end{figure}
+จากภาพที่ \ref{Fig:คำสั่งแปลง 11-column csv} สามารถอธิบายได้ดังนี้
+\begin{itemize}[label={--}]
+	\item เป็นการเขียนคำสั่งแปลงข้อมูลจากที่เป็น 11 column จากไฟล์ csv ที่ download มาให้เป็น 3 column csv เพื่อที่จะสามารถอ่านด้วย pandas ได้
+\end{itemize}	
+
+\newpage
+\begin{figure}[H]
+	\centering
+	\includegraphics[width=0.9\columnwidth]{Figures/4/คำสั่งอ่าน 3-column csv}
+	\caption{คำสั่งอ่าน 3-column csv เป็น dataframe -> dataset transcoder}
+	\label{Fig:คำสั่งอ่าน 3-column csv}
+\end{figure}
+จากภาพที่ \ref{Fig:คำสั่งอ่าน 3-column csv} สามารถอธิบายได้ดังนี้
+\begin{itemize}[label={--}]
+	\item เป็นคำสั่งอ่าน 3 column csv เป็น dataframe และไปเป็น dataset transcoder
+\end{itemize}
+
+\begin{figure}[H]
+	\centering
+	\includegraphics[width=0.5\columnwidth]{Figures/4/Algorithm name}
+	\caption{Algorithm name ที่ใช้ในการประมวณผลของระบบ ได้แก่ KNNBaseline(), KNNBasic(), KNNWithMeans()}
+	\label{Fig:Algorithm name}
+\end{figure}
+จากภาพที่ \ref{Fig:Algorithm name} สามารถอธิบายได้ดังนี้
+\begin{itemize}[label={--}]
+	\item เป็นตารางที่ได้จากการรันอัลกอริทึม ค่าที่ได้จะประกอบไปด้วย Root Mean Squared Error (RMSE) หรือ Root Mean Squared Deviation (RMSD), Mean Abolute Error (MAE) หรือ L1 Loss คือ การคำนวน Error, fit_time เวลาที่ใช้ในการรัน และ test_time เวลาที่ใช้ในการทดสอบระบบ
+\end{itemize}		
+
+\begin{figure}[H]
+	\centering
+	\includegraphics[width=0.8\columnwidth]{Figures/4/การวิเคราะห์ข้อมูล}
+	\caption{การวิเคราะห์ข้อมูลเพื่อนำไปใช้ในฟังก์ชันการแนะเสื้อผ้า}
+	\label{Fig:การวิเคราะห์ข้อมูล}
+\end{figure}
+จากภาพที่ \ref{Fig:การวิเคราะห์ข้อมูล} สามารถอธิบายได้ดังนี้
+\begin{itemize}[label={--}]
+	\item บรรทัดที่ In [30] เป็นคำสั่งในการนำเข้าฟังก์ชัน surprise
+	\item บรรทัดที่ In [31] เป็นคำสั่งในการหาค่าการแนะนำสินค่าตาม item base คือการแนะนำตามสินค้า
+	\item บรรทัดที่ In [32] - Out [32] เป็นคำสั่งในการเทรนข้อมูลเสื้อผ้าที่มีในระบบทั้งหมด 60 ชิ้น
+	\item บรรทัดที่ In [33] เป็นคำสั่งในการ set data
+	\item บรรทัดที่ In [34] - Out [34] เป็นการรันข้อมูลที่ได้จากการ train
+	\item บรรทัดที่ In [35] - In[37] เป็นการหาค่าความเป็นไปได้ โดยทดสอบจากข้อมูลที่ได้จากการ train
+	\item บรรทัดที่ Out[37] เป็นค่าที่ได้จากการหาความถูกต้องจาก 100%
+\end{itemize}
+	
+	
+\newpage	
+\subsection{การนำต้นแบบมาแนะนำเสื้อผ้า}
+	เมื่อผู้ใช้กดปุ่มแนะนำเสื้อผ้า ระบบจะมีรายละเอียดการทำงานดังนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+def recommend(req):
+	if req.user.is_anonymous:
+		return redirect('/registeruser')
+	else:
+		member = Member.objects.get(username=req.user.username)
+		knn = joblib.load('static/knn.model')
+	favc = None
+	try:
+		favc = FavoriteCloth.objects.filter(member=member).first()
+	except: pass
+	if favc:
+		user_cloth = knn.get_neighbors(favc.cloth.cid-1, 9)
+		recommend_items = []
+		for u in user_cloth:
+			item = Cloth.objects.get(pk=u+1)
+			recommend_items.append( item )
+	else:
+		from django.db.models import Sum
+		fc = FavoriteCloth.objects.values('cloth').annotate(star=Sum('star')).order_by('-star')
+		recommend_items = []
+		for u in fc[:9]:
+			item = Cloth.objects.get(pk=u['cloth'])
+			recommend_items.append( item )
+return render(req, 'lookinggreat/recommend.html',{
+	'member': member,
+	'has_store': has_store(req),
+	'recommends': recommend_items
+})
+			\end{lstlisting}}
+		\caption{การทำงานของระบบเมื่อผู้ใช้กดดูรายการแนะนำเสื้อผ้า}
+		\label{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการแนะนำเสื้อผ้า}
+	\end{figure}
+	จากภาพที่ \ref{Fig:การทำงานของระบบเมื่อผู้ใช้กดดูรายการแนะนำเสื้อผ้า} โครงสร้างของไฟล์ views.py สามารถอธิบายได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item บรรทัดที่ 1 เมื่อผู้ใช้กดปุ่มดูรายการแนะนำเสื้อผ้าระบบจะเข้ามาทำงานในฟังก์ชัน recommend()
+		\item บรรทัดที่ 2-3 หากผู้ใช้ยังไม่ทำการสมัครสมาชิก ระบบจะส่งข้อมูลไปยังหน้าสมัครสมาชิก
+		\item บรรทัดที่ 4-5 หากผู้ใช้ได้ทำการสมัครสมาชิกและเข้าสู่ระบบเรียบร้อยแล้ว จะแสดงหน้าแนะนำเสื้อผ้า
+		\item บรรทัดที่ 6 เป็นการโหลด model ที่ได้จากการ train เสร็จเรียบร้อยแล้ว
+		\item บรรทัดที่ 7-10 เป็นการรับค่าข้อมูลสินค้าโปรดของผู้ใช้งาน และสินค้าที่จะทำการแนะนำ   
+		\item บรรทัดที่ 11-16 เป็นการแสดงรายการแนะนำเสื้อผ้าตามสินค้าที่ผู้ใช้ชื่นชอบ โดยเก็บค่าเป็นแบบ array โดยที่ถ้าเป็นสมาชิกและมีประวัติการกดบันทึกสินค้าที่ถูกใจ ระบบจะแนะนำสินค้าตาม item
+		\item บรรทัดที่ 17-23 เป็นการแสดงรายการแนะนำเสื้อผ้าให้แก่ผู้ใช้ที่สมัครสมาชิกเป็นผู้ใช้งานใหม่ และเข้าสู่ระบบเรียบร้อยแล้ว ระบบจะแนะนำสินค้าตาม item โดยจะแสดงรายการสินค้าที่มีผู้ชื่นชอบมากที่สุดให้แก่ผู้ใช้งานรายใหม่ได้ทราบ โดยเก็บค่าเป็นแบบ array
+		\item บรรทัดที่ 24 เป็นการส่งค่าที่ได้ทั้งหมดไปแสดงยังหน้า recommend.html
+		\item บรรทัดที่ 25-27 เป็นการกำหนดค่าตัวแปรที่จะให้แสดงในหน้า recommend.html
+	\end{itemize}

Documents/Latex/5-testing.tex

+\chapter{การทดสอบระบบ}
+หลังจากที่ได้ผ่านขั้นตอนสำหรับการพัฒนาระบบทั้งหมดแล้ว ขั้นตอนต่อไปคือการทดสอบระบบเพื่อตรวจสอบการทำงานของแต่ละฟังก์ชันกันรวมถึงตรวจสอบความถูกต้องของการทำงาน ทั้งระบบเพื่อให้การพัฒนาโปรแกรมเป็นไปอย่างมีประสิทธิภาพ ทดสอบระบบเพื่อหาข้อผิดพลาด และแก้ไขข้อบกพร่องนั้นก่อนการใช้งานจริง โดยในการทดสอบระบบจะแบ่งเป็น 2 ส่วน ได้แก่ การทดสอบในส่วนฟังก์ชันของระบบ และการทดสอบประสิทธิภาพของโมเดล
+
+	\section{การทดสอบในส่วนฟังก์ชันก์ของระบบ}
+	\subsection{ผลการทดสอบการสมัครสมาชิกผู้ใช้งาน}
+					\begin{table}[H]
+						\caption{ผลการทดสอบการสมัครสมาชิกผู้ใช้งาน}
+						\centering	
+						\label{tab:ผลการทดเมนูหลัก}
+						\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+							\hline
+							% {\setstretch{1.0} } 
+							{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+							{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+							\setstretch{1.0}{ทดสอบการสมัครสมาชิกผู้ใช้งาน} 
+							& \setstretch{1.0}{ผู้ใช้กดปุ่มสมัครสมาชิก}
+							& \setstretch{1.0}{ระบบแสดงหน้าสมัครสมาชิก ซึ่งข้อมูลที่แสดงในหน้านั้นจะประกอบไปด้วย ชื่อผู้ใช้ รหัสผ่าน อีเมล์ วัน/เดือน/ปีเกิด รูปร่าง สีผิว ปุ่มเลือกรูปโปรไฟล์ และปุ่มสมัครสมาชิกผู้ใช้งาน} \\ \cline{2-3}
+							& \setstretch{1.0}{ผู้ใช้กดปุ่มสมัครสมาชิกโดยกรอกข้อมูลไม่ครบทุกช่องตามที่กำหนดและกดปุ่มสมัครสมาชิก}
+							& \setstretch{1.0}{ระบบแสดง error ในช่องที่ผู้ใช้ยังไม่ได้ทำการกรอก} \\ \cline{2-3}
+							& \setstretch{1.0}{ผู้ใช้กรอกข้อมูลครบทุกช่องและกดปุ่มสมัครสมาชิก} 
+							& \setstretch{1.0}{ระบบแสดงหน้าสมัครสมาชิกเหมือนโดยไม่มี error} \\ \hline							
+						\end{tabular}
+					\end{table}
+				
+					\newpage
+		\subsection{ผลการทดสอบการเข้าสู่ระบบผู้ใช้งาน}
+			\begin{table}[H]
+				\caption{ผลการทดสอบการเข้าสู่ระบบผู้ใช้งาน}
+				\centering	
+				\label{tab:ผลการทดเมนูหลัก}
+				\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+					\hline
+					% {\setstretch{1.0} } 
+					{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+					{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+					\setstretch{1.0}{ทดสอบการเข้าสู่ระบบผู้ใช้งาน} 
+					& \setstretch{1.0}{ผู้ใช้เข้ามาในหน้าเข้าสู่ระบบ}
+					& \setstretch{1.0}{ระบบแสดงหน้าเข้าสู่ระบบ} \\ \cline{2-3}
+					& \setstretch{1.0}{ผู้ใช้กดปุ่มเข้าสู่ระบบโดยไม่กรอกชื่อผู้ใช้และรหัสผ่าน}
+					& \setstretch{1.0}{ระบบแสดงหน้าเข้าสู่ระบบเหมือนเดิม} \\ \cline{2-3}
+					& \setstretch{1.0}{ผู้ใช้กดปุ่มเข้าสู่ระบบโดยไม่กรอกชื่อผู้ใช้และรหัสผ่านไม่ถูกต้อง}
+					& \setstretch{1.0}{ระบบแสดงหน้าเข้าสู่ระบบเหมือนเดิมโดยไม่มี error} \\ \cline{2-3}
+					& \setstretch{1.0}{ผู้ใช้กดปุ่มเข้าสูระบบโดยไม่กรอกชื่อผู้ใช้และรหัสผ่านถูกต้อง} 
+					& \setstretch{1.0}{ระบบแสดงหน้าเข้าใช้งานระบบได้พร้อมบอกชื่อผู้ใช้ที่เข้าสู่ระบบนั้น} \\ \hline					
+				\end{tabular}
+			\end{table}
+
+\subsection{ผลการทดสอบหน้าเสื้อผ้าทั้งหมด}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าเสื้อผ้าทั้งหมด}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้าเสื้อผ้าทั้งหมด} 
+		& \setstretch{1.0}{ผู้ใช้กดเมนูเสื้อผ้าทั้งหมด}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการเสื้อผ้าทั้งหมด ซึ่งแบ่งหมวดหมู่ออกเป็นทั้งหมด 6 ประเภท ได้แก่ เสื้อ กางเกง กระโปรง เดรส สูท และอื่นๆ} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดเลือก 1 ประเภท}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการเสื้อผ้าตามประเภทที่เลือก} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดดูรายละเอียดสินค้า} 
+		& \setstretch{1.0}{ระบบแสดงหน้ารายละเอียดสินค้า} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้ารายละเอียดสินค้า}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้ารายละเอียดสินค้า}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบรายละเอียดสินค้า} 
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มดูรายละเอียดสินค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายละเอียดสินค้า} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มเพิ่มเป็นสินค้าโปรด พร้อมเลือกระดับความชอบสินค้านั้น}
+		& \setstretch{1.0}{ระบบจะทำการเพิ่มสินค้าชิ้นนั้นเข้าไปในรายการสินค้าโปรด พร้อมบันทึกระดับความชอบสินค้านั้นและสถานะสินค้าก็จะเปลี่ยนเป็นเพิ่มเป็นสินค้าโปรดแล้ว ในกรณีที่ผู้ใช้งานยังไม่สมัครสมาชิกและเข้าสู่ระบบ ระบบจะไม่แสดงปุ่มเพิ่มเป็นสินค้าโปรด} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้าร้านค้าทั้งหมด}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าร้านค้าทั้งหมด}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้าร้านค้าทั้งหมด} 
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มเมนูร้านค้าทั้งหมด}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการร้านค้าทั้งหมด} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มรายละเอียดร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายละเอียดข้อมูลร้านค้านั้น พร้อมแสดงรายการสินค้าที่มีในร้าน} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้ารายละเอียดร้านค้า}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้ารายละเอียดร้านค้า}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้ารายละเอียดร้านค้า} 
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มดูรายละเอียดร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายละเอียดข้อมูลร้านค้านั้น พร้อมแสดงรายการสินค้าที่มีในร้าน} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มเพิ่มเป็นร้านโปรด}
+		& \setstretch{1.0}{ระบบจะทำการเพิ่มร้านค้านั้นเข้าไปในรายการร้านโปรดและสถานะร้านค้าก็จะเปลี่ยนเป็น เพิ่มเป็นร้านโปรดแล้ว ในกรณีที่ผู้ใช้งานยังไม่สมัครสมาชิกและเข้าสู่ระบบ ระบบจะไม่แสดงปุ่มเพิ่มเป็นร้านโปรด} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้าข้อมูลผู้ใช้งาน}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าข้อมูลผู้ใช้งาน}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้าข้อมูลผู้ใช้งาน} 
+		& \setstretch{1.0}{ผู้ใช้กดที่ชื่อผู้ใช้และกดเลือกข้อมูลผู้ใช้งาน}
+		& \setstretch{1.0}{ระบบแสดงหน้าข้อมูลผู้ใช้งาน} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มแก้ไขข้อมูล}
+		& \setstretch{1.0}{ระบบแสดงหน้าแก้ไขข้อมูลผู้ใช้งาน ซึ่งข้อมูลที่แสดงในหน้านั้นจะประกอบไปด้วย ชื่อผู้ใช้ รหัสผ่าน อีเมล์ วัน/เดือน/ปีเกิด รูปร่าง สีผิว ปุ่มเลือกรูปโปรไฟล์ และปุ่มบันทึกการแก้ไขข้อมูล} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มรายการสินค้าโปรด}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการสินค้าโปรด แสดงรายการเสื้อผ้าที่ผู้ใช้ได้กดเพิ่มเป็นสินค้าโปรด และสามารถกดลบรายการสินค้าโปรดได้} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้กดปุ่มรายการร้านโปรด} 
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการร้านโปรด แสดงรายการร้านค้าที่ผู้ใช้ได้กดเพิ่มเป็นร้านโปรด และสามารถกดลบรายการร้านโปรดได้} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้าสมัครสมาชิกร้านค้า}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าสมัครสมาชิกร้านค้า}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้าสมัครสมาชิกร้านค้า} 
+		& \setstretch{1.0}{ร้านค้ากดที่ชื่อผู้ใช้และกดเพิ่มร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าสมัครสมาชิกร้านค้า ซึ่งจะต้องทำการกรอกข้อมูลร้านดังนี้ ชื่อร้านค้า อีเมล์ ที่อยู่ร้านค้า เบอร์โทรติดต่อ Facebook ปุ่มเลือกรูปร้านค้า และปุ่มสมัครสมาชิกร้านค้า} \\ \cline{2-3}
+		&\setstretch{1.0}{ร้านค้ากดปุ่มสมัครสมาชิกโดยกรอกข้อมูลไม่ครบทุกช่องตามที่กำหนดและกดปุ่มสมัครสมาชิก}
+		& \setstretch{1.0}{ระบบแสดง error ในช่องที่ผู้ใช้ยังไม่ได้ทำการกรอก} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้าข้อมูลร้านค้า}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าข้อมูลร้านค้า}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้าข้อมูลร้านค้า} 
+		& \setstretch{1.0}{ร้านค้ากดที่ชื่อผู้ใช้และกดเลือกข้อมูลร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าข้อมูลร้านค้า} \\ \cline{2-3}
+ 		& \setstretch{1.0}{ร้านค้ากดแก้ไขข้อมูลร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าแก้ไขข้อมูลร้านค้า ซึ่งข้อมูลที่แสดงในหน้านี้จะประกอบไปด้วย ชื่อผู้ใช้ รหัสผ่าน ชื่อร้านค้า อีเมล์ ที่อยู่ร้านค้า เบอร์โทรติดต่อ Facebook ปุ่มเลือกรูปร้านค้า และปุ่มแก้ไขข้อมูลร้านค้า} \\ \cline{2-3}
+		& \setstretch{1.0}{ร้านค้ากดที่ชื่อผู้ใช้และกดเลือกข้อมูลร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าจัดการข้อมูลสินค้า ซึ่งข้อมูลที่แสดงในหน้านี้จะประกอบไปด้วย รายการสินค้าทั้งหมดที่มีในร้านที่สามารถทำการแก้ไขสินค้าและลบสินค้าได้} \\ \cline{2-3}
+		& \setstretch{1.0}{ร้านค้ากดปุ่มเพิ่มสินค้าในหน้าจัดการข้อมูลสินค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าเพิ่มสินค้า  ซึ่งข้อมูลที่แสดงในหน้านี้จะประกอบไปด้วย ชื่อร้านค้า ชื่อสินค้า ประเภทสินค้า จำนวนสินค้า ขนาดสินค้า สีสินค้า ราคา ปุ่มเลือกรูปสินค้า และปุ่มบันทึก} \\ \cline{2-3}
+		& \setstretch{1.0}{ร้านค้ากดปุ่มดูรายการคนที่ถูกใจสินค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการคนที่ถูกใจเสื้อผ้า} \\ \cline{2-3}
+		&\setstretch{1.0}{ร้านค้ากดปุ่มดูรายการคนที่ถูกใจร้านค้า}
+		& \setstretch{1.0}{ระบบแสดงหน้ารายการคนที่ถูกใจร้านค้า} \\ \hline
+	\end{tabular}
+\end{table}
+
+\subsection{ผลการทดสอบหน้าแนะนำเสื้อผ้า}
+\begin{table}[H]
+	\caption{ผลการทดสอบหน้าแนะนำเสื้อผ้า}
+	\centering	
+	\label{tab:ผลการทดเมนูหลัก}
+	\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering การทดสอบ}}  & 
+		{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
+		\setstretch{1.0}{ทดสอบหน้าแนะนำเสื้อผ้า} 
+		& \setstretch{1.0}{ผู้ใช้ยังไม่ทำการสมัครสมาชิกแล้วกดปุ่มแนะนำเสื้อผ้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าสมัครสมาชิกผู้ใช้งาน} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้ทำการสมัครสมาชิกแล้ว แต่ยังไม่เข้าสู่ระบบแล้วกดปุ่มแนะเสื้อผ้า}
+		& \setstretch{1.0}{ระบบแสดงหน้าสมัครสมาชิกผู้ใช้งาน} \\ \cline{2-3}
+		& \setstretch{1.0}{ผู้ใช้เข้าสู่ระบบเรียบร้อยแล้วกดปุ่มแนะนำเสื้อผ้า ในกรณียังไม่เพิ่มรายการเสื้อผ้าที่ถูกใจ}
+		& \setstretch{1.0}{ระบบแสดงหน้าแนะนำเสื้อผ้า โดยในกรณีนี้จะแสดงรายการเสื้อผ้าที่มีคนใช้คะแนนมากที่สุดมาแนะนำ 9 ชิ้น} \\ \cline{2-3}
+		&\setstretch{1.0}{ผู้ใช้เข้าสู่ระบบเรียบร้อยแล้วกดปุ่มแนะนำเสื้อผ้า ในกรณีมีรายการเสื้อผ้าที่ถูกใจแล้ว}
+		& \setstretch{1.0}{ระบบแสดงหน้าแนะนำเสื้อผ้า โดยในกรณีนี้จะแสดงรายการเสื้อผ้าตามสิ้นค้าที่ผู้ใช้ถูกใจมาแนะนำ 9 ชิ้น} \\ \hline
+	\end{tabular}
+\end{table}
+
+
+\newpage
+\section{การทดสอบประสิทธิภาพของโมเดล}
+\subsection{ผลการทดสอบประสิทธิภาพโดยใช้ RMSE และ MAE}
+	ผลการทดสอบประสิทธิภาพของชุดข้อมูล FavoriteCloth จำนวน 300 รายการ เมื่อทดสอบด้วย เทคนิค KNNBaseline, KNNBasic, และ KNNWithMeans แล้ว ผลลัพธ์ของการประเมินประสิทธิภาพด้วยวิธี K-fold crossvalidtion โดยแบ่งเป็น 10 กลุ่มทดสอบ แล้วแสดงค่าเฉลี่ย จะได้ผลลัพธ์ดังตารางต่อไปนี้
+	\begin{table}[H]
+		\caption{ผลลัพธ์ของการประเมินประสิทธิภาพด้วยวิธี K-fold crossvalidtion}
+		\centering	
+		\label{tab:ผลลัพธ์ของการประเมินประสิทธิภาพด้วยวิธี K-fold crossvalidtion}
+		\begin{tabular}{ | p{3cm} | p{2cm} | p{2cm} | p{2cm} | p{2cm} | }
+			\hline
+			% {\setstretch{1.0} } 
+			{\multicolumn{1}{c}{\centering เทคนิค}}  & 
+			{\multicolumn{1}{c}{\centering RMSE}} &
+			{\multicolumn{1}{c}{\centering MAE}}  & 
+			{\multicolumn{1}{c}{\centering เวลาฝึก}} & {\multicolumn{1}{c}{\centering เวลาทดสอบ}} \\ \hline
+			\setstretch{1.0}{KNNBaseline} 
+			& \setstretch{1.0}{0.913945}
+			& \setstretch{1.0}{0.719058}
+			& \setstretch{1.0}{0.001919}
+			& \setstretch{1.0}{0.000853}\\ \hline
+			\setstretch{1.0}{KNNBasic} 
+			& \setstretch{1.0}{0.978462}
+			& \setstretch{1.0}{0.738293}
+			& \setstretch{1.0}{0.001180}
+			& \setstretch{1.0}{0.000504}\\ \hline
+			\setstretch{1.0}{KNNWithMeans} 
+			& \setstretch{1.0}{1.014723}
+			& \setstretch{1.0}{0.809938}
+			& \setstretch{1.0}{0.002225}
+			& \setstretch{1.0}{0.000641} \\ \hline
+		\end{tabular}
+	\end{table}
+\newpage	
+\subsection{ผลการทดสอบความถูกต้องของโมเดลโดยวัดจากประเมินของ Rating}
+การวัดประสิทธิภาพนี้จะใช้ data ทั้งหมด 300 รายการเพื่อสร้างต้นแบบ  จากนั้นนับจำนวนค่าประเมินที่ยอมรับได้ เมื่อเปรียบเทียบกับ rating จริง โดยกำหนดช่วงค่าที่ยอมรับได้ h เรียกว่าค่า threshold เช่นถ้า h = 0.5 เมื่อ rating จริงในรายการ j มีค่า 4 ดาว แสดงว่าช่วงค่าประเมินที่ยอมรับได้นั้นจะอยู่ในช่วง 3 ดาวครึ่ง ถึง สี่ดาวครึ่ง จากนั้นค่าร้อยละความถูกต้อง จะได้ผลลัพธ์ดังตารางต่อไปนี้
+\begin{table}[H]
+	\caption{ผลลัพธ์การทดสอบประสิทธิภาพของ 3 เทคนิคด้วยช่วงค่าและแปลงเป็นร้อยละ}
+	\centering	
+	\label{tab:ผลลัพธ์การทดสอบประสิทธิภาพของ 3 เทคนิคด้วยช่วงค่าและแปลงเป็นร้อยละ}
+	\begin{tabular}{ | p{3cm} | p{2cm} | p{2cm} | p{2cm} | p{2cm} | }
+		\hline
+		% {\setstretch{1.0} } 
+		{\multicolumn{1}{c}{\centering เทคนิค}}  & 
+		{\multicolumn{1}{c}{\centering h=0.3}} &
+		{\multicolumn{1}{c}{\centering h=0.4}}  & 
+		{\multicolumn{1}{c}{\centering h=0.5}} & {\multicolumn{1}{c}{\centering h=0.6}} \\ \hline
+		\setstretch{1.0}{KNNBaseline} 
+		& \setstretch{1.0}{47.67} 
+		& \setstretch{1.0}{63.67}
+		& \setstretch{1.0}{75.33}
+		& \setstretch{1.0}{86.00}\\ \hline
+		\setstretch{1.0}{KNNBasic} 
+		& \setstretch{1.0}{49.00}
+		& \setstretch{1.0}{56.00}
+		& \setstretch{1.0}{73.67}
+		& \setstretch{1.0}{84.33}\\ \hline
+		\setstretch{1.0}{KNNWithMeans} 
+		& \setstretch{1.0}{46.67}
+		& \setstretch{1.0}{59.67}
+		& \setstretch{1.0}{68.0}
+		& \setstretch{1.0}{79.67} \\ \hline
+	\end{tabular}
+\end{table}
+\indent
+สรุปผลลัพธ์ที่ได้จากการทดสอบประสิทธิภาพของ 3 เทคนิคด้วยช่วงค่าและแปลงเป็นร้อยละ เป็น h= 0.3 0.4 0.5 และ 0.6 ผลที่ได้คือ  KNN ที่ดีที่สุดที่ควรเลือกใช้คือ คือ KNNBaseline ค่า h= 0.4 0.5 และ 0.6 และ ผลลัพธ์การทดสอบประสิทธิภาพตามลำดับคือ 63.67 75.33 และ 86.00 เพราะค่าที่ได้มีเป็นค่าที่ยอมรับได้มากที่สุดเมื่อแปลงเป็นร้อยละแล้ว

Documents/Latex/6-conclusion.tex

+\chapter{สรุปและข้อเสนอแนะ}
+\indent
+การดำเนินโครงงานเพื่อพัฒนาระบบเว็บแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรีนี้ พบว่าระบบสามารถทำงานได้ตามที่วิเคราะห์และออกแบบไว้ แต่ก็พบปัญหาและอุปสรรคระหว่างการพัฒนา ในบทนี้ผูพัฒนาจึงขอสรุปความสามารถของระบบชี้แจงปัญหาและอุปสรรค พร้อมเสนอ แนวทางในการพัฒนระบบเว็บแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรีต่อตามลำดับ
+
+\section{สรุปความสามารถของระบบ}
+	โดยแบ่งความสามารถของระบบตามประเภทของผู้ใช้งานดังนี้ 
+		\begin{enumerate}[label=\arabic*.]
+			\item ผู้ใช้งาน
+			\begin{itemize}
+				\item สามารถสมัครสมาชิกได้
+				\item สามารถเข้าสู่เข้าสู่ระบบได้
+				\item สามารถแก้ไขข้อมูลผู้ใช้งานได้
+				\item สามารถดูรายการเสื้อผ้าจากร้านค้าได้
+				\item สามารถดูรายการร้านค้าได้
+				\item สามารถดูรายการแนะนำเสื้อผ้าได้
+				\item สามารถบันทึกรายการเสื้อผ้าที่ถูกใจได้
+				\item สามารถบันทึกรายการร้านค้าที่ถูกใจได้
+				\item สามารถดูบันทึกรายการเสื้อผ้าที่ถูกใจได้
+				\item สามารถดูบันทึกรายการร้านค้าที่ถูกใจได้
+				\item สามารถดูค้นหาเสื้อผ้าได้
+			\end{itemize}
+			\item ร้านค้า
+			\begin{itemize}
+				\item สามารถสมัครสมาชิกได้
+				\item สามารถเข้าสู่ระบบได้
+				\item สามารถแก้ไขข้อมูลร้านค้าได้
+				\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลเสื้อผ้าในร้านค้าได้
+				\item สามารถดูรายการคนที่ถูกใจเสื้อผ้าได้
+				\item สามารถดูรายการคนที่ถูกใจร้านค้าได้
+			\end{itemize}
+			\item ผู้ดูแลระบบ
+			\begin{itemize}
+				\item สามารถเข้าสู่ระบบได้
+				\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลร้านค้าได้
+				\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลผู้ใช้งานได้
+			\end{itemize}
+		\end{enumerate}
+	
+\section{ปัญหาและอุปสรรคในการพัฒนา}
+  \begin{enumerate}[label=\arabic*.]
+   \item ข้อมูลในการทดสอบมีจำนวนน้อย ทำให้ความถูกต้องของการทำนายมีความแม่นยำน้อย แนวทางการแก้ไข : เพิ่มชุดข้อมูลที่มีความสัมพันธ์กันเพื่อให้ผลการทำนายมีความแม่นยำมากยิ่งขึ้น  
+    \item ผู้พัฒนาได้เขียน server สำหรับทำการ train ข้อมูล และเป็นที่สำหรับเก็บข้อมูลแม่แบบ (model) ที่ได้จากการเทรนข้อมูลออกมาเป็นไฟล์นามสกุล yaml  ให้ฝั่ง client เรียกใช้งานต่อได้ แต่ปัญหาที่พบคือต้องเขียนข้อมูลขึ้นมาเอง
+    แนวทางการแก้ไข : เขียนไฟล์ข้อมูลใน excel แล้วโหลดเป็น .csv ไปใช้ server ขึ้นมาเพื่อให้ทำการ train ข้อมูลและทำนาย (predict) ข้อมูลให้เสร็จสิ้นทางฝั่ง server แล้วฝั่ง client มีหน้าที่ในการรอรับข้อมูลอย่างเดียว
+  \end{enumerate}
+
+\section{แนวทางการพัฒนาต่อ}
+\begin{enumerate}[label=\arabic*.]
+	\item เพิ่มในส่วนของการเทรนข้อมูลในรายการแนะนำเสื้อผ้า ให้ผู้ดูแลระบบสามารถกดเทรนได้อัตโนมัติ
+ 	\item เพิ่มส่วนติดต่อกับสังคมออนไลน์ ได้แก่ Facebook Twitter และ Instagram
+ 	\item เพิ่มในส่วนของฟังก์ชันของผู้ใช้งานให้มีการสามารถซื้อขายสินค้าได้
+  \item เพิ่มในส่วนของฟังก์ชันของผู้ใช้งานให้มีการสามารถรีวิวสินค้าได้
+\end{enumerate}
+
+
+
+

Documents/Latex/CS59110440204.tex

+% Default language option is [thaithesis]. The other possible option is [engthesis].
+% Default format option is [ugrad]. Other possible options are [master,doctor].
+\documentclass[a4paper]{ubu}
+
+% List all required packages here
+% ทุก package รวมไว้ที่เดียว 
+\usepackage{coding}
+%%------------------------------------------------------------
+%%-               SETTING THESIS PARAMETERS                  -
+%%------------------------------------------------------------
+
+%%-----------------   ชื่อโครงงาน                 -----------%%
+%% หัวข้อโครงงาน {ไทย} {English}
+\thesistitle                 
+{ระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี} 
+{Looking Great} 
+
+%%-----------------   ผู้พัฒนาโครงงาน              -----------%%
+%% คำนำหน้า {ไทย} {English}
+\authortitle                            
+{นางสาว}                           
+{Miss.}                             
+%% ชื่อสกุล {ไทย} {English}
+\thesisauthor                           
+{นฤมล โมคภา}                         
+{Narumon Mokpha}            
+
+%%----------------   ผู้ร่วมพัฒนาโครงงาน (ถ้ามี)      -----------%%
+%% คำนำหน้า {ไทย} {English}
+%\coauthortitle                            
+%{นาย(นางสาว)}                                   
+%{Mr.(Miss)}                                  
+%% ชื่อสกุล {ไทย} {English}
+%\thesiscoauthor                           
+%{ชื่อร่วม สกุล}                          
+%{Firstconame Lastname}                  
+
+%%----------------   อาจารย์ที่ปรึกษาโครงงาน        ----------%%
+\advisor   
+{อาจารย์ ดร.วิชิต สมบัติ}               
+{ดร. วิชิต สมบัติ}                          
+{Wichit Sombat, Ph.D.}  
+{Wichit Sombat, Ph.D.}          
+
+%%----------------   อาจารย์ที่ปรึกษาโครงงาน (ถ้ามี)  ----------%%
+%\coadvisor
+%{อาจารย์ ดร.ชื่อร่วม สกุล}               
+%{ดร. ชื่อร่วม สกุล}                          
+%{Cofirstname Lastname, Ph.D.}  
+%{COFIRTNAME LASTNAME, Ph.D.}          
+
+%%----------------   ข้อมูลสถาบัน                  ----------%%
+%% คณะ {ไทย} {English}
+\faculty
+{วิทยาศาสตร์}                          
+{Science}                           
+%% ภาควิชา {ไทย} {English}
+\department                             
+{คณิตศาสตร์ สถิติ และคอมพิวเตอร์}                      
+{Mathematics Statistics and Computer}                  
+
+%%----------------   ข้อมูลหลักสูตรและรายวิชา        ----------%%
+%% ชื่อหลักสูตร
+\fieldofstudy                           
+{วิทยาการคอมพิวเตอร์}                      
+{Computer Science}                  
+%% ชื่อปริญญา
+\degree                                 
+{วิทยาศาสตรบัณฑิต}                   
+{Bachelor of Science}                  
+%% ปีการศึกษาที่ทำโครงงาน
+\academicyear{2562}                     
+%% รหัสประจำตัวนักศึกษา
+\authorid{59110440204}                   
+%% รหัสวิชา
+\subjID{1104494}							
+%% ชื่อวิชา
+\subjName								
+{โครงงานวิทยาศาสตร์}
+{Senior Project}
+
+%%----------------   หัวหน้าภาควิชา            ----------%%
+\deanname                               
+{ดร. ชัชวิน นามมั่น}                       
+{Chatchawin Namman, Ph.D.}     
+
+%%----------------   รายชื่อคณะกรรมการสอบโครงงาน -------%%
+\committee                              
+{
+\CommitteeBlockAdvisor                  
+\CommitteeBlockCoAdvisor                
+\CommitteeBlock{กรรมการ}{ดร. ไพชยนต์ คงไชย} 
+\CommitteeBlock{กรรมการ}{อาจารย์ วาสนา เหง้าเกษ} 
+}
+
+%%-------------------------------------------------------------------------------
+%%-                               DOCUMENT                                      -
+%%-------------------------------------------------------------------------------
+\begin{document}
+% หน้าปกภาษาไทย - Thai Cover
+\makethaicover
+\newpage
+
+% หน้าปกภาษาอังกฤษ - English Cover
+%\makeenglishcover
+%\newpage
+
+% หน้ารายชื่อคณะกรรมการสอบ - Committee page
+\makecommittee
+\newpage
+
+% หน้ากิตติกรรมประกาศจากไฟล์ acknowledgement.tex
+\include{acknowledgement}
+\newpage
+
+% หน้าบทคัดย่อภาษาไทยจากไฟล์ abstractthai.tex
+\include{abstractthai}
+\newpage
+
+% หน้าบทคัดย่อภาษาอังกฤษจากไฟล์ abstractenglish.tex
+\include{abstractenglish}
+\newpage
+
+
+% คำสั่งสร้างรายการสารบัญ
+\tableofcontents
+\newpage
+% คำสั่งสร้างรายการตาราง
+\listoftables
+\newpage
+% คำสั่งสร้างรายการภาพอ้างอิง
+\listoffigures
+\newpage
+
+% คำสั่งรวมไฟล์ต่างๆในโครงการ แยกรายบท
+\include{1-introduction} 
+\include{2-background}
+\include{3-design}
+\include{4-implementation}
+\include{5-testing}
+\include{6-conclusion}
+
+
+% คำสั่งรวมแหล่งอ้างอิง
+\ULforem %%%
+\setlength{\bibhang}{1.5cm}
+\bibliographystyle{chulanat} 
+\bibliography{references} % ใช้แหล่งอ้างอิงจากไฟล์ชื่อ references.bib
+\normalem
+
+
+% รายการภาคผนวก - Appendix Section
+\numappendices{3}        % จำนวนภาคผนวก
+\startappendix
+\include{appendix1-setup}
+\include{appendix2-installation}
+\include{appendix3-manual}
+
+%% ข้อมูลผู้ดำเนินโครงการจากไฟล์ biography.tex - Biography Section
+\include{biography} 
+
+\end{document}

Documents/Latex/Figures/3/Class Diagram.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram name="Page-1" id="9f46799a-70d6-7492-0946-bef42562c5a5">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</diagram></mxfile>
\ No newline at end of file

Documents/Latex/Figures/3/DNNStructure.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.13" editor="www.draw.io" type="device"><diagram id="813d08ba-7be8-3800-d292-465b29ec56fa" name="Page-1">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</diagram></mxfile>
\ No newline at end of file

Documents/Latex/Figures/3/Sequence Diagram.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram name="Page-1" id="13e1069c-82ec-6db2-03f1-153e76fe0fe0">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</diagram></mxfile>
\ No newline at end of file

Documents/Latex/Figures/3/StateDiagram.xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram id="4d4f0bbd-8f27-e171-19e5-097d03e0079a" name="Page-1">7VpRk5o6FP41PN4dkoDCI9ht+9KZO7MPt33MSlSmaJwYV72/vkESQgIRV9G6nW4fCicJhHzf+c45iR6aLPdfGF4vvtGMFB70s72HPnkQAvFP/FdaDpUljMLKMGd5Jjtpw0v+P5FGX1q3eUY2RkdOacHztWmc0tWKTLlhw4zRndltRgvzrWs8Jy3DyxQXbet/ecYXlTWCY23/SvL5Qr0ZjOKq5RVPf84Z3a7k+zyIZse/qnmJ1bPkh24WOKO7hgk9e2jCKOXV1XI/IUW5tmrZqnGfHa31vBlZ8bMGBNWIN1xsiZrycWL8oBZDjBDrLm7SBV8WwgbEpZj4umzfcMz4C8e8bJ/lRTGhBWXHgcg//pWdOaM/SaNlNlMt6vvLmxld8c94mRcla76S4o3wfIpFg5wjYZzsnR8K6uUTtCR0STg7iC5ygCKgJCSS67/T6CrTogGssmHJp3n9XL2m4kIuq2OJw/YSP/teGnlxeryIvSiWluSTaorLmVC+oyxrA5IJsspbyviCzukKF8/a2gSqXDWxikVS5POVsL1SzulSNJBVlpSuUj5kTVaVRbpidBK0HpzK6RkobeiWTYlJuDOQY6TAPH8zn9WFhBz6L83FE2vEge8bkANogSmYOydcjrLwrKdxHsRjJ8ShQhapi7G8iCJlSVroJyfQZwu6fN2Kb0h3i5yTlzU+ru1OKLGJvOWNpQpNH8QbkQOahjuCoMMfoyH8MeoGS7hhoIAAyqIwikfyIlWuGoEWMu/ySyz9sSAzfmc3FSCxw3c5j+PNjxLzp7C83ee8bhLXuuUc5x47iCDC99HZmhrgJMc//hMSf9W4a0UAmkwLz9MAseL40Oi2LjtsTrwmtgg9ssJuT/8gtBhcTcAarGZDZ7MNuVqzYqdm3ZvrnK5vTHS/TfTh6NxI3DrpDIZhshXOAv9GVLbeA00qm9y8gHfKIdu8q0NkCnQclARUypwiO2imLa2OWhE2hZrI8skTk+N1DiYu1CuiRDe1gnCZ4pNM8rsnEGM2lTwO/MeOy0q3avCDjsAMOwJzMEBghs4sKkncGF/ADGHxW53rRA3qzh8m8XZH7SslUGHdI4EIdtPqSs1DwKKjXY85NK/3QWBsPaj65iFqAehIL4XmjG2qxrEtUJp90NSlRnWQAFO7hCX8zQI1gPSgsQlRdEflQY6YFDcCRqrXuleCdNXXqOgs5dHF/9hkw8Xq9OEgD4PfCDm8HPKzEToX8pPurqvSWj9qtWjn5X9oYoJC9GTu4N01NVHV6M1TkwGZ8PDJit5w+NHMTxpNKl0B5yUryqf7kpXoNsmKVdMjm3gDFWiB2kJVjuCf3muAVmC1+l9d0KHRIL7RGTM/HKcHScA7+Gvk5FEHpx17EFdyOohM7sQX5t+htQ1XH/QNn3+jd+TfpwXV1mzfJmjdOQ76xfsBs/a7RW9ol18dx2+3i93Ojc5T+nRpFLapFtqvuDkLGxlsEra+4u+mhpaIvn3dG+UJlhYC+1BruHPJoKOubcF/6nS/xPDxz/ZD63BfZTj3ON0PQLe6NGvEtga8s9L/s3Mmsw4AnrsO8N3+3ZMzKaib/h3cJmcKoclGgMLLkqZRYNPaepAjaXpvQTFy/FDCOS/7hOi6gkLc6t87Vd31j8rQ8y8=</diagram></mxfile>
\ No newline at end of file

Documents/Latex/Figures/3/use case diagram (2).xml

+<mxfile userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" version="8.5.12" editor="www.draw.io" type="device"><diagram id="120ff508-374b-bf88-8e7a-aaa9685ebcdc" name="Page-1">5VlLk+I2EP41PoayJD+PGGayqUqqpjKH7B4F1oBrbcuxxcDk16eFJduSzYZQwLK1cxmp1Xp9/fVDxiGL4vBrTavtHzxluYPd9OCQpYMx8nAA/6Tko5WE2G0FmzpLlVIveM3+YUqo1XZZyhpDUXCei6wyhWtelmwtDBmta7431d54bu5a0Q0bCV7XNB9L/8pSsW2lEQ57+SeWbbZ6ZxTE7ciKrr9uar4r1X4OJm/Hv3a4oHotddFmS1O+H4jIk0MWNeeibRWHBcslthq2dt7zidHu3DUrxTkT1LHfab5j+sTHc4kPjcV+mwn2WtG17O/B3g5JtqLIoYegSZuqtcBbdmCwavLGS/FMiyyXtv/E8ncmsjWFAbUVqwU7nDwu6kAAcjFeMFF/gMp+aAWF3XZggU5IleU33dz+9tBQAJxAD0+gEeSwRbKCxkYcL9EK5C0NnIK/d1wP/NIcGT0HBexVh36wW+XJdZLImS91w1eNBKlGDJZxdTuxR6Ol3UiwrTwneqhbx9MS3ZjHeqjViZ1ooSW6kcR6SCtHcy2J9DqhbnSIAdgtRiZuIB5gaVENiCFMdt2ETGoCJoozKkghv+0OuEY0JYZcI9egGvlBHK8L6SZWsTvCyp/yS/8qfumPwFoyIS8Pm3Gx53U6Ag9WgGQBneQ/YLwlal5gMcwbw4Ymw9k1UItGqM3XgtcjqCAHVbK5K/JWgSTy1oBC/jtdsfyFN5nIeAkqKy4EL0AhlwNJl+wWPJfzln2669eY59lGzhXcQp7vRJ6VbNHlcPfG5vBNa2B/wuEnjBFcwRjayEN/t8N0F/pl3vitrHYyeNJColaummoqYD4Ey0lo4krcO7JcV5oDYF8FhfILajF5xgJq08eEzU4/eAo2bwK28BqwTRR+io+j5B7p5B5huxLoCxhkVgtdSQPK3qgywTbl1RagrGuVKBnVKmRUojzbs/o6ZDkx6yFp4FlRqcsZ96ABmQhLOuaocm3Yy8p1vpP+pIQbQ2W6pmMpvKxUt+QlM5FlZTqX7zXo8oqVE2mjSzkpbbayzjnOO5F/1AYn7cUOmfgsM83MV70v3UEAusGQ7H5ROam9k7zIt20M9+a7es3MkC9ovWFi6HbffN4gbf+a5VRk7+aeU8ZWy73w7Pgk0eEliExe2dG2PauaNXwiWgt5rhXeQ99cqL3gaKEj97o7nkfHcVX8J2sqXjaPGsPR93Re7yd13oHrDrz189CT+7ELnTceO2/Lzrs4L4ksn4ssnzvXee2FvPh2zhv+LzrCU5/JMu1qbGzgKsLi44ChasJRS31whMf93fKNG2ODthGJVP+F1RnAzGpN7btkonuSGfkz36JzOLuQ0JCNZihGgRcGbkgCK8kRL55FLmiFhMSx7TRX5PoZ303Pjp1q8CQRT7OrY8o47GnmIYN1xPo7QcHLaKY/OBgFT3A3msXWc8ouU85lGA7sese9FY28qfL7/jR6EKq4340ql2ZXZGVXjG8WcTz0kxZ7s9gNDWIiPzwZ+9BVWaq/LQ1Z2n6Lvk/etL6rYXJpzrQjGroWTaHb/1bZqvc/CJOnfwE=</diagram></mxfile>
\ No newline at end of file

Documents/Latex/Figures/component

+
+
+
+\section{ }
+	\subsection{ }
+
+\begin{itemize}
+	\item 
+\end{itemize}
+
+\begin{enumerate}
+	\item 
+\end{enumerate}
+
+		\begin{figure}[h]
+			\centering
+			\includegraphics[scale=0.5]{Figures/2/}
+			\caption{}
+			\label{Fig:rbg-image}
+		\end{figure}
+
+\begin{figure}[h]
+    \includegraphics[width=\columnwidth]{Figures/2/}
+    \caption{ }
+    \label{Fig:}
+\end{figure}
+
+\begin{figure}[h]
+	\begin{lstlisting}
+
+    \end{lstlisting}
+    \caption{ }
+    \label{Fig: }
+\end{figure}
+
+
+\begin{table}[h]
+	\caption{ตารางขั้นตอนการดำเนินการ}
+	\begin{tabular}{c}
+		\includegraphics[width=\columnwidth]{Figures/table/use-case}	\\ 
+	\end{tabular}
+\end{table}
\ No newline at end of file

Documents/Latex/README.md

+## ฟอนต์ที่ควรติดตั้งก่อน
+
+* Tex-Gyre [https://ctan.org/pkg/tex-gyre?lang=en](https://ctan.org/pkg/tex-gyre?lang=en)
+
+* th-sarabun-new [https://www.f0nt.com/release/th-sarabun-new/](https://www.f0nt.com/release/th-sarabun-new/)
+
+## โปรแกรมที่ต้องติดตั้ง
+
+หมายเหตุ: สำหรับผู้ใช้ Windows แนะนำให้ติดตั้ง `https://chocolatey.org`
+
+1. ติดตั้ง texlive สำหรับ compile latex
+
+  * Windows - http://mirror.ctan.org/systems/texlive/tlnet/install-tl.zip
+
+  * Ubuntu - `sudo apt install texlive-full`
+
+  * OSX - `brew cask install mactex`
+
+2. ติดตั้ง pygments สำหรับ syntax hilighting
+
+  * Windows - `pip install pygments`
+  
+  * Ubuntu - `sudo apt install python-pygments python3-pygments`
+
+
+## วิธีการ compile
+
+```sh
+ xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+```
+
+* คำสั่ง compile บนระบบปฏิบัติการที่มี `latexmk`
+
+```sh
+latexmk -g -f CS58*.tex 
+```
+
+### คำสั่งสร้าง bibliography
+
+```sh
+bibtex CS58*.aux
+```
+
+### คำสั่งแปลง .eps เป็น .pdf
+
+```sh
+pdf2eps [no_page_in_pdf] [figure_file_name]
+```
+
+### วิธีการรัน
+
+```
+Compilation: *require XeTeX
+  [When citations/references are changed.]
+  1. xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+  2. bibtex MathCS-tutorial.aux
+  3. xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+  4. xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+
+  [When citations/references are not changed.]
+  1. xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+```

Documents/Latex/abstractenglish.tex

+\begin{englishabstract}
+Looking Great system for gentlemen and ladies Is a web application about buying clothes Choosing the right clothes and according to the shape of each user Is a system that is an alternative for users to use the service To help in choosing clothes for users more easily The developer therefore aims to develop a system to introduce dress code for gentlemen and ladies. To be an alternative way to recommend dressing for users who are interested in dressing This system was developed using the Django Web Framework, using collaborative filtering techniques to perform the function of the clothing suggestion function for users. Website enabled on Pythonanywhere Which is open to use the SQLite3 database free of charge.
+
+
+\noindent
+Keywords: Web application, Dressing system for gentlemen and ladies 
+\end{englishabstract}
+

Documents/Latex/abstractthai.tex

+\begin{thaiabstract}
+ระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี เป็นเว็บแอปพลิเคชันที่เกี่ยวกับเรื่องของการเลือกซื้อเสื้อผ้า การเลือกเสื้อผ้าให้เหมาะสมกับรูปร่างของผู้ใช้งานแต่ละท่าน เป็นระบบที่เป็นทางเลือกให้แก่ผู้ใช้งานได้ใช้บริการ เพื่อเป็นตัวช่วยในการเลือกเสื้อผ้าให้แก่ผู้ใช้ได้ง่ายยิ่งขึ้น ผู้พัฒนาจึงวัตถุประสงค์พัฒนาระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี เพื่อเป็นทางเลือกในการแนะนำการแต่งกายให้กับผู้ใช้งานที่มีความสนใจในเรื่องการแต่งกาย โดยระบบนี้พัฒนาด้วย Django Web Framework โดยใช้เทคนิค Collaborative Filtering เพื่อประมวลผลในฟังก์ชันแนะนำเสื้อผ้าให้แก่ผู้ใช้งาน เว็บไซต์เปิดใช้งานบน Pythonanywhere ซึ่งเปิดให้ใช้ฐานข้อมูล SQLite3 โดยไม่มีค่าใช้จ่าย   
+
+\noindent
+\\คำสำคัญ: เว็บแอปพลิเคชัน ระบบแนะนำการแต่งกาย
+\end{thaiabstract}

Documents/Latex/acknowledgement.tex

+\begin{acknowledgements} %TODO update here!
+	การพัฒนาโครงงานระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี สำเร็จลุล่วงได้ด้วยความกรุณาแลความช่วยเหลือจากหลายท่าน ถึงแม้จะประสบกับปัญหาในการทำโครงงานก็ได้รับคำแนะนำและการช่วยเหลือที่ดีเสมอมา  ข้าพเจ้าจึงใคร่ขอขอพระคุณทุกท่าน ที่มีส่วนร่วมในการพัฒนาโครงงานนี้
+	
+   ขอขอบพระคุณอาจารย์ที่ปรึกษา ดร.วิชิต สมบัติ  อาจารย์ที่ปรึกษาโครงงานที่ได้แนะนำทฤษฎีและแนวทางในแก้ปัญหาต่าง ๆ  ที่เกิดขึ้นระหว่างการพัฒนาระบบ อีกครั้งยังคอยตรวจสอบความก้าวหน้าของการทำงานเป็นระยะ ๆ รวมทั้งสร้างกำลังใจให้ผู้พัฒนาอยู่เสมอ 
+    
+   ขอขอบพระคุณอาจารย์ประจำสาขาวิทยาการคอมพิวเตอร์ เจ้าหน้าที่ภาควิชาคณิตศาสตร์ สถิติและคอมพิวเตอร์ ที่คอยเอื้อยอำนวยความสะดวกทั้งเรื่องอุปกรณ์และสถานที่ต่อการปฏิบัติงานของผู้พัฒนา
+  
+  ขอกราบขอบพระคุณบิดา มารดา ที่คอยให้กำลังใจ คอยให้ความรักและความห่วงใยเสมอมาตลอดจนคอยช่วยเหลือทุนทรัพย์ทางด้านการศึกษาและอุปกรณ์ในการพัฒนาโครงงาน
+    
+  ขอบคุณเพื่อน ๆ สาขาวิทยาการคอมพิวเตอร์ชั้นปีที่ 4 ที่ได้คอยช่วยแก้ไขปัญหาและให้คำปรึกษาในการพัฒนาโครงงานครั้งนี้จนเสร็จสิ้น
+\end{acknowledgements}
+
+\begin{flushright}
+    นางสาวนฤมล โมคภา
+    \\
+    วันที่ 12 เมษายน 2563
+\end{flushright}

Documents/Latex/appendix1-setup.tex

+\chapter{การติดตั้งเครื่องมือที่ใช้พัฒนาโปรแกรม}
+การติดตั้งเครื่องมือที่ใช้ในการพัฒนาเว็บแอพพลิเคชันระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรีมีโปรแกรมที่จำเป็นในการพัฒนาระบบดังต่อไปนี้
+\begin{itemize}
+	\item การติดตั้ง Visual Studio Code
+	\item การเริ่มต้นใช้ PythonAnywhere
+\end{itemize}
+
+\section{ขั้นตอนการติดตั้งโปรแกรม Visual Studio Code หรือ VS Code}
+\begin{enumerate}[label=\arabic*.]
+	\item เข้าไปที่เว็บไซต์ https://code.visualstudio.com/ และ Download โปรแกรม VS Code โดยเลือกให้ตรงกับ OS ของเครื่องคอมพิวเตอร์
+	\begin{figure}[H]
+		\includegraphics[width=\columnwidth]{Figures/prepareation/หน้าเว็บดาวน์โหลด Visual Studio Code}
+		\caption{หน้าเว็บดาวน์โหลด Visual Studio Code}
+		\label{Fig:หน้าเว็บดาวน์โหลด Visual Studio Code}
+	\end{figure}
+
+\newpage
+	\item  หลังดาวน์โหลดโปรแกรมเสร็จจะได้ไฟล์ ดับเบิ้ลคลิก หรือคลิกขวาและกด “Open” โปรแกรมที่ดาวน์โหลดมา
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/ไฟล์โปรแกรมที่โหลดมาได้}
+		\caption{ไฟล์โปรแกรมที่โหลดมาได้}
+		\label{Fig:ไฟล์โปรแกรมที่โหลดมาได้}
+	\end{figure}
+	
+	\item  หลังจากคลิกขวาและกด “Open” โปรแกรมที่ดาวน์โหลดมาแล้วระบบจะแสดงหน้าต่าดังรูปที่ ก.3 คลิกปุ่ม “Run”
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างแจ้งเตือนก่อนการติดตั้งโปรแกรม}
+		\caption{หน้าต่างแจ้งเตือนก่อนการติดตั้งโปรแกรม}
+		\label{Fig:หน้าต่างแจ้งเตือนก่อนการติดตั้งโปรแกรม}
+	\end{figure}
+
+\newpage
+	\item  หลังจากคลิก Run แล้ว จะแสดงหน้าต่างดังรูปที่ ก.4 เลือก “I accept the agreement” และคลิกปุ่ม “Next”
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
+		\caption{หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
+		\label{Fig:หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
+	\end{figure}
+	
+	\item เลือกพื้นที่ในการจัดเก็บโปรแกรม (แนะนำให้ใช้ Default ที่ให้มา) และคลิกปุ่ม “Next”
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code}
+		\caption{หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code}
+		\label{Fig:หน้าต่างที่จัดเก็บไฟล์ต่างๆ ของ Visual Studio Code}
+	\end{figure}
+
+\newpage
+	\item  จากนั้นจะแสดงหน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code ทำการกด “Next”
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code}
+		\caption{หน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code}
+		\label{Fig:หน้าต่างการจัดการซอร์ดคัทของ Visual Studio Code}
+	\end{figure}
+
+	\item เลือกส่วนเพิ่มงานให้เลือก Create a desktop icon และ Add to PATH (Requires Shell Restart) จากนั้นให้คลิกปุ่ม “Next”
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างเริ่มทำการติดตั้งทำการกดของ Visual Studio Code}
+		\caption{หน้าต่างเริ่มทำการติดตั้งทำการกดของ Visual Studio Code}
+		\label{Fig:หน้าต่างเริ่มทำการติดตั้งทำการกดของ Visual Studio Code}
+	\end{figure}
+
+\newpage
+	\item  คลิกปุ่ม “Install” เพื่อติดตั้งโปรแกรม
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างสุดท้ายการติดตั้งของ Visual Studio Code}
+		\caption{หน้าต่างสุดท้ายการติดตั้งของ Visual Studio Code}
+		\label{Fig:หน้าต่างสุดท้ายการติดตั้งของ Visual Studio Code}
+	\end{figure}
+\newpage
+	\item  คลิกปุ่ม “Finish” เสร็จสิ้นการติดตั้งโปรแกรม VS Code
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างการติดตั้งของ Visual Studio Code เสร็จสิ้น}
+		\caption{หน้าต่างการติดตั้งของ Visual Studio Code เสร็จสิ้น}
+		\label{Fig:หน้าต่างการติดตั้งของ Visual Studio Code เสร็จสิ้น}
+	\end{figure}
+	\item   Visual Studio Code 
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/prepareation/หน้าต่างเมื่อเขาโปรแกรมหลังติดตั้งเสร็จของ Visual Studio Code}
+		\caption{หน้าต่างเมื่อเขาโปรแกรมหลังติดตั้งเสร็จของ Visual Studio Code}
+		\label{Fig:หน้าต่างเมื่อเขาโปรแกรมหลังติดตั้งเสร็จของ Visual Studio Code}
+	\end{figure}
+\end{enumerate}
+
+\newpage
+\section{การเริ่มต้นใช้ PythonAnywhere}
+ตัวอย่างแนะนำการใช้งาน pythonanywhere พัฒนา web app
+\begin{enumerate}[label=\arabic*.]
+	\item pythonanywhere เป็น web hosting สำหรับภาษา Python แบบฟรี โดยจะนำ web app ที่เราสร้างไปเก็บไว้บน cloud ทำให้สามารถเข้าถึง web ได้แบบออนไลน์
+	\begin{figure}[H]
+		\includegraphics[width=\columnwidth]{Figures/7/1}
+		\caption{หน้าแรกของ pythonanywhere ก่อนเข้าสู่ระบบ}
+		\label{Fig:1}
+	\end{figure}
+
+\newpage
+	\item เมื่อทำการสมัครสมาชิกและเข้าสู่ระบบเรียบร้อยแล้ว ให้กดไปที่ Web
+	\begin{figure}[H]
+		\includegraphics[width=\columnwidth]{Figures/7/2}
+		\caption{หน้าแรกหลังจากทำการเข้าสู่ระบบเสร็จ}
+		\label{Fig:2}
+	\end{figure}
+
+	\item กดสร้าง web app ใหม่
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/3}
+		\caption{หน้าเริ่มการสร้างเว็บ}
+		\label{Fig:3}
+	\end{figure}
+
+\newpage
+	\item จะมีหน้าต่างปรากฏขึ้นบอกว่า domain name ของ web เรานั้นจะมีชื่อเป็น username.pythonanywhere.com ซึ่งในที่นี้คือ lookinggreat.pythonanywhere.com ถ้าต้องการเปลี่ยนชื่อ web ต้อง upgrade account แต่ถ้าไม่ต้องการสามารถกด Next เพื่อสร้าง web app ต่อได้เลย
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/4}
+		\caption{หน้าสร้าง web app}
+		\label{Fig:4}
+	\end{figure}
+
+	\item การ upgrade account ต้องจ่ายเงินเพิ่มแล้วจะได้สิทธิพิเศษตามแต่ละขั้น
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/5}
+		\caption{หน้าเงื่อนไขการ upgrade account}
+		\label{Fig:5}
+	\end{figure}
+
+\newpage	
+	\item ถ้าหากกด Next ต่อมาจะแสดงหน้าต่างให้เลือก framework ที่จะใช้ในการสร้าง web ขึ้นมา ในที่นี้ได้เลือกใช้ Django
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/6}
+		\caption{หน้าการสร้าง web}
+		\label{Fig:6}
+	\end{figure}
+
+	\item จากนั้นเลือก version ของ python ที่จะใช้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/7}
+		\caption{หน้าการเลือก version ของ python}
+		\label{Fig:7}
+	\end{figure}
+
+\newpage
+	\item ตั้งชื่อ project และเลือก directory เก็บ file directory ที่เก็บไฟล์นี้จะถูกเก็บไว้ใน cloud ของ pythonanywhere ไม่เกี่ยวข้องกับพื้นที่เก็บข้อมูลในเครื่องแต่อย่างใด
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/8}
+		\caption{หน้าการตั้งชื่อ project และเลือก directory เก็บ file directory}
+		\label{Fig:8}
+	\end{figure}
+
+	\item จะมีข้อความบ่งบอกว่าสร้าง web app สำเร็จแล้วพร้อมกับรายละเอียดของ web app ของเราด้านล่าง
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/9}
+		\caption{หน้าการสร้าง web app สำเร็จ}
+		\label{Fig:9}
+	\end{figure}
+
+\newpage
+	\item เมื่อลองเข้าลิ้งค์เว็บของเราจะปรากฏข้อความว่าสามารใช้งาน web ได้ของ Django
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/10}
+		\caption{หน้าสามารใช้งาน web ได้ของ Django}
+		\label{Fig:10}
+	\end{figure}
+
+	\item หากไปที่หน้า Consoles และกด Bash จะเป็นการเปิด Console ขึ้นมา
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/11}
+		\caption{หน้า Consoles}
+		\label{Fig:11}
+	\end{figure}
+
+	\item Consoles มีหน้าที่คล้าย terminal สามารถลง modules เพิ่มเติมได้จากการพิมพ์คำสั่งในหน้านี้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.7\columnwidth]{Figures/7/12}
+		\caption{หน้าการเปิด Console ขึ้นมา}
+		\label{Fig:12}
+	\end{figure}
+\end{enumerate}
\ No newline at end of file

Documents/Latex/appendix2-installation.tex

+\chapter{คู่มือการติดตั้งระบบ}
+คู่มือการติดตั้งระบบ ในการติดตั้งเพื่อใช้งานเว็บแอปพลิเคชันระบบแนะการแต่งกายสุภาพบุรุษและสุภาพสตรี สามารถทำได้โดยมีขั้นตอนดังนี้
+\begin{enumerate}[label=\arabic*.]
+	\item สามารถ Clone Project ได้ที่ http://projectcs.sci.ubu.ac.th/senior-prj-62/59110440204.git
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=\columnwidth]{Figures/7/installApp/หน้าเว็บ Reposity ของโปรเจ็ค}
+		\caption{หน้าเว็บ Reposity ของโปรเจ็ค}
+		\label{Fig:หน้าเว็บ Reposity ของโปรเจ็ค}
+	\end{figure}
+	\item เข้าไปใน 59110440204\Source\Fullstack\djangoapp แล้วใช้คำสั่ง migrate สร้างตารางตามลำดับดังต่อไปนี้
+		\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+manage.py makemigrations lookinggreat
+python manage.py makemigrations
+python manage.py migrate lookinggreat
+python manage.py migrate
+		\end{lstlisting}}
+		\caption{คำสั่ง migrate สร้างตาราง}
+		\label{Fig:คำสั่ง migrate สร้างตาราง}
+	\end{figure}
+\newpage
+	\item  จากนั้นทำการโหลดข้อมูลลงในตารางดังต่อไปนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+python manage.py loaddata Category Gender Shape Size SkinColor Member Store Color Cloth FavoriteCloth FavoriteStore Recommend
+			\end{lstlisting}}
+		\caption{คำสั่ง migrate สร้างตาราง}
+		\label{Fig:คำสั่ง migrate สร้างตาราง}
+	\end{figure}
+	\item จากนั้นทำการสร้าง admin ดังต่อไปนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+python manage.py createsuperuser
+			\end{lstlisting}}
+		\caption{คำสั่ง migrate สร้างตาราง}
+		\label{Fig:คำสั่ง migrate สร้างตาราง}
+	\end{figure}
+		\item จากนั้นทำการ run โปรแกรมโดยใช้คำสั่งดังรูปที่ ข.4 
+		website http://127.0.0.1:8000 บนเว็บ server http://lookinggreat.pythonanywhere.com/
+		 ดังต่อไปนี้
+	\begin{figure}[H]
+		{\setstretch{1.0}\begin{lstlisting}
+python manage.py runserver
+			\end{lstlisting}}
+		\caption{คำสั่ง migrate สร้างตาราง}
+		\label{Fig:คำสั่ง migrate สร้างตาราง}
+	\end{figure}
+\end{enumerate}

Documents/Latex/appendix3-manual.tex

+\chapter{คู่มือการใช้งานระบบ}
+คู่มือการใช้งานทั้งหมดของระบบ สามารถแบ่งออกเป็น 3 ส่วน ดังนี้
+\begin{enumerate}[label=\arabic*]
+	\item ส่วนผู้ใช้งาน
+	\item ส่วนร้านค้า
+	\item ส่วนผู้ดูแลระบบ
+\end{enumerate}
+\section{ส่วนผู้ใช้งาน}
+	\begin{enumerate}[label=\arabic*.]
+		\item ส่วนของหน้าหลัก
+		\begin{itemize}
+			\item เมื่อผู้ใช้เข้าเว็บระบบจะแสดงหน้าหลักดังต่อไปนี้
+				\begin{figure}[H]
+					\centering
+					\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอหลักของระบบ}
+					\caption{หน้าจอหลักของระบบ}
+					\label{Fig:หน้าจอหลักของระบบ}
+				\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอหลักของระบบ} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ปุ่มหน้าหลักของระบบ
+				\item หมายเลขที่ 2 ปุ่มกดดูแนะนำเสื้อผ้า
+				\item หมายเลขที่ 3 ปุ่มกดดูเสื้อผ้าทั้งหมดในระบบ
+				\item หมายเลขที่ 4 ปุ่มกดดูร้านค้าทั้งหมดในระบบ
+				\item หมายเลขที่ 5 ปุ่มสำหรับสมัครสมาชิก
+				\item หมายเลขที่ 6 ปุ่มสำหรับเข้าสู่ระบบ
+			\end{itemize}
+		\end{itemize}
+	
+		\item ส่วนของหน้าสมัครสมาชิก
+			\begin{itemize}
+				\item เมื่อผู้ใช้กดปุ่มสมัครสมาชิกระบบจะแสดงหน้าให้กรอกข้อมูลสมัครสมาชิกดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอสมัครสมาชิก}
+				\caption{หน้าจอสมัครสมาชิก}
+				\label{Fig:หน้าจอสมัครสมาชิก}
+			\end{figure}
+		จากรูปที่ \ref{Fig:หน้าจอสมัครสมาชิก} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้งาน
+				\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน
+				\item หมายเลขที่ 3 ช่องกรอก E-mail
+				\item หมายเลขที่ 4 ช่องเลือกเพศ
+				\item หมายเลขที่ 5 ช่องเลือกวัน/เดือน/ปีเกิด
+				\item หมายเลขที่ 6 ช่องเลือกรูปร่าง
+				\item หมายเลขที่ 7 ช่องเลือกสีผิว
+				\item หมายเลขที่ 8 ช่องเลือกกรูปโปร์ไฟล์
+				\item หมายเลขที่ 9 ปุ่มกดสมัครสมาชิก
+				\item หมายเลขที่ 10 ปุ่มกดเข้าสู่ระบบหากทำการสมัครสมาชิกแล้ว
+				\item หมายเลขที่ 11 ปุ่มกลับหน้าหลักของระบบ
+			\end{itemize}
+		\end{itemize}
+	
+		\item ส่วนของหน้าเข้าสู่ระบบ
+		\begin{itemize}
+			\item เมื่อผู้ใช้สมัครสมาชิกสำเร็จแล้วกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอเข้าสู่ระบบ}
+				\caption{หน้าจอเข้าสู่ระบบ}
+				\label{Fig:หน้าจอเข้าสู่ระบบ}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอเข้าสู่ระบบ} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้
+				\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน
+				\item หมายเลขที่ 3 ปุ่มกดเข้าสู่ระบบ
+				\item หมายเลขที่ 4 ปุ่มสมัครสมาชิกสำหรับผู้ที่ยังไม่เป็นสมาชิก 
+			\end{itemize}
+		\end{itemize}
+	
+		\newpage
+		\item ส่วนของหน้าเสื้อผ้าทั้งหมด
+		\begin{itemize}
+			\item เมื่อผู้ใชกดปุ่มเสื้อผ้าทั้งหมดระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอเสื้อผ้าทั้งหมด}
+				\caption{หน้าจอเสื้อผ้าทั้งหมด}
+				\label{Fig:หน้าจอเสื้อผ้าทั้งหมด}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอเสื้อผ้าทั้งหมด} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ปุ่มกดแสดงรายการเสื้อผ้าทั้งหมดรวมทั้ง 6 ประเภท
+				\item หมายเลขที่ 2 ปุ่มกดดูเฉพาะเสื้อ
+				\item หมายเลขที่ 3 ปุ่มกดดูเฉพาะกางเกง
+				\item หมายเลขที่ 4 ปุ่มกดดูเฉพาะกระโปรง
+				\item หมายเลขที่ 5 ปุ่มกดดูเฉพาะเดรส
+				\item หมายเลขที่ 6 ปุ่มกดดูเฉพาะสูท
+				\item หมายเลขที่ 7 ปุ่มกดดูรายการอื่นๆ
+				\item หมายเลขที่ 8 ช่องกรอกชื่อเสื้อผ้าที่ต้องการค้นหา
+				\item หมายเลขที่ 9 ปุ่มกดเพื่อค้นหา
+				\item หมายเลขที่ 10 การ์ดแสดงรายการเสื้อที่แสดงจะประกอบไปด้วยชื่อและราคา
+				\item หมายเลขที่ 11 ปุ่มกดเพื่อดูรายละเอียดสินค้า
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้ารายละเอียดสินค้า
+		\begin{itemize}
+			\item เมื่อผู้ใช้กดปุ่มดูรายละเอียดสินค้าระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอรายละเอียดสินค้า}
+				\caption{หน้าจอรายละเอียดสินค้า}
+				\label{Fig:หน้าจอรายละเอียดสินค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอรายละเอียดสินค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 แสดงรายละเอียดสินค้าทั้งหมด
+				\item หมายเลขที่ 2 ปุ่มกดเพื่อดูร้านค้าของสินค้าชิ้นนี้
+				\item หมายเลขที่ 3 ปุ่มเพิ่มเป็นสินค้าโปรดโดยสามารถกดเลือกระดับความชอบได้ 1-5 ซึ่งปุ่มกดเพิ่มเป็นสินค้าโปรดนี้จะแสดงต่อเมื่อเข้าสู่ระบบมาแล้วเท่านั้น
+			\end{itemize}
+		\end{itemize}
+	
+		\newpage
+		\item ส่วนของหน้าร้านค้าทั้งหมด
+		\begin{itemize}
+			\item เมื่อผู้ใช้กดปุ่มร้านค้าทั้งหมด ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอร้านค้าทั้งหมด}
+				\caption{หน้าจอร้านค้าทั้งหมด}
+				\label{Fig:หน้าจอร้านค้าทั้งหมด}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอร้านค้าทั้งหมด} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 การ์ดแสดงรายการร้านค้าจะแสดงชื่อร้านค้า
+				\item หมายเลขที่ 2 ปุ่มกดเพื่อดูรายละเอียดร้านค้า
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้ารายละเอียดร้านค้า
+		\begin{itemize}
+			\item เมื่อผู้ใช้กดปุ่มดูรายละเอียดร้านค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอรายละเอียดร้านค้า}
+				\caption{หน้าจอรายละเอียดร้านค้า}
+				\label{Fig:หน้าจอรายละเอียดร้านค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอร้านค้าทั้งหมด} สามารถอธิบายการใช้งานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item หมายเลขที่ 1 แสดงรายละเอียดร้านค้าทั้งหมด ซึ่งจะประกอบไปด้วย ชื่อร้าน ที่อยู่ร้าน เบอร์โทรติดต่อ E-mail และ Facebook
+			\item หมายเลขที่ 2 ปุ่มกดเพิ่มเป็นร้านโปรด ซึ่งปุ่มกดเพิ่มเป็นร้านโปรดนี้จะแสดงต่อเมื่อเข้าสู่ระบบมาแล้วเท่านั้น
+			\item หมายเลขที่ 3 จะแสดงรายการเสื้อผ้าทั้งหมดที่มีในร้าน
+		\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าแนะนำเสื้อผ้า
+		\begin{itemize}
+			\item เมื่อผู้ใช้เข้าสู่ระบบเรียบร้อยแล้วทำการกดปุ่มแนะนำเสื้อผ้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอแนะนำเสื้อผ้า}
+			\caption{หน้าจอแนะนำเสื้อผ้า}
+			\label{Fig:หน้าจอแนะนำเสื้อผ้า}
+		\end{figure}
+	จากรูปที่ \ref{Fig:หน้าจอแนะนำเสื้อผ้า} สามารถอธิบายการใช้งานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item หมายเลขที่ 1 แสดงรายละเอียดร้านค้าทั้งหมด ซึ่งจะประกอบไปด้วย ชื่อร้าน ที่อยู่ร้าน เบอร์โทรติดต่อ E-mail และ Facebookหมายเลขที่ 1 การ์ดแสดงรายการเสื้อผ้าแนะนำสำหรับผู้ใช้งาน
+		\item หมายเลขที่ 2 ปุ่มกดดูรายละเอียดร้านค้าเพื่อดูสินค้าที่น่าสนใจเพิ่มเติ่ม
+	\end{itemize}
+\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าข้อมูลผู้ใช้งาน
+\begin{itemize}
+	\item เมื่อผู้ใช้ทำการเข้าสู่ระบบเรียบร้อยแล้วกดที่ปุ่มข้อมูลผู้มช้งาน ระบบจะแสดงหน้าจอดังต่อไปนี้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอข้อมูลผู้ใช้งาน}
+		\caption{หน้าจอข้อมูลผู้ใช้งาน}
+		\label{Fig:หน้าจอข้อมูลผู้ใช้งาน}
+	\end{figure}
+	จากรูปที่ \ref{Fig:หน้าจอข้อมูลผู้ใช้งาน} สามารถอธิบายการใช้งานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item หมายเลขที่ 1 การ์ดแสดงข้อมูลผู้ใช้งานโดยจะประกอบไปด้วย ชื่อผู้ใช้ E-mail วัน/เดือน/ปีเกิด เพศ รูปร่าง สีผิว และรูปโปร์ไฟล์
+		\item หมายเลขที่ 2 ปุ่มกดเแก้ไขข้อมูลผู้ใช้
+		\item หมายเลขที่ 3 ปุ่มกดดูรายการสินค้าโปรด
+		\item หมายเลขที่ 4 ปุ่มกดดูรายการ้านโปรด
+		\item หมายเลขที่ 5 ปุ่มแสดงชื่อผู้ใช้จะประกอบไปด้วย ข้อมูลผู้ใช้งาน และข้อมูลร้านค้าในกรณีที่มีร้านค้าแล้ว แต่หากยังไม่มีร้านค้าจะแสดงรายการเป็นเพิ่มร้านค้า
+		\item หมายเลขที่ 6 ปุ่มกดดูข้อมูลผู้ใช้งาน
+		\item หมายเลขที่ 7 ปุ่มกดดูข้อมูลร้านค้า
+		\item หมายเลขที่ 8 ปุ่มกดออกจากระบบ
+	\end{itemize}
+\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าแก้ไขข้อมูลผู้ใช้งาน
+\begin{itemize}
+	\item เมื่อผู้ใช้กดปุ่มแก้ไขข้อมูล ระบบจะแสดงหน้าจอดังต่อไปนี้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอแก้ไขข้อมูลผู้ใช้งาน}
+		\caption{หน้าจอแก้ไขข้อมูลผู้ใช้งาน}
+		\label{Fig:หน้าจอแก้ไขข้อมูลผู้ใช้งาน}
+	\end{figure}
+	จากรูปที่ \ref{Fig:หน้าจอแก้ไขข้อมูลผู้ใช้งาน} สามารถอธิบายการใช้งานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้งาน ซึ่งจะไม่สามารถแก้ไขได้
+		\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน ซึ่งจะไม่สามารถแก้ไขได้
+		\item หมายเลขที่ 3 ช่องแก้ไขกรอก E-mail
+		\item หมายเลขที่ 4 ช่องแก้ไขเลือกเพศ
+		\item หมายเลขที่ 5 ช่องแก้ไขเลือกวัน/เดือน/ปีเกิด
+		\item หมายเลขที่ 6 ช่องแก้ไขเลือกรูปร่าง
+		\item หมายเลขที่ 7 ช่องแก้ไขเลือกสีผิว
+		\item หมายเลขที่ 8 ช่องแก้ไขเลือกกรูปโปร์ไฟล์
+		\item หมายเลขที่ 9 ปุ่มกดแก้ไขข้อมูลผู้ใช้
+		\item หมายเลขที่ 10 ปุ่มกลับหน้าหลักของระบบ
+	\end{itemize}
+\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้ารายการสินค้าโปรด
+\begin{itemize}
+	\item เมื่อผู้ใช้กดปุ่มรายการสินค้าโปรด ระบบจะแสดงหน้าจอดังต่อไปนี้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอรายการสินค้าโปรด}
+		\caption{หน้าจอรายการสินค้าโปรด}
+		\label{Fig:หน้าจอรายการสินค้าโปรด}
+	\end{figure}
+	จากรูปที่ \ref{Fig:หน้าจอรายการสินค้าโปรด} สามารถอธิบายการใช้งานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item หมายเลขที่ 1 การ์ดแสดงรายการสินค้าโปรดโดยจะประกอบไปด้วย ชื่อสินค้าและระดับความชอบสินค้าชิ้นนั้น
+		\item หมายเลขที่ 2  ปุ่มกดเพื่อดูรายละเอียดสินค้า
+		\item หมายเลขที่ 3 ปุ่มลบรายการสินค้าโปรด
+		\item หมายเลขที่ 4 ปุ่มย้อนกลับไปหน้าข้อมูลผู้ใช้งาน
+	\end{itemize}
+\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้ารายการร้านโปรด
+\begin{itemize}
+	\item เมื่อผู้ใช้กดปุ่มรายการร้านโปรด ระบบจะแสดงหน้าจอดังต่อไปนี้
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอรายการร้านโปรด}
+		\caption{หน้าจอรายการร้านโปรด}
+		\label{Fig:หน้าจอรายการร้านโปรด}
+	\end{figure}
+	จากรูปที่ \ref{Fig:หน้าจอรายการร้านโปรด} สามารถอธิบายการใช้งานได้ดังนี้
+	\begin{itemize}[label={--}]
+		\item หมายเลขที่ 1 การ์ดแสดงรายการร้านโปรดโดยจะประกอบไปด้วย ชื่อร้านค้า
+		\item หมายเลขที่ 2  ปุ่มกดเพื่อดูรายละเอียดร้านค้า
+		\item หมายเลขที่ 3 ปุ่มลบรายการร้านโปรด
+		\item หมายเลขที่ 4 ปุ่มย้อนกลับไปหน้าข้อมูลผู้ใช้งาน
+	\end{itemize}
+\end{itemize}
+
+\end{enumerate}
+
+
+\newpage
+\section{ส่วนร้านค้า}
+	\begin{enumerate}[label=\arabic*.]
+		\item ส่วนของหน้าหลัก
+		\begin{itemize}
+		\item เมื่อผู้ใช้เข้าเว็บระบบจะแสดงหน้าหลักดังต่อไปนี้
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอหลักของระบบ}
+			\caption{หน้าจอหลักของระบบ}
+			\label{Fig:หน้าจอหลักของระบบ}
+		\end{figure}
+		จากรูปที่ \ref{Fig:หน้าจอหลักของระบบ} สามารถอธิบายการใช้งานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item หมายเลขที่ 1 ปุ่มหน้าหลักของระบบ
+			\item หมายเลขที่ 2 ปุ่มกดดูแนะนำเสื้อผ้า
+			\item หมายเลขที่ 3 ปุ่มกดดูเสื้อผ้าทั้งหมดในระบบ
+			\item หมายเลขที่ 4 ปุ่มกดดูร้านค้าทั้งหมดในระบบ
+			\item หมายเลขที่ 5 ปุ่มสำหรับสมัครสมาชิก
+			\item หมายเลขที่ 6 ปุ่มสำหรับเข้าสู่ระบบ
+		\end{itemize}
+	\end{itemize}
+	
+	\newpage
+	\item ส่วนของหน้าสมัครสมาชิก
+	\begin{itemize}
+		\item เมื่อผู้ใช้กดปุ่มสมัครสมาชิกระบบจะแสดงหน้าให้กรอกข้อมูลสมัครสมาชิกดังต่อไปนี้
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอสมัครสมาชิก}
+			\caption{หน้าจอสมัครสมาชิก}
+			\label{Fig:หน้าจอสมัครสมาชิก}
+		\end{figure}
+		จากรูปที่ \ref{Fig:หน้าจอสมัครสมาชิก} สามารถอธิบายการใช้งานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้งาน
+			\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน
+			\item หมายเลขที่ 3 ช่องกรอกอีเมล์
+			\item หมายเลขที่ 4 ช่องเลือกเพศ
+			\item หมายเลขที่ 5 ช่องเลือกวัน/เดือน/ปีเกิด
+			\item หมายเลขที่ 6 ช่องเลือกรูปร่าง
+			\item หมายเลขที่ 7 ช่องเลือกสีผิว
+			\item หมายเลขที่ 8 ช่องเลือกกรูปโปร์ไฟล์
+			\item หมายเลขที่ 9 ปุ่มกดสมัครสมาชิก
+			\item หมายเลขที่ 10 ปุ่มกดเข้าสู่ระบบหากทำการสมัครสมาชิกแล้ว
+			\item หมายเลขที่ 11 ปุ่มกลับหน้าหลักของระบบ
+		\end{itemize}
+	\end{itemize}
+				
+	\newpage
+	\item ส่วนของหน้าเข้าสู่ระบบ
+	\begin{itemize}
+		\item เมื่อผู้ใช้สมัครสมาชิกสำเร็จแล้วกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอดังต่อไปนี้
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอเข้าสู่ระบบ}
+			\caption{หน้าจอเข้าสู่ระบบ}
+			\label{Fig:หน้าจอเข้าสู่ระบบ}
+		\end{figure}
+		จากรูปที่ \ref{Fig:หน้าจอเข้าสู่ระบบ} สามารถอธิบายการใช้งานได้ดังนี้
+		\begin{itemize}[label={--}]
+			\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้
+			\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน
+			\item หมายเลขที่ 3 ปุ่มกดเข้าสู่ระบบ
+			\item หมายเลขที่ 4 ปุ่มสมัครสมาชิกสำหรับผู้ที่ยังไม่เป็นสมาชิก 
+		\end{itemize}
+	\end{itemize}			
+	
+		\newpage
+		\item ส่วนของหน้าเพิ่มร้านค้า
+		\begin{itemize}
+			\item เมื่อร้านค้าเข้าสูระบบเรียบร้อยแล้วกดปุ่มเพิ่มร้านค้าตรงชื่อผู้ใช้งาน ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอเพิ่มร้านค้า}
+				\caption{หน้าจอเพิ่มร้านค้า}
+				\label{Fig:หน้าจอเพิ่มร้านค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอเพิ่มร้านค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องกรอกชื่อร้านค้า
+				\item หมายเลขที่ 2 ช่องกรอกที่อยู่ E-mail
+				\item หมายเลขที่ 3 ช่องกรอกที่อยู่ร้านค้า
+				\item หมายเลขที่ 4 ช่องกรอกเบอร์โทรติดต่อ
+				\item หมายเลขที่ 5 ช่องกรอก Facebook
+				\item หมายเลขที่ 6 เลือกรูปโปร์ไฟล์ร้านค้า
+				\item หมายเลขที่ 7 ปุ่มกดเพิ่มร้านค้า ซึ่ง 1 ผู้ใช้จะสามารถเพิ่มร้านค้าได้แค่ 1 ร้าน
+				\item หมายเลขที่ 8 ปุ่มกดกลับไปหน้าข้อมูลร้านค้า
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าข้อมูลร้านค้า
+		\begin{itemize}
+			\item เมื่อร้านค้าทำการเพิ่มข้อมูลร้านค้าสำเร็จแล้วทำการกดที่ชื่อผู้ใช้กดเลือกที่ข้อมูลร้านค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอข้อมูลร้านค้า}
+				\caption{หน้าจอข้อมูลร้านค้า}
+				\label{Fig:หน้าจอข้อมูลร้านค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอข้อมูลร้านค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 การ์ดแสดงข้อมูลร้านค้าจะประกอบไปด้วย ชื่อผู้ใช้งาน ชื่อร้าน ที่อยู่ร้าน เบอร์โทรติดต่อ E-mail Facebook และรูปโปร์ไฟล์ร้านค้า
+				\item หมายเลขที่ 2 ปุ่มกดแก้ไขข้อมูลร้านค้า
+				\item หมายเลขที่ 3 ปุ่มกดจัดการข้อมูลสินค้าในร้าน
+				\item หมายเลขที่ 4 ปุ่มกดดูรายการคนที่ถูกใจสินค้า
+				\item หมายเลขที่ 5 ปุ่มกดดูรายการคนที่ถูกใจร้านค้า
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าแก้ไขข้อมูลร้านค้า
+		\begin{itemize}
+			\item เมื่อร้านค้ากดปุ่มแก้ไขข้อมูลร้านค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอแก้ไขข้อมูลร้านค้า}
+				\caption{หน้าจอแก้ไขข้อมูลร้านค้า}
+				\label{Fig:หน้าจอแก้ไขข้อมูลร้านค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอแก้ไขข้อมูลร้านค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้งาน ซึ่งจะไม่สามารถแก้ไขได้
+				\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน ซึ่งจะไม่สามารถแก้ไขได้
+				\item หมายเลขที่ 3 ช่องแก้ไขชื่อร้านค้า
+				\item หมายเลขที่ 4 ช่องแก้ไขที่อยู่ E-mail
+				\item หมายเลขที่ 5 ช่องแก้ไขที่อยู่ร้านค้า
+				\item หมายเลขที่ 6 ช่องแก้ไขเบอร์โทรติดต่อ
+				\item หมายเลขที่ 7 ช่องแก้ไข Facebook
+				\item หมายเลขที่ 8 ช่องแก้ไขเลือกรูปร้านค้า
+				\item หมายเลขที่ 9 ปุ่มกดบันทึกการแก้ไขข้อมูลร้านค้า
+				\item หมายเลขที่ 10 ปุ่มย้อนกลับไปหน้าข้อมูลร้านค้า
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าจัดการข้อมูลสินค้า
+		\begin{itemize}
+			\item เมื่อร้านค้ากดปุ่มจัดการข้อมูลสินค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอจัดการข้อมูลสินค้า}
+				\caption{หน้าจอจัดการข้อมูลสินค้า}
+				\label{Fig:หน้าจอจัดการข้อมูลสินค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอจัดการข้อมูลสินค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ปุ่มย้อนกลับไปหน้าข้อมูลร้านค้า
+				\item หมายเลขที่ 2 ปุ่มกดเพิ่มสินค้า
+				\item หมายเลขที่ 3 ปุ่มกดแก้ไขสินค้า
+				\item หมายเลขที่ 4 ปุ่มกดลบสินค้า
+				\item หมายเลขที่ 5 ตารางแสดงรายการสินค้า ซึ่งจะประกอบไปด้วย ชื่อร้านค้า ชื่อสินค้า รูปสินค้า ประเภทสินค้า จำนวนสินค้า ขนาดสินค้า สีสินค้า และราคา 
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าเพิ่มสินค้า
+		\begin{itemize}
+			\item เมื่อร้านค้ากดปุ่มเพิ่มสินค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอเพิ่มสินค้า}
+				\caption{หน้าจอเพิ่มสินค้า}
+				\label{Fig:หน้าจอเพิ่มสินค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอเพิ่มสินค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องชื่อร้านค้า ซึ่งไม่สามารถแก้ไขได้
+				\item หมายเลขที่ 2 ช่องกรอกชื่อสินค้า
+				\item หมายเลขที่ 3 ช่องเลือกประเภทสินค้า
+				\item หมายเลขที่ 4 ช่องกรอกจำนวนสินค้า
+				\item หมายเลขที่ 5 ช่องเลือกขนาดสินค้า
+				\item หมายเลขที่ 6 ช่องเลือกสีสินค้า
+				\item หมายเลขที่ 7 ช่องกรอกราคาสินค้า
+				\item หมายเลขที่ 8 ช่องเลือกรูปสินค้า
+				\item หมายเลขที่ 9 ปุ่มบันทึกรายการสินค้า
+				\item หมายเลขที่ 10 ปุ่มย้อนกลับไปหน้าจัดการข้อมูลสินค้า
+			\end{itemize}
+		\end{itemize}
+			
+		\newpage
+		\item ส่วนของหน้าแก้ไขข้อมูลสินค้า
+		 \begin{itemize}
+		 	\item เมื่อร้านค้ากดปุ่มแก้ไขในตารางจัดการข้อมูลสินค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอแก้ไขข้อมูลสินค้า}
+				\caption{หน้าจอแก้ไขข้อมูลสินค้า}
+				\label{Fig:หน้าจอแก้ไขข้อมูลสินค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอแก้ไขข้อมูลสินค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องชื่อร้านค้า ซึ่งไม่สามารถแก้ไขได้
+				\item หมายเลขที่ 2 ช่องกรอกชื่อสินค้า
+				\item หมายเลขที่ 3 ช่องเลือกประเภทสินค้า
+				\item หมายเลขที่ 4 ช่องกรอกจำนวนสินค้า
+				\item หมายเลขที่ 5 ช่องเลือกขนาดสินค้า
+				\item หมายเลขที่ 6 ช่องเลือกสีสินค้า
+				\item หมายเลขที่ 7 ช่องกรอกราคาสินค้า
+				\item หมายเลขที่ 8 ช่องเลือกรูปสินค้า
+				\item หมายเลขที่ 9 ปุ่มบันทึกรายการสินค้า
+				\item หมายเลขที่ 10 ปุ่มย้อนกลับไปหน้าจัดการข้อมูลสินค้า 
+			\end{itemize} 
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้ารายการคนที่ถูกใจเสื้อผ้า
+		\begin{itemize}
+			\item เมื่อร้านค้ากดปุ่มดูรายการคนที่ถูกใจเสื้อผ้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอรายการคนที่ถูกใจเสื้อผ้า}
+				\caption{หน้าจอรายการคนที่ถูกใจเสื้อผ้า}
+				\label{Fig:หน้าจอรายการคนที่ถูกใจเสื้อผ้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอรายการคนที่ถูกใจเสื้อผ้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 รหัสผู้ใช้งานที่ถูกใจเสื้อผ้า
+				\item หมายเลขที่ 2 ชื่อผู้ใช้งานที่ถูกใจเสื้อผ้า
+				\item หมายเลขที่ 3 สินค้าที่ผู้ใช้งานถูกใจ
+				\item หมายเลขที่ 4 ปุ่มย้อนกลับไปหน้าข้อมูลร้านค้า
+			\end{itemize} 
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้ารายการคนที่ถูกใจร้านค้า
+		\begin{itemize}
+			\item เมื่อร้านค้ากดปุ่มดูรายการคนที่ถูกใจร้านค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอรายการคนที่ถูกใจร้านค้า}
+				\caption{หน้าจอรายการคนที่ถูกใจร้านค้า}
+				\label{Fig:หน้าจอรายการคนที่ถูกใจร้านค้า}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอรายการคนที่ถูกใจร้านค้า} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 รหัสผู้ใช้งานที่ถูกใจร้านค้า
+				\item หมายเลขที่ 2 ชื่อผู้ใช้งานที่ถูกใจร้านค้า
+				\item หมายเลขที่ 3 ชื่อร้านค้าที่ผู้ใช้งานถูกใจ
+				\item หมายเลขที่ 4 ปุ่มย้อนกลับไปหน้าข้อมูลร้านค้า
+			\end{itemize} 
+		\end{itemize}	
+	\end{enumerate}	
+
+\newpage
+\section{ส่วนผู้ดูแลระบบ}
+	\begin{enumerate}[label=\arabic*.]
+		\item ส่วนของหน้าเข้าสู่ระบบสำหรับผู้ดูแลระบบในฐานข้อมูล
+		\begin{itemize}
+			\item เมื่อผู้ดูแลทำการสมัครสมาชิกเสร็จเรียบร้อยแล้วทำการเข้าสู่ระบบ ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอเข้าสู่ระบบสำหรับผู้ดูแลระบบในฐานข้อมูล}
+				\caption{หน้าจอเข้าสู่ระบบสำหรับผู้ดูแลระบบในฐานข้อมูล}
+				\label{Fig:หน้าจอเข้าสู่ระบบสำหรับผู้ดูแลระบบในฐานข้อมูล}
+			\end{figure}
+			จากรูปที่ \ref{Fig:หน้าจอเข้าสู่ระบบสำหรับผู้ดูแลระบบในฐานข้อมูล} สามารถอธิบายการใช้งานได้ดังนี้
+			\begin{itemize}[label={--}]
+				\item หมายเลขที่ 1 ช่องกรอกชื่อผู้ใช้
+				\item หมายเลขที่ 2 ช่องกรอกรหัสผ่าน
+				\item หมายเลขที่ 3 ปุ่มกดเข้าสู่ระบบ
+			\end{itemize}
+		\end{itemize}
+		
+		\newpage
+		\item ส่วนของหน้าตารางฐานข้อมูลทั้งหมด
+		\begin{itemize}
+			\item เมื่อผู้ดูแลระบบเข้าสูระบบเรียบร้อยแล้ว โดยในที่นี้จะยกตัวอย่างข้อมูลเพียงแค่ในส่วนของ ผู้ใช้งานและร้านค้า ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอหน้าตารางฐานข้อมูลทั้งหมด}
+				\caption{หน้าจอหน้าตารางฐานข้อมูลทั้งหมด}
+				\label{Fig:หน้าจอหน้าตารางฐานข้อมูลทั้งหมด}
+			\end{figure}
+		\end{itemize}
+	
+		\newpage
+		\item ส่วนของหน้าจอตารางข้อมูลผู้ใช้งานทั้งหมด
+		\begin{itemize}
+			\item เมื่อผู้ดูแลระบบกดปุ่ม Users ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอตารางข้อมูลผู้ใช้งานทั้งหมด}
+				\caption{หน้าจอตารางข้อมูลผู้ใช้งานทั้งหมด}
+				\label{Fig:หน้าจอตารางข้อมูลผู้ใช้งานทั้งหมด}
+			\end{figure}
+		\item เมื่อผู้ใช้กดที่ชื่อผู้ใช้งานระบบจะแสดงหน้าจอดังต่อไปนี้
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/ผู้ดูแลระบบจะสามารถเพิ่ม ลบ และแก้ไขผู้ใช้งาน}
+			\caption{หน้าจอแสดงข้อมูลผู้ใช้งาน ซึ่งผู้ดูแลระบบจะสามารถเพิ่ม ลบ และแก้ไขผู้ใช้งานได้}
+			\label{Fig:ผู้ดูแลระบบจะสามารถเพิ่ม ลบ และแก้ไขผู้ใช้งาน}
+		\end{figure}
+		\end{itemize}
+				
+		\newpage
+		\item ส่วนของหน้าจอตารางข้อมูลร้านค้าทั้งหมด
+		\begin{itemize}
+			\item เมื่อผู้ดูแลระบบกดปุ่ม Stores ระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/หน้าจอแสดงข้อมูลร้านค้าทั้งหมด}
+				\caption{หน้าจอแสดงข้อมูลร้านค้าทั้งหมด}
+				\label{Fig:หน้าจอแสดงข้อมูลร้านค้าทั้งหมด}
+			\end{figure}
+				\item เมื่อผู้ใช้กดที่ชื่อร้านค้าระบบจะแสดงหน้าจอดังต่อไปนี้
+			\begin{figure}[H]
+				\centering
+				\includegraphics[width=1.0\columnwidth]{Figures/7/Manual/ผู้ดูแลระบบจะสามารถเพิ่ม ลบ และแก้ไขร้านค้า}
+				\caption{หน้าจอแสดงข้อมูลร้านค้า ซึ่งผู้ดูแลระบบจะสามารถเพิ่ม ลบ และแก้ไขร้านค้าได้}
+				\label{Fig:ผู้ดูแลระบบจะสามารถเพิ่ม ลบ และแก้ไขร้านค้า}
+			\end{figure}
+		\end{itemize}
+	\end{enumerate}
+
+		
+		
+
+

Documents/Latex/biography.tex

+{\setstretch{1.0}\begin{biography}
+\justify
+ชื่อ-สกุล: นางสาวนฤมล โมคภา \\
+รหัสประจำตัวนักศึกษา: 59110440204\\
+วัดเกิด: 2 พฤศจิกายน 2540\\
+ที่อยู่ที่สามารถติดต่อได้: 49 ม.1 ต.หัวช้าง อ.สุวรรณภูมิ จ.ร้อยเอ็ด 45130\\
+เบอร์โทรศัพท์: (+66) 88 026 8694\\
+อิเมลล์: narumon.mo.59@ubu.ac.th\\
+ระดับมัธยมต้น: โรงเรียนบ้านห้างหว้า คุรุรัฐประชาสรรค์ จังหวัด ร้อยเอ็ด \\
+ระดับมัธยมปลาย: โรงเรียนสุวรรณภูมิวิทยาลัย จังหวัด ร้อยเอ็ด\\
+ระดับอุดมศึกษา: ภาควิชาคณิตศาสตร์ สถิติ และคอมพิวเตอร์ สาขาวิทยาการ คอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี
+\end{biography}}
+

Documents/Latex/chulanat.bst

+%% File: `chulanat.bst'
+%% A modification of `plainnat.bst' for use with natbib package
+%%
+%% Author: Supasate Choochaisri
+%%   - modify to handle various Chula reference formats.
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% Changelog
+%% July 6, 2015
+%%  - add "" to format.article.pages to prevent empty pop
+%% Copyright of `plainnat.bst' 1993-2007 Patrick W Daly
+%% Max-Planck-Institut f\"ur Sonnensystemforschung
+%% Max-Planck-Str. 2
+%% D-37191 Katlenburg-Lindau
+%% Germany
+%% E-mail: daly@mps.mpg.de
+%%
+%% This program can be redistributed and/or modified under the terms
+%% of the LaTeX Project Public License Distributed from CTAN
+%% archives in directory macros/latex/base/lppl.txt; either
+%% version 1 of the License, or any later version.
+%%
+ % Version and source file information:
+ % \ProvidesFile{natbst.mbs}[2007/02/19 1.92 (PWD)]
+ %
+ % BibTeX `plainnat' family
+ %   version 0.99b for BibTeX versions 0.99a or later,
+ %   for LaTeX versions 2.09 and 2e.
+ %
+ % For use with the `natbib.sty' package; emulates the corresponding
+ %   member of the `plain' family, but with author-year citations.
+ %
+ % With version 6.0 of `natbib.sty', it may also be used for numerical
+ %   citations, while retaining the commands \citeauthor, \citefullauthor,
+ %   and \citeyear to print the corresponding information.
+ %
+ % For version 7.0 of `natbib.sty', the KEY field replaces missing
+ %   authors/editors, and the date is left blank in \bibitem.
+ %
+ % Includes field EID for the sequence/citation number of electronic journals
+ %  which is used instead of page numbers.
+ %
+ % Includes fields ISBN and ISSN.
+ %
+ % Includes field URL for Internet addresses.
+ %
+ % Includes field DOI for Digital Object Idenfifiers.
+ %
+ % Works best with the url.sty package of Donald Arseneau.
+ %
+ % Works with identical authors and year are further sorted by
+ %   citation key, to preserve any natural sequence.
+ %
+ENTRY
+  { address
+    author
+    booktitle
+    chapter
+    doi
+    eid
+    edition
+    editor
+    howpublished
+    institution
+    isbn
+    issn
+    journal
+    key
+    month
+    note
+    number
+    organization
+    pages
+    publisher
+    school
+    series
+    title
+    type
+    url
+    volume
+    year
+    day
+  }
+  {}
+  { label extra.label sort.label short.list }
+
+INTEGERS { output.state before.all mid.sentence after.sentence after.block }
+
+FUNCTION {init.state.consts}
+{ #0 'before.all :=
+  #1 'mid.sentence :=
+  #2 'after.sentence :=
+  #3 'after.block :=
+}
+
+STRINGS { s t }
+
+FUNCTION {output.nonnull}
+{ 's :=
+  output.state mid.sentence =
+    { ", " * write$ }
+    { output.state after.block =
+        { add.period$ write$
+          newline$
+          "\newblock " write$
+        }
+        { output.state before.all =
+            'write$
+            { add.period$ " " * write$ }
+          if$
+        }
+      if$
+      mid.sentence 'output.state :=
+    }
+  if$
+  s
+}
+
+FUNCTION {output}
+{ duplicate$ empty$
+    'pop$
+    'output.nonnull
+  if$
+}
+
+FUNCTION {output.check}
+{ 't :=
+  duplicate$ empty$
+    { pop$ "empty " t * " in " * cite$ * warning$ }
+    'output.nonnull
+  if$
+}
+
+FUNCTION {fin.entry}
+{ add.period$
+  write$
+  newline$
+}
+
+FUNCTION {new.block}
+{ output.state before.all =
+    'skip$
+    { after.block 'output.state := }
+  if$
+}
+
+FUNCTION {new.sentence}
+{ output.state after.block =
+    'skip$
+    { output.state before.all =
+        'skip$
+        { after.sentence 'output.state := }
+      if$
+    }
+  if$
+}
+
+FUNCTION {not}
+{   { #0 }
+    { #1 }
+  if$
+}
+
+FUNCTION {and}
+{   'skip$
+    { pop$ #0 }
+  if$
+}
+
+FUNCTION {or}
+{   { pop$ #1 }
+    'skip$
+  if$
+}
+
+FUNCTION {new.block.checka}
+{ empty$
+    'skip$
+    'new.block
+  if$
+}
+
+FUNCTION {new.block.checkb}
+{ empty$
+  swap$ empty$
+  and
+    'skip$
+    'new.block
+  if$
+}
+
+FUNCTION {new.sentence.checka}
+{ empty$
+    'skip$
+    'new.sentence
+  if$
+}
+
+FUNCTION {new.sentence.checkb}
+{ empty$
+  swap$ empty$
+  and
+    'skip$
+    'new.sentence
+  if$
+}
+
+FUNCTION {field.or.null}
+{ duplicate$ empty$
+    { pop$ "" }
+    'skip$
+  if$
+}
+
+FUNCTION {emphasize}
+{ duplicate$ empty$
+    { pop$ "" }
+    { "\emph{" swap$ * "}" * }
+  if$
+}
+
+INTEGERS { nameptr namesleft numnames }
+
+FUNCTION {format.names}
+{ 's :=
+  #1 'nameptr :=
+  s num.names$ 'numnames :=
+  numnames 'namesleft :=
+    { namesleft #0 > }
+    { s nameptr "{vv~}{ll}{, f.}{, jj.}" format.name$ 't :=
+      nameptr #1 >
+        { namesleft #1 >
+            { ", " * t * }
+            { numnames #2 >
+                { "," * }
+                'skip$
+              if$
+              t "others" =
+                { " et~al." * }
+                { " and " * t * }
+              if$
+            }
+          if$
+        }
+        't
+      if$
+      nameptr #1 + 'nameptr :=
+      namesleft #1 - 'namesleft :=
+    }
+  while$
+}
+
+FUNCTION {format.key}
+{ empty$
+    { key field.or.null }
+    { "" }
+  if$
+}
+
+FUNCTION {format.authors}
+{ author empty$
+    { "" }
+    { author format.names }
+  if$
+}
+
+FUNCTION {format.editors}
+{ editor empty$
+    { "" }
+    { editor format.names
+      editor num.names$ #1 >
+        { " (ed.)" * }
+        { " (ed.)" * }
+      if$
+    }
+  if$
+}
+
+FUNCTION {format.isbn}
+{ isbn empty$
+    { "" }
+    { new.block "ISBN " isbn * }
+  if$
+}
+
+FUNCTION {format.issn}
+{ issn empty$
+    { "" }
+    { new.block "ISSN " issn * }
+  if$
+}
+
+FUNCTION {format.url}
+{ url empty$
+    { "" }
+    { new.block "จาก " url * " " * }
+  if$
+}
+
+FUNCTION {format.doi}
+{ doi empty$
+    { "" }
+    { new.block "\doi{" doi * "}" * }
+  if$
+}
+
+FUNCTION {format.title}
+{ title empty$
+    { "" }
+    { title "t" change.case$ }
+  if$
+}
+
+FUNCTION {format.full.names}
+{'s :=
+  #1 'nameptr :=
+  s num.names$ 'numnames :=
+  numnames 'namesleft :=
+    { namesleft #0 > }
+    { s nameptr
+      "{vv~}{ll}" format.name$ 't :=
+      nameptr #1 >
+        {
+          namesleft #1 >
+            { ", " * t * }
+            {
+              numnames #2 >
+                { "," * }
+                'skip$
+              if$
+              t "others" =
+                { " et~al." * }
+                { " and " * t * }
+              if$
+            }
+          if$
+        }
+        't
+      if$
+      nameptr #1 + 'nameptr :=
+      namesleft #1 - 'namesleft :=
+    }
+  while$
+}
+
+FUNCTION {author.editor.full}
+{ author empty$
+    { editor empty$
+        { "" }
+        { editor format.full.names }
+      if$
+    }
+    { author format.full.names }
+  if$
+}
+
+FUNCTION {author.full}
+{ author empty$
+    { "" }
+    { author format.full.names }
+  if$
+}
+
+FUNCTION {editor.full}
+{ editor empty$
+    { "" }
+    { editor format.full.names }
+  if$
+}
+
+FUNCTION {make.full.names}
+{ type$ "book" =
+  type$ "inbook" =
+  or
+    'author.editor.full
+    { type$ "proceedings" =
+        'editor.full
+        'author.full
+      if$
+    }
+  if$
+}
+
+FUNCTION {output.bibitem}
+{ newline$
+  "\bibitem[" write$
+  label write$
+  ")" make.full.names duplicate$ short.list =
+     { pop$ }
+     { * }
+   if$
+  "]{" * write$
+  cite$ write$
+  "}" write$
+  newline$
+  ""
+  before.all 'output.state :=
+}
+
+FUNCTION {n.dashify}
+{ 't :=
+  ""
+    { t empty$ not }
+    { t #1 #1 substring$ "-" =
+        { t #1 #2 substring$ "--" = not
+            { "--" *
+              t #2 global.max$ substring$ 't :=
+            }
+            {   { t #1 #1 substring$ "-" = }
+                { "-" *
+                  t #2 global.max$ substring$ 't :=
+                }
+              while$
+            }
+          if$
+        }
+        { t #1 #1 substring$ *
+          t #2 global.max$ substring$ 't :=
+        }
+      if$
+    }
+  while$
+}
+
+FUNCTION {format.date}
+{ year duplicate$ empty$
+    { "empty year in " cite$ * warning$
+       pop$ "" }
+    'skip$
+  if$
+  month empty$
+    'skip$
+    { month
+      " " * swap$ *
+    }
+  if$
+  extra.label *
+}
+
+FUNCTION {format.year}
+{ year duplicate$ empty$
+    { "empty year in " cite$ * warning$
+       pop$ "" }
+    'skip$
+  if$
+  extra.label *
+}
+
+
+FUNCTION {format.btitle}
+{ title emphasize
+}
+
+FUNCTION {tie.or.space.connect}
+{ duplicate$ text.length$ #3 <
+    { "~" }
+    { " " }
+  if$
+  swap$ * *
+}
+
+FUNCTION {either.or.check}
+{ empty$
+    'pop$
+    { "can't use both " swap$ * " fields in " * cite$ * warning$ }
+  if$
+}
+
+FUNCTION {format.bvolume}
+{ volume empty$
+    { "" }
+    { "volume" volume tie.or.space.connect
+      series empty$
+        'skip$
+        { " of " * series emphasize * }
+      if$
+      "volume and number" number either.or.check
+    }
+  if$
+}
+
+FUNCTION {format.number.series}
+{ volume empty$
+    { number empty$
+        { series field.or.null }
+        { output.state mid.sentence =
+            { "number" }
+            { "Number" }
+          if$
+          number tie.or.space.connect
+          series empty$
+            { "there's a number but no series in " cite$ * warning$ }
+            { " in " * series * }
+          if$
+        }
+      if$
+    }
+    { "" }
+  if$
+}
+
+FUNCTION {format.edition}
+{ edition empty$
+    { "" }
+    { output.state mid.sentence =
+        { edition "l" change.case$ " edition" * }
+        { edition "t" change.case$ " edition" * }
+      if$
+    }
+  if$
+}
+
+INTEGERS { multiresult }
+
+FUNCTION {multi.page.check}
+{ 't :=
+  #0 'multiresult :=
+    { multiresult not
+      t empty$ not
+      and
+    }
+    { t #1 #1 substring$
+      duplicate$ "-" =
+      swap$ duplicate$ "," =
+      swap$ "+" =
+      or or
+        { #1 'multiresult := }
+        { t #2 global.max$ substring$ 't := }
+      if$
+    }
+  while$
+  multiresult
+}
+
+
+FUNCTION {format.pages}
+{ pages empty$
+    { "" }
+    { pages multi.page.check
+        { "pp." pages n.dashify tie.or.space.connect }
+        { "p." pages tie.or.space.connect }
+      if$
+    }
+  if$
+}
+
+FUNCTION {format.eid}
+{ eid empty$
+    { "" }
+    { "art." eid tie.or.space.connect }
+  if$
+}
+
+FUNCTION {format.vol.num.pages}
+{ volume field.or.null
+  number empty$
+    'skip$
+    { "\penalty0 ," number * "" * *
+      volume empty$
+        { "there's a number but no volume in " cite$ * warning$ }
+        'skip$
+      if$
+    }
+  if$
+  pages empty$
+    'skip$
+    { duplicate$ empty$
+        { pop$ format.pages }
+        { ":\penalty0 " * pages n.dashify * }
+      if$
+    }
+  if$
+}
+
+FUNCTION {format.vol.num.eid}
+{ volume field.or.null
+  number empty$
+    'skip$
+    { "\penalty0 ," number * "" * *
+      volume empty$
+        { "there's a number but no volume in " cite$ * warning$ }
+        'skip$
+      if$
+    }
+  if$
+  eid empty$
+    'skip$
+    { duplicate$ empty$
+        { pop$ format.eid }
+        { ":\penalty0 " * eid * }
+      if$
+    }
+  if$
+}
+
+FUNCTION {format.chapter.pages}
+{ chapter empty$
+    'format.pages
+    { type empty$
+        { "chapter" }
+        { type "l" change.case$ }
+      if$
+      chapter tie.or.space.connect
+      pages empty$
+        'skip$
+        { ", " * format.pages * }
+      if$
+    }
+  if$
+}
+
+FUNCTION {format.in.ed.booktitle}
+{ booktitle empty$
+    { "" }
+    { editor empty$
+        { "In " booktitle emphasize * }
+        { "In " format.editors * ", " * booktitle emphasize * }
+      if$
+    }
+  if$
+}
+
+FUNCTION {empty.misc.check}
+{ author empty$ title empty$ howpublished empty$
+  month empty$ year empty$ note empty$
+  and and and and and
+  key empty$ not and
+    { "all relevant fields are empty in " cite$ * warning$ }
+    'skip$
+  if$
+}
+
+FUNCTION {format.thesis.type}
+{ type empty$
+    'skip$
+    { pop$
+      type "t" change.case$
+    }
+  if$
+}
+
+FUNCTION {format.tr.number}
+{ type empty$
+    { "Technical Report" }
+    'type
+  if$
+  number empty$
+    { "t" change.case$ }
+    { number tie.or.space.connect }
+  if$
+}
+
+FUNCTION {format.article.pages}
+{ pages empty$
+    { "" }
+    { pages multi.page.check
+        {"" pages n.dashify tie.or.space.connect }
+        {"" pages tie.or.space.connect }
+      if$
+    }
+  if$
+}
+
+FUNCTION {format.article.crossref}
+{ key empty$
+    { journal empty$
+        { "need key or journal for " cite$ * " to crossref " * crossref *
+          warning$
+          ""
+        }
+        { "In \emph{" journal * "}" * }
+      if$
+    }
+    { "In " }
+  if$
+  " \citet{" * crossref * "}" *
+}
+
+FUNCTION {format.book.crossref}
+{ volume empty$
+    { "empty volume in " cite$ * "'s crossref of " * crossref * warning$
+      "In "
+    }
+    { "Volume" volume tie.or.space.connect
+      " of " *
+    }
+  if$
+  editor empty$
+  editor field.or.null author field.or.null =
+  or
+    { key empty$
+        { series empty$
+            { "need editor, key, or series for " cite$ * " to crossref " *
+              crossref * warning$
+              "" *
+            }
+            { "\emph{" * series * "}" * }
+          if$
+        }
+        'skip$
+      if$
+    }
+    'skip$
+  if$
+  " \citet{" * crossref * "}" *
+}
+
+FUNCTION {format.incoll.inproc.crossref}
+{ editor empty$
+  editor field.or.null author field.or.null =
+  or
+    { key empty$
+        { booktitle empty$
+            { "need editor, key, or booktitle for " cite$ * " to crossref " *
+              crossref * warning$
+              ""
+            }
+            { "In \emph{" booktitle * "}" * }
+          if$
+        }
+        { "In " }
+      if$
+    }
+    { "In " }
+  if$
+  " \citet{" * crossref * "}" *
+}
+
+FUNCTION {article}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.year "year" output.check
+  new.block
+  format.title "title" output.check
+  write$ ". "
+  new.block
+  write$ journal emphasize " " *
+  write$ volume
+  number empty$
+     { }
+     { write$ "."
+       write$ number
+     }
+  if$
+  write$ " ("
+  month empty$
+     { }
+     { write$ month
+       write$ " "
+     }
+  if$
+  write$ year
+  write$ "):"
+  write$ ""
+  format.article.pages output
+  fin.entry
+}
+
+FUNCTION {book}
+{ output.bibitem
+  author empty$
+    { format.editors "author and editor" output.check
+      editor format.key output
+    }
+    { format.authors output.nonnull
+      crossref missing$
+        { "author and editor" editor either.or.check }
+        'skip$
+      if$
+    }
+  if$
+  new.block
+  format.year "year" output.check
+  new.block
+  format.btitle "title" output.check
+  crossref missing$
+    { format.bvolume output
+      new.block
+      format.number.series output
+      new.sentence
+      publisher "publisher" output.check
+      address output
+    }
+    { new.block
+      format.book.crossref output.nonnull
+    }
+  if$
+  format.edition output
+  format.isbn output
+  format.doi output
+  format.url output
+  new.block
+  note output
+  fin.entry
+}
+
+FUNCTION {booklet}
+{ output.bibitem
+  format.authors output
+  author format.key output
+  new.block
+  format.title "title" output.check
+  howpublished address new.block.checkb
+  howpublished output
+  address output
+  format.date output
+  format.isbn output
+  format.doi output
+  format.url output
+  new.block
+  note output
+  fin.entry
+}
+
+FUNCTION {inbook}
+{ output.bibitem
+  author empty$
+    { format.editors "author and editor" output.check
+      editor format.key output
+    }
+    { format.authors output.nonnull
+      crossref missing$
+        { "author and editor" editor either.or.check }
+        'skip$
+      if$
+    }
+  if$
+  new.block
+  format.year "year" output.check
+  new.block
+  format.btitle "title" output.check
+  crossref missing$
+    { format.bvolume output
+      format.chapter.pages "chapter and pages" output.check
+      new.block
+      format.number.series output
+      new.sentence
+      publisher "publisher" output.check
+      address output
+    }
+    { format.chapter.pages "chapter and pages" output.check
+      new.block
+      format.book.crossref output.nonnull
+    }
+  if$
+  format.edition output
+  format.isbn output
+  format.doi output
+  format.url output
+  new.block
+  note output
+  fin.entry
+}
+
+FUNCTION {incollection}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.year "year" output.check
+  new.block
+  format.title "title" output.check
+  new.block
+  crossref missing$
+    { format.in.ed.booktitle "booktitle" output.check
+      format.bvolume output
+      format.number.series output
+      format.chapter.pages output
+      write$ ". "
+      new.block
+      write$ address
+      write$ ": "
+      write$ publisher
+      format.edition output
+    }
+    { format.incoll.inproc.crossref output.nonnull
+      format.chapter.pages output
+    }
+  if$
+  fin.entry
+}
+
+FUNCTION {inproceedings}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.year "year" output.check
+  new.block
+  format.title "title" output.check
+  new.block
+  crossref missing$
+    { format.in.ed.booktitle "booktitle" output.check
+      format.bvolume output
+      format.number.series output
+      format.pages output
+    }
+    { format.incoll.inproc.crossref output.nonnull
+      format.pages output
+    }
+  if$
+  write$ ". "
+  new.block
+  write$ address
+  write$ ": "
+  write$ publisher
+  fin.entry
+}
+
+FUNCTION {conference} { inproceedings }
+
+FUNCTION {manual}
+{ output.bibitem
+  format.authors output
+  author format.key output
+  new.block
+  format.year output
+  new.block
+  format.btitle "title" output.check
+  organization address new.block.checkb
+  organization output
+  address output
+  format.edition output
+  format.url output
+  fin.entry
+}
+
+FUNCTION {mastersthesis}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.year "year" output.check
+  new.block
+  format.title "title" output.check
+  new.block
+  "Master's thesis" format.thesis.type output.nonnull
+  school "school" output.check
+  address output
+  format.url output
+  fin.entry
+}
+
+FUNCTION {misc}
+{ output.bibitem
+  format.authors output
+  author format.key output
+  title howpublished new.block.checkb
+  new.block
+  write$ " "
+  write$ "("
+  write$ year
+  write$ ")"
+  format.title output
+  howpublished new.block.checka
+  howpublished output
+  new.block
+  url empty$
+     { }
+     { write$ " [ออนไลน์]. "
+       write$ "สืบค้นเมื่อ "
+       write$ note
+     }
+  if$
+  new.block
+  format.url output
+
+  fin.entry
+  empty.misc.check
+}
+
+FUNCTION {phdthesis}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.year "year" output.check
+  new.block
+  format.btitle "title" output.check
+  new.block
+  "PhD thesis" format.thesis.type output.nonnull
+  school "school" output.check
+  address output
+  format.url output
+  fin.entry
+}
+
+FUNCTION {proceedings}
+{ output.bibitem
+  format.editors output
+  editor format.key output
+  new.block
+  format.year "year" output.check
+  format.btitle "title" output.check
+  format.bvolume output
+  format.number.series output
+  address output
+  new.sentence
+  organization output
+  publisher output
+  format.isbn output
+  format.doi output
+  format.url output
+  fin.entry
+}
+
+FUNCTION {techreport}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.year "year" output.check
+  new.block
+  format.title "title" output.check
+  new.block
+  format.tr.number output.nonnull
+  institution "institution" output.check
+  address output
+  fin.entry
+}
+
+FUNCTION {unpublished}
+{ output.bibitem
+  format.authors "author" output.check
+  author format.key output
+  new.block
+  format.title "title" output.check
+  format.date output
+  format.url output
+  fin.entry
+}
+
+FUNCTION {internet}
+{ output.bibitem
+  title howpublished new.block.checkb
+  format.title output
+  howpublished new.block.checka
+  howpublished output
+  new.block
+  url empty$
+     { }
+     { write$ " [ออนไลน์]. "
+       write$ "สืบค้นเมื่อ "
+       write$ day
+       write$ " "
+       write$ month
+       write$ " "
+       write$ year
+     }
+  if$
+  new.block
+  format.url output
+  fin.entry
+}
+
+FUNCTION {default.type} { misc }
+
+
+MACRO {jan} {"January"}
+
+MACRO {feb} {"February"}
+
+MACRO {mar} {"March"}
+
+MACRO {apr} {"April"}
+
+MACRO {may} {"May"}
+
+MACRO {jun} {"June"}
+
+MACRO {jul} {"July"}
+
+MACRO {aug} {"August"}
+
+MACRO {sep} {"September"}
+
+MACRO {oct} {"October"}
+
+MACRO {nov} {"November"}
+
+MACRO {dec} {"December"}
+
+
+
+MACRO {acmcs} {"ACM Computing Surveys"}
+
+MACRO {acta} {"Acta Informatica"}
+
+MACRO {cacm} {"Communications of the ACM"}
+
+MACRO {ibmjrd} {"IBM Journal of Research and Development"}
+
+MACRO {ibmsj} {"IBM Systems Journal"}
+
+MACRO {ieeese} {"IEEE Transactions on Software Engineering"}
+
+MACRO {ieeetc} {"IEEE Transactions on Computers"}
+
+MACRO {ieeetcad}
+ {"IEEE Transactions on Computer-Aided Design of Integrated Circuits"}
+
+MACRO {ipl} {"Information Processing Letters"}
+
+MACRO {jacm} {"Journal of the ACM"}
+
+MACRO {jcss} {"Journal of Computer and System Sciences"}
+
+MACRO {scp} {"Science of Computer Programming"}
+
+MACRO {sicomp} {"SIAM Journal on Computing"}
+
+MACRO {tocs} {"ACM Transactions on Computer Systems"}
+
+MACRO {tods} {"ACM Transactions on Database Systems"}
+
+MACRO {tog} {"ACM Transactions on Graphics"}
+
+MACRO {toms} {"ACM Transactions on Mathematical Software"}
+
+MACRO {toois} {"ACM Transactions on Office Information Systems"}
+
+MACRO {toplas} {"ACM Transactions on Programming Languages and Systems"}
+
+MACRO {tcs} {"Theoretical Computer Science"}
+
+
+READ
+
+FUNCTION {sortify}
+{ purify$
+  "l" change.case$
+}
+
+INTEGERS { len }
+
+FUNCTION {chop.word}
+{ 's :=
+  'len :=
+  s #1 len substring$ =
+    { s len #1 + global.max$ substring$ }
+    's
+  if$
+}
+
+FUNCTION {format.lab.names}
+{ 's :=
+  s #1 "{vv~}{ll}" format.name$
+  s num.names$ duplicate$
+  #2 >
+    { pop$ " et~al." * }
+    { #2 <
+        'skip$
+        { s #2 "{ff }{vv }{ll}{ jj}" format.name$ "others" =
+            { " et~al." * }
+            { " and " * s #2 "{vv~}{ll}" format.name$ * }
+          if$
+        }
+      if$
+    }
+  if$
+}
+
+FUNCTION {author.key.label}
+{ author empty$
+    { key empty$
+        { cite$ #1 #3 substring$ }
+        'key
+      if$
+    }
+    { author format.lab.names }
+  if$
+}
+
+FUNCTION {author.editor.key.label}
+{ author empty$
+    { editor empty$
+        { key empty$
+            { cite$ #1 #3 substring$ }
+            'key
+          if$
+        }
+        { editor format.lab.names }
+      if$
+    }
+    { author format.lab.names }
+  if$
+}
+
+FUNCTION {author.key.organization.label}
+{ author empty$
+    { key empty$
+        { organization empty$
+            { cite$ #1 #3 substring$ }
+            { "The " #4 organization chop.word #3 text.prefix$ }
+          if$
+        }
+        'key
+      if$
+    }
+    { author format.lab.names }
+  if$
+}
+
+FUNCTION {editor.key.organization.label}
+{ editor empty$
+    { key empty$
+        { organization empty$
+            { cite$ #1 #3 substring$ }
+            { "The " #4 organization chop.word #3 text.prefix$ }
+          if$
+        }
+        'key
+      if$
+    }
+    { editor format.lab.names }
+  if$
+}
+
+FUNCTION {calc.short.authors}
+{ type$ "book" =
+  type$ "inbook" =
+  or
+    'author.editor.key.label
+    { type$ "proceedings" =
+        'editor.key.organization.label
+        { type$ "manual" =
+            'author.key.organization.label
+            'author.key.label
+          if$
+        }
+      if$
+    }
+  if$
+  'short.list :=
+}
+
+FUNCTION {calc.label}
+{ calc.short.authors
+  short.list
+  "("
+  *
+  year duplicate$ empty$
+  short.list key field.or.null = or
+     { pop$ "" }
+     'skip$
+  if$
+  *
+  'label :=
+}
+
+FUNCTION {sort.format.names}
+{ 's :=
+  #1 'nameptr :=
+  ""
+  s num.names$ 'numnames :=
+  numnames 'namesleft :=
+    { namesleft #0 > }
+    {
+      s nameptr "{vv{ } }{ll{ }}{  ff{ }}{  jj{ }}" format.name$ 't :=
+      nameptr #1 >
+        {
+          "   "  *
+          namesleft #1 = t "others" = and
+            { "zzzzz" * }
+            { numnames #2 > nameptr #2 = and
+                { "zz" * year field.or.null * "   " * }
+                'skip$
+              if$
+              t sortify *
+            }
+          if$
+        }
+        { t sortify * }
+      if$
+      nameptr #1 + 'nameptr :=
+      namesleft #1 - 'namesleft :=
+    }
+  while$
+}
+
+FUNCTION {sort.format.title}
+{ 't :=
+  "A " #2
+    "An " #3
+      "The " #4 t chop.word
+    chop.word
+  chop.word
+  sortify
+  #1 global.max$ substring$
+}
+
+FUNCTION {author.sort}
+{ author empty$
+    { key empty$
+        { "to sort, need author or key in " cite$ * warning$
+          ""
+        }
+        { key sortify }
+      if$
+    }
+    { author sort.format.names }
+  if$
+}
+
+FUNCTION {author.editor.sort}
+{ author empty$
+    { editor empty$
+        { key empty$
+            { "to sort, need author, editor, or key in " cite$ * warning$
+              ""
+            }
+            { key sortify }
+          if$
+        }
+        { editor sort.format.names }
+      if$
+    }
+    { author sort.format.names }
+  if$
+}
+
+FUNCTION {author.organization.sort}
+{ author empty$
+    { organization empty$
+        { key empty$
+            { "to sort, need author, organization, or key in " cite$ * warning$
+              ""
+            }
+            { key sortify }
+          if$
+        }
+        { "The " #4 organization chop.word sortify }
+      if$
+    }
+    { author sort.format.names }
+  if$
+}
+
+FUNCTION {editor.organization.sort}
+{ editor empty$
+    { organization empty$
+        { key empty$
+            { "to sort, need editor, organization, or key in " cite$ * warning$
+              ""
+            }
+            { key sortify }
+          if$
+        }
+        { "The " #4 organization chop.word sortify }
+      if$
+    }
+    { editor sort.format.names }
+  if$
+}
+
+
+FUNCTION {presort}
+{ calc.label
+  label sortify
+  "    "
+  *
+  type$ "book" =
+  type$ "inbook" =
+  or
+    'author.editor.sort
+    { type$ "proceedings" =
+        'editor.organization.sort
+        { type$ "manual" =
+            'author.organization.sort
+            'author.sort
+          if$
+        }
+      if$
+    }
+  if$
+  "    "
+  *
+  cite$
+  *
+  #1 entry.max$ substring$
+  'sort.label :=
+  sort.label *
+  #1 entry.max$ substring$
+  'sort.key$ :=
+}
+
+ITERATE {presort}
+
+%SORT
+
+STRINGS { longest.label last.label next.extra }
+
+INTEGERS { longest.label.width last.extra.num number.label }
+
+FUNCTION {initialize.longest.label}
+{ "" 'longest.label :=
+  #0 int.to.chr$ 'last.label :=
+  "" 'next.extra :=
+  #0 'longest.label.width :=
+  #0 'last.extra.num :=
+  #0 'number.label :=
+}
+
+FUNCTION {forward.pass}
+{ last.label label =
+    { last.extra.num #1 + 'last.extra.num :=
+      last.extra.num int.to.chr$ 'extra.label :=
+    }
+    { "a" chr.to.int$ 'last.extra.num :=
+      "" 'extra.label :=
+      label 'last.label :=
+    }
+  if$
+  number.label #1 + 'number.label :=
+}
+
+FUNCTION {reverse.pass}
+{ next.extra "b" =
+    { "a" 'extra.label := }
+    'skip$
+  if$
+  extra.label 'next.extra :=
+  extra.label
+  duplicate$ empty$
+    'skip$
+    { "{\natexlab{" swap$ * "}}" * }
+  if$
+  'extra.label :=
+  label extra.label * 'label :=
+}
+
+EXECUTE {initialize.longest.label}
+
+ITERATE {forward.pass}
+
+REVERSE {reverse.pass}
+
+FUNCTION {bib.sort.order}
+{ sort.label  'sort.key$ :=
+}
+
+%ITERATE {bib.sort.order}
+
+%SORT
+
+FUNCTION {begin.bib}
+{   preamble$ empty$
+    'skip$
+    { preamble$ write$ newline$ }
+  if$
+  "\begin{thebibliography}{" number.label int.to.str$ * "}" *
+  write$ newline$
+  "\providecommand{\natexlab}[1]{#1}"
+  write$ newline$
+  "\providecommand{\url}[1]{\texttt{#1}}"
+  write$ newline$
+  "\expandafter\ifx\csname urlstyle\endcsname\relax"
+  write$ newline$
+  "  \providecommand{\doi}[1]{doi: #1}\else"
+  write$ newline$
+  "  \providecommand{\doi}{doi: \begingroup \urlstyle{rm}\Url}\fi"
+  write$ newline$
+}
+
+EXECUTE {begin.bib}
+
+EXECUTE {init.state.consts}
+
+ITERATE {call.type$}
+
+FUNCTION {end.bib}
+{ newline$
+  "\end{thebibliography}" write$ newline$
+}
+
+EXECUTE {end.bib}

Documents/Latex/coding.sty

+\RequirePackage{tikz}
+\usetikzlibrary{arrows,matrix,positioning,shapes}
+\RequirePackage{graphicx}
+\RequirePackage{datetime}
+\RequirePackage{caption}
+\RequirePackage{forloop}
+\RequirePackage{minted}
+\RequirePackage{listings}
+
+\usepackage{float}            % for floating figures
+\usepackage{amsmath}            % for math related environment
+\usepackage{amsfonts}           % fonts for math
+\usepackage{listings}           % for psuedocode, lines of codes
+\usepackage{caption}
+\usepackage[labelformat=simple]{subcaption}
+\renewcommand\thesubfigure{(\alph{subfigure})}    % for (a) in subcaption
+\usepackage{enumitem}
+\setlist{nolistsep,topsep=0pt}
+\usepackage{wrapfig}            % for figures wrap inside text paragraph
+\usepackage{pdfpages}           % for including pdf pages
+\usepackage{verbatim}           % for block comment
+\usepackage{multicol}
+
+\usepackage{standalone}         % for proposal text inclusion
+\usepackage{pgfgantt}           % for gantt chart
+\usepackage{titlesec}
+\titlespacing{\section}{0pt}{\parskip}{-\parskip}
+
+\usepackage{array}
+\usepackage{xcolor,colortbl}
+\usepackage{pdflscape}
+\usepackage{tabularx}
+\usepackage{makecell}
+
+\usepackage{rotating}
+
+\newcommand*\rot{\rotatebox{90}}
+
+% listings format
+\lstset{
+  basicstyle=\ttfamily,
+  numbers=left,
+  numberstyle=\small,
+  breaklines=true,
+  xleftmargin=.1\linewidth,
+  frame=single,
+  columns=fullflexible,
+  captionpos=b,
+  showstringspaces=false
+}
+
+\usemintedstyle{
+  numberblanklines=true,
+  numbersep=12pt,
+  numbersep=5pt,
+  gobble=0,
+  fontsize=\footnotesize,
+  frame=lines,
+  framerule=0.4pt,
+  framesep=1mm,
+  tabsize=2,
+  obeytabs=true,
+  samepage=false, 
+  showspaces=false,
+  showtabs=false,
+  %stepnumber=2,
+  linenos,
+	breaklines
+}

Documents/Latex/compile.bat

+REM latexmk -g -f CS59110440204.tex
+
+REM ##### OR
+
+ xelatex -interaction=nonstopmode -file-line-error -synctex=1 -shell-escape CS59110440204.tex
+ bibtex CS59110440204.aux
+ xelatex -interaction=nonstopmode -file-line-error -synctex=1 -shell-escape CS59110440204.tex
+ xelatex -interaction=nonstopmode -file-line-error -synctex=1 -shell-escape CS59110440204.tex

Documents/Latex/compile.sh

+latexmk -g -f CS5811400000.tex
+
+##### OR
+
+# xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+# bibtex MathCS-tutorial.aux
+# xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex
+# xelatex -interaction=nonstopmode -file-line-error -synctex=1 MathCS-tutorial.tex

Documents/Latex/mintedsample.tex

+\documentclass[a4paper]{ubu}
+
+\usepackage{coding}
+
+\begin{document}
+
+\chapter{ทฤษฎีที่เกี่ยวข้อง}
+
+บทนี้จะเป็นรายละเอียดเกี่ยวกับทฤษฎีและงานวิจัยที่เกี่ยวของกับการพัฒนาโปรแกรมในครั้งนี้ โดยที่แต่ละหัวข้อจะมีความสัมพันธ์กันเป็นลำดับ โดยหัวข้อที่หนึ่งจะแนะนำความรู้เรื่อง xxx เพื่อให้เข้าใจพื้นฐานเบื้องต้นเกี่ยวกับที่มาของโครงงาน หัวข้อที่สองที่สามจะช่วยเตรียมให้ผู้อ่านเข้าใจเทคโนโลยที่ใช้ในการออกแบบและพัฒนา ส่วน ...
+
+\section{ความรู้พื้นฐาน}
+
+คำนำเรื่องความรู้พื้นฐาน
+
+\section{การเขียนคำสั่ง}
+
+คำนำเรื่องการเขียนคำสั่ง
+
+\subsection{การเขียนคำสั่งโดยแทรกในเอกสาร}
+
+\startminted{python}
+
+import numpy as np
+
+def gaussian_elimination(A, b):
+    # 1. ขั้นตอนการตัดทอน - Elimination Step
+    n = len(b)
+    for j in range(0, n-1): 
+        # 1.1 เลือกสมการตั้งต้น - pivot equation สมการที่ j
+        # 1.2 ลดรูปสมการที่ i โดยที่ i เริ่มจาก j+1
+        for i in range(j+1, n):
+            # 1.2.1 คำนวณหาค่าตัวคูณ  lam
+            lam = A[i,j]/A[j,j]
+            # 1.2.2 ลบออกจากด้านซ้ายของสมการ
+            A[i,j:n] = A[i, j:n] - lam*A[j, j:n]
+            # 1.2.3 ลบออกจากด้านขวาของสมการ
+            b[i] = b[i] - lam*b[j]
+    # 2. แทนค่าของตวแปรที่หาค่าได้จากสมการล่างสุด แทนไปสมการบนไล่ไปเรื่อย
+    #    ขั้นตอนนี้ทั้งหมดเรียกว่า back substitution
+    x = b.copy()
+    for k in range(n-1, -1, -1):
+        x[k] = (b[k] - np.dot(A[k,k+1:n], x[k+1:n]))/A[k,k]
+
+    # 3. แสดงผลลัพธ์
+    #    ค่าของตัวแปร x ทุกตัว
+    print(x)
+
+A = np.array([
+        [4, -2, 1],
+        [-2, 4, -2],
+        [1, -2, 4]
+    ], float)
+b = np.array([11,-16,17], float)
+gaussian_elimination(A, b)
+
+\end{minted}
+
+ตัวอย่างที่ไม่
+
+\begin{minted}{python}
+import numpy as np
+
+def gaussian_elimination(A, b):
+    # 1. ขั้นตอนการตัดทอน - Elimination Step
+    n = len(b)
+    for j in range(0, n-1): 
+        # 1.1 เลือกสมการตั้งต้น - pivot equation สมการที่ j
+        # 1.2 ลดรูปสมการที่ i โดยที่ i เริ่มจาก j+1
+        for i in range(j+1, n):
+            # 1.2.1 คำนวณหาค่าตัวคูณ  lam
+            lam = A[i,j]/A[j,j]
+            # 1.2.2 ลบออกจากด้านซ้ายของสมการ
+            A[i,j:n] = A[i, j:n] - lam*A[j, j:n]
+            # 1.2.3 ลบออกจากด้านขวาของสมการ
+            b[i] = b[i] - lam*b[j]
+    # 2. แทนค่าของตวแปรที่หาค่าได้จากสมการล่างสุด แทนไปสมการบนไล่ไปเรื่อย
+    #    ขั้นตอนนี้ทั้งหมดเรียกว่า back substitution
+    x = b.copy()
+    for k in range(n-1, -1, -1):
+        x[k] = (b[k] - np.dot(A[k,k+1:n], x[k+1:n]))/A[k,k]
+
+    # 3. แสดงผลลัพธ์
+    #    ค่าของตัวแปร x ทุกตัว
+    print(x)
+
+A = np.array([
+        [4, -2, 1],
+        [-2, 4, -2],
+        [1, -2, 4]
+    ], float)
+b = np.array([11,-16,17], float)
+gaussian_elimination(A, b)
+\end{minted}
+
+\end{document}
+

Documents/Latex/references.bib

+@misc{VisualStudioCode,
+	author = {Microsoft},
+ 	title = {รู้จักกับ Visual Studio Code (วิชวล สตูดิโอ โค้ด) โปรแกรมฟรีจากค่ายไมโครซอฟท์},
+  	month = {ตุลาคม},
+  	year = {2560},
+  	note = {มีนาคม 2563},
+ 	url = {https://www.mindphp.com/บทความ/microsoft/4829-visual-studio-code.html.}
+}
+@misc{PythonAnywhere,
+	author = {Blogger},
+	title = {ทดลองใช้ PythonAnywhere สร้าง Django web app อย่างง่าย},
+	month = {กุมภาพันธ์},
+	year = {2561},
+	note = {มีนาคม 2563},
+	url = {http://s5901012610091.blogspot.com/2018/02/pythonanywhere-django-web-app.html.}
+}
+@misc{DjangoFramework,
+	author = {Wasin Thiengkunakrit},
+	title = {เริ่มพัฒนา Web Application กับภาษา Python ด้วย Django Framework},
+	month = {ตุลาคม},
+	year = {2560},
+	note = {มีนาคม 2563},
+	url = {https://www.codeburst.io/เริ่มพัฒนา-web-application-กับภาษา-python-ด้วย-django-framework-38ce132ac706.}
+}
+@misc{Python&Django,
+	author = {AmplySoft},
+  	title = {เริ่มต้นการเขียนเว็บไซต์ ทำเว็บไซต์ด้วยภาษา Python กับ Django Framework},
+  	month = {กรกฏาคม},
+  	year = {2556},
+  	note = {มีนาคม 2563},
+  	url = {http://www.amplysoft.com/knowledge/what-is-django-framework-python.html.}
+}
+@misc{SQLite,
+	author = {bccrwp.org},
+  	title = {SQLite เทียบกับ MySQL เทียบกับ PostgreSQL: การเปรียบเทียบระบบการจัดการฐานข้อมูลเชิงสัมพันธ์},
+  	month = {พฤศจิกายน},
+  	year = {2562},
+  	note = {มีนาคม 2563},
+  	url = {https://th.bccrwp.org/compare/sqlite-vs-mysql-vs-postgresql-a-comparison-of-relational-database-management-systems-8f2704/.}
+}
+@misc{Python,
+	author = {Sarayut Nonsiri, PhD.},
+	title = {ภาษาโปรแกรม Python คืออะไร},
+	month = {},
+	year = {},
+	note = {มีนาคม 2563},
+	url = {https://www.9experttraining.com/articles/python-คืออะไร.}
+}
+@misc{recommenders,
+	author = {William Vorhies},
+	title = {5 ประเภทของผู้แนะนำ},
+	month = {มกราคม},
+	year = {2560},
+	note = {มีนาคม 2563},
+	url = {https://www.datasciencecentral.com/profiles/blogs/5-types-of-recommenders.}
+}
+@misc{RecommendationSystems,
+	author = {Programmer's Blog},
+  	title = {Evolution of Recommendation Systems},
+ 	month = {},
+ 	year = {},
+ 	note = {มีนาคม 2563},
+  	url = {https://kchaiso.wordpress.com/tag/collaborative-filtering/., dpu.ac.th/dpurc/assets/uploads/magazine/e37psnbrivk8g4k.pdf , https://www.developers.ascendcorp.com/สร้าง-recommendation-engine-จาก-collaborative-filtering-3d1d68849102.}
+}
+@internet{Wongnai,
+	author = {Wongnai},
+	title = {Wongnai},
+	month = {},
+	year = {2563},
+	note = {มีนาคม 2563},
+	url = {https://www.wongnai.com/},
+}
+@misc{SystemArchitecture,
+	author = {Kunchit Phiu-Nual},
+  	title = {ความหมายและความสำคัญของ System Architecture (SA)},
+  	month = {เมษายน},
+  	year = {2555},
+  	note = {มีนาคม 2563},
+  	url = {https://goo.gl/6ZhGQo.}
+}
+

Documents/Latex/sample/MainActivity.java

+package com.ubu.andapp;
+
+import android.os.Bundle;
+import android.app.Activity;
+import android.util.Log;
+
+public class MainActivity extends Activity {
+
+   private String name = "MainActivity";
+   
+   /** ฟังก์ชันที่จะทำงานเมื่อมีการเริ่มเรียกใช้งาน MainActivity */
+   @Override
+   public void onCreate(Bundle savedInstanceState) {
+      super.onCreate(savedInstanceState);
+      setContentView(R.layout.activity_main);
+      Log.d(msg, "The onCreate() event");
+   }
+
+   /** ฟังก์ชันที่จะทำงานเมื่อมีการแสดง MainActivity ให้ผู้ใช้เห็น */
+   @Override
+   protected void onStart() {
+      super.onStart();
+      Log.d(msg, "The onStart() event");
+   }
+}

Documents/Latex/sample/flutterapp.dart

+import 'package:flutter/material.dart';
+void main() => runApp(new MyApp());
+class MyApp extends StatelessWidget {
+  Widget build(BuildContext context) {
+    return new MaterialApp(
+      title: 'ตัวอย่าง Flutter Application',
+      home: new MyHomePage(title: 'ตัวอย่าง Flutter App'),
+    );
+  }
+}
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+  final String title;
+  _MyHomePageState createState() => new _MyHomePageState();
+}
+class _MyHomePageState extends State<MyHomePage> {
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: new AppBar(
+        title: new Text(widget.title),
+      ),
+      body: new Container(),
+      floatingActionButton: new Builder(builder: (context) {
+        return new FloatingActionButton(onPressed: () {
+          Scaffold.of(context).showSnackBar(
+                new SnackBar(
+                  backgroundColor: Colors.blue,
+                  content: new Text('SnackBar'),
+                ),
+              );
+        });
+      }),
+    );
+  }
+}

Documents/Latex/sample/main.cpp

+#include <set>
+#include <string>
+#include <iostream>
+
+int main(int argc, char **argv)
+{       
+  // ประกาศตัวแปรพร้อมกำหนดค่าเริ่มต้น
+  std::string word;
+  std::set<std::string> wordcount;
+
+  // อ่านคำที่ผู้กรอกเก็บไว้ใน set (rb-tree)
+  while (std::cin >> word) wordcount.insert(word);
+
+  // แสดงผลลัพธ์ ว่าแต่ละคำมีจำนวนเท่าไหร่
+  std::cout << "คำ: " << wordcount.size() << std::endl;
+  return 0;
+}

Documents/Latex/sample/page.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>HTML5 เว็บเพจ</title>
+  <meta name="description" content="HTML5 เว็บเพจ">
+  <meta name="author" content="csubu">
+
+  <link rel="stylesheet" href="css/styles.css?v=1.23">
+
+</head>
+
+<body>
+  <script src="js/csubuapp.js"></script>
+</body>
+</html>

Documents/Latex/sample/pandaapp.py

+import numpy as np
+import pandas as pd
+
+# อ่านข้อมูลจาไฟล์ 'test.csv'
+df = pd.read_csv('test.csv')
+
+# แสดงตัวอย่างข้อมูล 5 แถวแรก
+df.head()
+
+# แสดง histogram
+df.hist()
+
+# แสดงข้อมูลทางสถิติเฉพาะ 'บ้าน' 'ราคา'
+df[['บ้าน', 'ราคา']].describe()

Documents/Latex/sample/reactapp.jsx

+function HelloMessage({ name }) {
+  return <div>สวัสดี {name}</div>;
+}
+
+ReactDOM.render(
+  <HelloMessage name="วิทยา คอม" />,
+  document.getElementById('container')
+);

Documents/Latex/sample/student.component.ts

+// import ฟังก์ชันสำคัญของ angular/core
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+   // ประกาศชื่อ selector เพื่อให้ component อื่นสามารถนำไปใช้ได้
+   selector: 'student',
+   // ระบุชื่ไฟล์ html ที่ใช้ฟังก์ชันใน component โดยตรง
+   templateUrl: './student.component.html', 
+   // ระบุ style ที่นำไปใช้กับ html
+   styleUrls: ['./student.component.css']
+})
+export class StudentComponent implements OnInit {
+
+   constructor() { }
+
+   ngOnInit() {}
+
+}

Documents/Latex/ubu.cls

+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% Author: Warawoot Pacharoen
+%% Date:   April 13, 2018
+%% Email:  warawoot.p@ubu.ac.th, wpacharoen@gmail.com
+%%
+%% This class file is extended from chula.cls by Dr.Nattee Niparnan.
+%%
+%% You can freely modified this file.
+%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% Author: Supasate Choochaisri
+%% Date:   April 19, 2012
+%% Email:  supasate.c@gmail.com, supasate@larngeartech.com
+%%
+%% This class file is extended from chula.cls by Dr.Nattee Niparnan.
+%% The chula.cls by Dr.Nattee is loosely based on the chula.sty package
+%% originally written by Chatchawit Aporntewan. The chula.sty was
+%% then undergone many minor changes by Nattee Niparnan, Teerayut
+%% Hiruntaraporn, and Mahisorn Wongphati. Then, Nattee rewrote the
+%% style file as a class file and provides several option making the
+%% class to be more general. Finally, Supasate modified the class
+%% file to be used with XeTeX and to comply with the regulation in
+%% acedemic year 2554.
+%%
+%% You can freely modified this file.
+%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% Changelog
+%% August 21, 2015: Dittaya Wanvarie
+%%  - Move fontspec font settings to AtEndOfClass to avoid problem in Windows TeX
+%% July 7, 2015: Dittaya Wanvarie
+%%  - Delete unnecessary comments
+%%  - Add more comments
+%%  - Add standard fonts for English similar to IEEEtran template
+%%  - Correct errors in English template
+%%  - Re-define bibliography to use \normalfont
+%%  - Add natbib required pacakge
+%%  - Define \thalph order (ก, ข, ค, ง,...0) for appendices
+%%  - Add setspace require package and force doublespacing
+%% June 11, 2015: Dittaya Wanvarie
+%%  - Move font settings to AtEndOfClass
+%%  - Change Thai font scale to match roman uppercase character
+%%  - Add 12pt option to base report class
+%%  - Add \@ThaiBookTitle to all Co-advisor block
+%%  - Change tabular settings in TH/EN sign pages
+%%  - Add array package required for tabular
+%%  - Fix bugs in co-advisor position in abstract pages
+%% June 9, 2015: Dittaya Wanvarie
+%%  - Change the width sign/department dotted line in TH/EN abstract page to fit "Mathematics and Computer Science"
+%% July 21, 2014: Boonyarit Intiyot
+%%  - Add option [Latin,Thai] to ucharclasses
+%%  - Add \defaultfontfeatures{Mapping=tex-text}
+%%  - To avoid problem with Miktex for Windows:
+%%		-Move \newfontfamily\thaifont[Scale=MatchLowercase,Mapping=tex-text]{TH Sarabun New:script=thai}  to the end of file
+%%      -Move \setTransitionTo{Thai}{\fontspec[Scale=MatchLowercase,Mapping=tex-text]{TH Sarabun New}} to the end of file and change it to \setTransitionTo{Thai}{\thaifont}
+%%      -Add \setTransitionFrom{Thai}{\normalfont} at the end of file
+%%
+%% July 6, 2014: Dittaya Wanvarie
+%%  - Add \defaultfontfeatures{Mapping=tex-text}
+%%  - Change co-advisor parameter in the English abstract page to uppercase "except
+%%    "Ph.D"
+%%  - Add subjID for course report in ugrad
+%%  - Add ugrad option for senior project report
+%%  - Add "appendicesname" and "appendicespage" in ThaiCaption
+%% May 3, 2012 : Supasate Choochaisri
+%%  - Add a parameter to handle the uppercase of advisor's title except "Ph.D."
+%%  - Rename chula_nat.bst to chulanat.bst to make it more compatible to LaTeX
+%%    compiler.
+%%  - Add a "numappendices" parameter to handle choosing "Appendix" or "Appendices"
+%%  - Fix indentation of the Thai abstract page.
+%%  - Modify the bibtex style file (chulanat.bst) to handle Chula bibliography
+%%    format.
+%%
+%% Apr 19, 2012 : Supasate Choochaisri
+%%  - Use XeTeX to support UTF-8 and OpenType font.
+%%  - Use ucharclasses package to automatically switch language without
+%%    explicitly issuing switch command.
+%%  - Capitalize Advisor name at the English abstract page.
+%%  - Add option for Advisor/Co-Advisor name with abbreviated title to be used
+%%    at the English abstract page.
+%%  - Write Deparment, Field of Study, and Academic year on dotted underlines
+%%    at the abstract page.
+%%  - Add semi-colon after Academic year at the English abstract page.
+%%  - Move the word "Fulfillment" to the second line at the Approval page.
+%%  - Adjust top margin to 1.5", bottom margin to 1.0" with geometry package.
+%%  - Add line break for a long thesis title at the cover page.
+%%
+%% Feb 25, 2007: Nattee Niparnan
+%%  - Change heading mechanism.
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Identification %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\NeedsTeXFormat{LaTeX2e}
+\ProvidesClass{ubu}[2018/04/13]
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Initial Code %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\RequirePackage{fontspec}
+\RequirePackage{calc}
+%\RequirePackage{fontspec}
+\RequirePackage{xunicode}
+\RequirePackage{xltxtra}
+\RequirePackage{polyglossia}
+\RequirePackage{ragged2e}
+\RequirePackage{tikz}
+\RequirePackage{geometry}
+\RequirePackage{afterpage}
+\RequirePackage{array}
+\RequirePackage[Latin,Thai]{ucharclasses}
+
+\RequirePackage{url}                       % for breaking urls (use \url{http://www.example.com})
+\RequirePackage{breakcites}                % for breaking long citations
+\RequirePackage[normalem]{ulem}            % for underlineing Journal name in references
+\RequirePackage{setspace}                  % for double spacing
+
+%\RequirePackage{fontspec}
+
+\setdefaultlanguage{thai}
+\setotherlanguage{thai}
+
+\setTransitionTo{Thai}{\thaifont\doublespacing}
+\setTransitionFrom{Thai}{\normalfont\doublespacing}
+
+\XeTeXlinebreaklocale "th_TH"
+\XeTeXlinebreakskip = 0pt plus 1pt
+
+\newif\if@doctor
+\newif\if@master
+\newif\if@ugrad
+\newif\if@coadvisor
+\newif\if@thaithesis
+\@coadvisorfalse
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Option Declaration %%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\@ugradtrue
+\DeclareOption{doctor} {
+	\@doctortrue
+	\@masterfalse
+	\@ugradfalse
+} \DeclareOption{master} {
+	\@doctorfalse
+	\@mastertrue
+	\@ugradfalse
+} \DeclareOption{ugrad} {
+	\@doctorfalse
+	\@masterfalse
+} \DeclareOption{coadvisor} {
+	\@coadvisortrue
+} \DeclareOption{thaithesis} {
+	\@thaithesistrue
+} \DeclareOption{engthesis} {
+	\@thaithesisfalse
+}
+
+\DeclareOption*{\PassOptionsToClass{\CurrentOption}{report}}  % pass any unknown option to the report class
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Option Execution %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\ExecuteOptions{ugrad,thaithesis}
+\ProcessOptions
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%% Class & Package Loading %%%%%%%%%%%%%%%%%%%%%%%%%%
+\LoadClass[a4paper,12pt]{report}           % this class is based on the report class
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Main Code %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\fontsize{16}{20}\selectfont
+
+\AtEndOfClass{
+	% Add natbib after set all other parameters
+	%\RequirePackage[round,semicolon]{natbib}                    % for bibliography sylte
+	\RequirePackage[square,comma,numbers]{natbib}
+	
+	\renewenvironment{thebibliography}[1]{%
+		\thereferences
+		\bibsection\parindent \z@\bibpreamble\bibfont\list
+		{\@biblabel{\arabic{NAT@ctr}}}{\@bibsetup{#1}%
+			\setcounter{NAT@ctr}{0}}%
+		
+		\normalfont
+		
+		\ifNAT@openbib
+		\renewcommand\newblock{\par}
+		\else
+		\renewcommand\newblock{\hskip .11em \@plus.33em \@minus.07em}%
+		\fi
+		\sloppy\clubpenalty4000\widowpenalty4000
+		\sfcode`\.=1000\relax
+		\let\citeN\cite \let\shortcite\cite
+		\let\citeasnoun\cite
+	}{\def\@noitemerr{%
+			\PackageWarning{natbib}
+			{Empty `thebibliography' environment}}%
+		\endlist\vskip-\lastskip
+	}
+	
+	%% English fonts are Times, Helvetica, Courier, according to IEEEtran template
+	\defaultfontfeatures{Mapping=tex-text}
+	\setmainfont{TeX Gyre Termes}				% Free Times
+	\setsansfont{TeX Gyre Heros}				% Free Helvetica
+	\setmonofont{TeX Gyre Cursor}				% Free Courier
+	
+	% Use TH Sarabun New for Thai as it is standard font for Thai formal documents
+	\newfontfamily{\thaifont}[Scale=MatchUppercase,Mapping=tex-text]{TH SarabunPSK=thai}
+	
+	\doublespacing
+}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% define Thai alphabet sequence
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\def\thalph#1{\expandafter\@thalph\csname c@#1\endcsname}
+\def\@thalph#1{%
+	\ifcase#1\or ก\or ข\or ค\or ง\or จ\or ฉ\or ช\or ซ\or
+	ฌ\or ญ\or ฎ\or ฏ\or ฐ\or ฑ\or ฒ\or ณ\or ด\or ต\or ถ\or ท\or ธ\or น\or
+	บ\or ป\or ผ\or ฝ\or พ\or ฟ\or ภ\or ม\or ย\or ร\or ฤ\or ล\or ฦ\or ว\or
+	ศ\or ษ\or ส\or ห\or ฬ\or อ\or ฮ\else\xpg@ill@value{#1}{@thaialph}\fi}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% localize the strings (xxxxname )
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\newcommand\fillin[1][3cm]{\makebox[#1]{\dotfill}}
+
+\newcommand\selectthesislang{
+	\if@thaithesis
+	\selectlanguage{thai}
+	\else
+	\selectlanguage{english}
+	\fi
+}
+
+%% string setting
+\if@doctor
+\newcommand\@ThaiDegreeType{ปริญญาดุษฎีบัณฑิต}
+\newcommand\@EnglishDegreeType{Doctoral Degree}
+\newcommand\@ThaiBookTitle{วิทยานิพนธ์}
+\newcommand\@EnglishBookTitle{Dissertation}
+\else
+\if@master
+\newcommand\@ThaiDegreeType{ปริญญามหาบัณฑิต}
+\newcommand\@EnglishDegreeType{Master's Degree}
+\newcommand\@ThaiBookTitle{วิทยานิพนธ์}
+\newcommand\@EnglishBookTitle{Thesis}
+\else
+\newcommand\@ThaiDegreeType{ปริญญาบัณฑิต}
+\newcommand\@EnglishDegreeType{Bachelor's Degree}
+\newcommand\@ThaiBookTitle{โครงงาน}
+\newcommand\@EnglishBookTitle{Project}
+\fi
+\fi
+
+\if@thaithesis
+%% my new string
+\newcommand{\@AcknowledgementsString}{กิตติกรรมประกาศ}
+\if@ugrad
+\newcommand{\@BiographyString}{ประวัติผู้พัฒนา}
+\else
+\newcommand{\@BiographyString}{ประวัติผู้เขียนวิทยานิพนธ์}
+\fi
+\newcommand{\@AbstractThaiString}{บทคัดย่อภาษาไทย}
+\newcommand{\@AbstractEnglishString}{บทคัดย่อภาษาอังกฤษ}
+\newcommand{\@PageString}{หน้า}
+\newcommand{\@ThaiFont}{\normalfont}
+
+%%string already defined in babel (some are not used in this class, but I add it anyway
+\renewcommand\captionsthai{%
+	\def\prefacename{คำนำ}%
+	\def\refname{หนังสืออ้างอิง}%
+	\def\abstractname{บทคัดย่อ}%
+	\def\bibname{บรรณานุกรม}%
+	\def\chaptername{บทที่}%
+	\def\appendixname{ภาคผนวก}%
+	\def\appendicesname{ภาคผนวก}%
+	\def\appendixpage{ภาคผนวก}%
+	\def\appendicespage{ภาคผนวก}%
+	\def\contentsname{สารบัญ}%
+	\def\listfigurename{สารบัญภาพ}%
+	\def\listtablename{สารบัญตาราง}%
+	\def\indexname{ดรรชนี}%
+	\def\figurename{รูปที่}%
+	\def\tablename{ตารางที่}%
+	\def\partname{ภาค}%
+	\def\enclname{สิ่งที่แนบมาด้วย}%
+	\def\ccname{สำเนาถึง}%
+	\def\headtoname{เรียน}%
+	\def\pagename{หน้า}%
+	\def\seename{ดู}%
+	\def\alsoname{ดูเพิ่มเติม}%
+	\def\proofname{พิสูจน์}%
+}
+\else
+%% my new string
+\newcommand{\@AcknowledgementsString}{Acknowledgements}
+\newcommand{\@BiographyString}{Biography}
+\newcommand{\@AbstractThaiString}{Abstract (Thai)}
+\newcommand{\@AbstractEnglishString}{Abstract (English)}
+\newcommand{\@PageString}{Page}
+\newcommand{\@ThaiFont}{\normalfont}
+
+%%string already defined in babel (some are not used in this class, but I add it anyway
+\renewcommand\captionsenglish{%
+	\def\prefacename{Preface}%
+	\def\refname{References}%
+	\def\abstractname{Abstract}%
+	\def\bibname{References}%
+	\def\chaptername{Chapter}%
+	\def\appendixname{Appendix}%
+	\def\appendicesname{Appendices}%
+	\def\appendixpage{APPENDIX}%
+	\def\appendicespage{APPENDICES}%
+	\def\contentsname{Contents}%
+	\def\listfigurename{List of Figures}%
+	\def\listtablename{List of Tables}%
+	\def\indexname{Index}%
+	\def\figurename{Figure}%
+	\def\tablename{Table}%
+	\def\partname{Part}%
+	\def\enclname{encl}%
+	\def\ccname{cc}%
+	\def\headtoname{To}%
+	\def\pagename{Page}%
+	\def\seename{see}%
+	\def\alsoname{see also}%
+	\def\proofname{Proof}%
+	\def\glossaryname{Glossary}%
+	\def\figurename{Figure}
+	\def\tablename{Table}
+}
+\fi
+
+\if@thaithesis
+\captionsthai
+\else
+\captionsenglish
+\fi
+
+
+%% set chapter string
+\renewcommand\@chapapp{\chaptername}
+
+%% to write text over dotted line
+\newcommand{\udot}[1]{%
+	\tikz[baseline=(todotted.south)]{
+		\node[inner sep=0pt,outer sep=0pt] (todotted) {#1};
+		\draw[loosely dotted, thick] (todotted.south west) -- (todotted.south east);
+	}%
+}%
+
+%% to choose the word between Appendix or Appendices
+\newcommand{\numappendices}[1]{
+	\newcommand{\@numappendices}{#1}
+}
+
+%% additional command for setting the first few pages of the thesis
+%% please refer to the accompanying bare_thesis.tex for the example
+%% usage of these command.
+\newcommand{\authortitle}[2]{                               % define Title of Author
+	\newcommand{\@ThaiAuthorTitle}{#1}
+	\newcommand{\@EnglishAuthorTitle}{#2}
+}
+\newcommand{\thesisauthor}[2]{                              % define author
+	\newcommand{\@ThaiAuthor}{#1}
+	\newcommand{\@EnglishAuthor}{#2}
+	\newcommand{\@EnglishAuthorUP}{\uppercase{#2}}
+}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% add coauthor
+%% wichit2s
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\newcommand{\coauthortitle}[2]{                               % define Title of Author
+	\newcommand{\@ThaiCoAuthorTitle}{#1}
+	\newcommand{\@EnglishCoAuthorTitle}{#2}
+}
+\newcommand{\thesiscoauthor}[2]{                              % define author
+	\newcommand{\@ThaiCoAuthor}{#1}
+	\newcommand{\@EnglishCoAuthor}{#2}
+	\newcommand{\@EnglishCoAuthorUP}{\uppercase{#2}}
+}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\newcommand{\thesistitle}[2]{                               % define Thesis' title
+	\newcommand{\@ThaiTitle}{#1}
+	\newcommand{\@EnglishTitle}{#2}
+}
+\newcommand{\advisor}[4]{                                   % define Advisor
+	\newcommand{\@ThaiAdvisor}{#1}
+	\newcommand{\@ThaiAdvisorShort}{#2}
+	\newcommand{\@EnglishAdvisor}{#3}
+	\newcommand{\@EnglishAdvisorUP}{\uppercase{#3}}
+	\newcommand{\@EnglishAdvisorShort}{#4}
+	\newcommand{\@EnglishAdvisorShortUP}{\uppercase{#4}}
+}
+\newcommand{\coadvisor}[4]{                                 % define co-author (auto include coadvision option)
+	\newcommand{\@ThaiCoAdvisor}{#1}
+	\newcommand{\@ThaiCoAdvisorShort}{#2}
+	\newcommand{\@EnglishCoAdvisor}{#3}
+	\newcommand{\@EnglishCoAdvisorUP}{\uppercase{#3}}
+	\newcommand{\@EnglishCoAdvisorShort}{#4}
+	\newcommand{\@EnglishCoAdvisorShortUP}{\uppercase{#4}}
+	\@coadvisortrue
+}
+\newcommand{\faculty}[2]{                                   % define faculty
+	\newcommand{\@ThaiFaculty}{#1}
+	\newcommand{\@EnglishFaculty}{#2}
+}
+\newcommand{\department}[2]{                                % define department
+	\newcommand{\@ThaiDept}{#1}
+	\newcommand{\@EnglishDept}{#2}
+}
+\newcommand{\fieldofstudy}[2]{                              % define field of study
+	\newcommand{\@ThaiFieldOfStudy}{#1}
+	\newcommand{\@EnglishFieldOfStudy}{#2}
+	\newcommand{\@EnglishFieldOfStudyUP}{\uppercase{#2}}
+}
+\newcommand{\degree}[2]{                                    % define degree name
+	\newcommand{\@ThaiDegree}{#1}
+	\newcommand{\@EnglishDegree}{#2}
+}
+\newcommand{\academicyear}[1]{                              % define academic year
+	\newcounter{AcadYear}
+	\setcounter{AcadYear}{#1}
+	\newcommand{\@ThaiAcademicYear}{\theAcadYear}
+	\newcounter{EngAcadYear}
+	\setcounter{EngAcadYear}{\value{AcadYear}-543}
+	\newcommand{\@EnglishAcademicYear}{\theEngAcadYear}
+}
+\newcommand{\deanname}[2]{                                  % define name of the dean
+	\newcommand{\@ThaiDeanName}{#1}
+	\newcommand{\@EnglishDeanName}{#2}
+}
+\newcommand{\subjID}[1]{
+	\newcommand{\@subjID}{#1}
+}
+\newcommand{\subjName}[2]{
+	\newcommand{\@ThaiSubjName}{#1}
+	\newcommand{\@EnglishSubjName}{#2}
+}
+\newcommand{\keywords}[1]{                                  % define keywords
+	\newcommand{\@Keywords}{\uppercase{#1}}
+}
+\newcommand{\authorid}[1]{                                  % define student ID of the author
+	\newcommand{\@AuthorID}{#1}
+}
+\newcommand{\committee}[1]{                                 % define commitee
+	\newcommand{\@Committee}{
+		\if@thaithesis \fi
+		#1
+	}
+}
+
+%% additional counter, length,  reference, etc
+
+\newcounter{subsubsubsection}[subsubsection]
+\setcounter{subsubsection}{0}                 % this class allow subsubsubsection
+
+\newcounter{bib}                       \setcounter{bib}{0}
+\newcounter{TotalPage}                 \setcounter{TotalPage}{0}
+\newcounter{isAppendiced}              \setcounter{isAppendiced}{0}
+\setcounter{tocdepth}{5}
+\setcounter{secnumdepth}{5}
+
+\newlength{\pageleft}               % for the remaining space of the page
+
+\renewcommand{\thechapter}{\@ThaiFont\@arabic\c@chapter}                                    % \ref{} in chapter
+\renewcommand{\thesection}{\@ThaiFont\thechapter.\@arabic\c@section}                        % \ref{} in section
+\renewcommand{\thesubsection}{\@ThaiFont\thesection.\@arabic\c@subsection}                  % \ref{} in subsection
+\renewcommand{\thesubsubsection}{\@ThaiFont\thesubsection.\@arabic\c@subsubsection}         % \ref{} in subsubsection
+\renewcommand{\thesubsubsubsection}{\@ThaiFont\thesubsubsection.\@arabic\c@subsubsubsection}% \ref{} in subsubsubsection
+
+\renewcommand{\@cite}[1]{[#1]}
+%\renewcommand{\@biblabel}[1]{#1.} %%Change [1] to 1.
+
+%% command for appendix
+\newcommand\startappendix{
+	%readjust toc length
+	\addtocontents{toc}{\protect\vspace*{0.5cm}}
+	\addtocontents{toc}{\protect\setlength{\tocindentchap}{1.4em}}
+	\addtocontents{toc}{\protect\gentocwidthparam}                       %regen according to new chapter indent
+	\addtocontents{toc}{\protect{\setlength{\tocnwidthchap}{10.0em}}}    %set the nwidth of chapter AFTER generate (to accommodate \appendixname)
+	
+	\par
+	\setcounter{chapter}{0}%
+	\setcounter{section}{0}%
+	\setcounter{isAppendiced}{1}%
+	\renewcommand\@chapapp{\appendixname}%
+	
+	\if@thaithesis
+	\renewcommand{\thechapter}{\@thaialph\c@chapter}
+	\else
+	\renewcommand{\thechapter}{\@Alph\c@chapter}
+	\fi
+	
+	\newpage
+	\thispagestyle{empty}
+	\centerline{~}
+	\vfill
+	\ifnum \@numappendices > 1
+	\centerline{\Large \appendicespage}
+	\else
+	\centerline{\Large \appendixpage}
+	\fi
+	\vfill
+	\centerline{~}
+}
+
+
+
+%%%%%%%%%%%%%%%
+% page layout %
+%%%%%%%%%%%%%%%
+\setlength{\textheight}{25.00cm}       %  text-area height
+\geometry{paperwidth=8.27in,paperheight=11.69in,top=1.5in,bottom=1in,left=1.5in,right=1.0in} % set paper size and page margin
+\setlength{\headheight}{0.00cm}        %
+\setlength{\headsep}{1.00cm}           %
+\setlength{\marginparsep}{0.00cm}      %
+\setlength{\marginparwidth}{0.00cm}    %
+\setlength{\footskip}{0.00cm}          %
+\setlength{\parindent}{1.00cm}         %  paragraph indent
+\setlength{\parskip}{0.20cm}           %  distance between paragraphs
+
+%%%%%%%%%%%%%%%%%%
+% page numbering %
+%%%%%%%%%%%%%%%%%%
+\def\ps@headings{\def\@oddhead{{\slshape\rightmark}\hfil\if@thaithesis\fi\thepage}}
+\pagestyle{myheadings}
+
+
+\if@thaithesis
+\pagenumbering{thaialph}
+\else
+\pagenumbering{roman}
+\fi
+
+%%%%%%%%%%%%%%%%%%
+% small commands %
+%%%%%%%%%%%%%%%%%%
+\renewcommand\chapter{
+	\selectthesislang
+	\if@openright\cleardoublepage\else\clearpage\fi
+	\thispagestyle{empty}%
+	\global\@topnum\z@   % Prevents figures from going at top of page.
+	\@afterindenttrue
+	\ifnum \c@chapter = 0
+	\ifnum \c@isAppendiced = 0
+	\pagenumbering{arabic}
+	\toccont
+	\addtocontents{toc}{\protect\leftline{\bfseries \chaptername}}
+	\else
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\ifnum \@numappendices > 1
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \appendicesname}{\@ThaiFont\thepage}}
+	\else
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \appendixname}{\@ThaiFont\thepage}}
+	\fi
+	\fi
+	\fi
+	\ifnum \c@isAppendiced = 1
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\fi
+	
+	\secdef\@chapter\@schapter
+}
+
+\def\@chapter[#1]#2{
+	\refstepcounter{chapter}
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{0cm}}
+	\ifnum \c@isAppendiced = 0
+	\addcontentsline{toc}{chapter}{\protect\numberline{\thechapter}#1}
+	\else
+	\addcontentsline{toc}{chapter}{\appendixname~\protect\numberline{\thechapter}#1}
+	\fi
+	\@makechapterhead{#2}
+	\@afterheading
+	\indent
+}
+
+\def\@schapter#1{
+	{
+		\parindent \z@ \centering                % zero indent (\z@ = 0pt}
+		\bfseries\Large #1 \par\nobreak
+	}
+	\@afterheading
+	\indent
+}
+
+\def\@makechapterhead#1{%
+	{
+		\parindent \z@ \centering
+		\bfseries\Large \MakeUppercase{\@chapapp}
+		\ifnum \c@isAppendiced = 0               % test if this chapter is an appendix
+		\if@thaithesis
+		\@ThaiFont\arabic{chapter}
+		\else
+		\Roman{chapter}
+		\fi
+		\else
+		\if@thaithesis
+		\thalph{chapter}
+		\else
+		\Alph{chapter}
+		\fi
+		\fi
+		\par\nobreak
+		\bfseries\Large \uppercase{#1} \par\nobreak
+	}
+}
+
+\renewcommand{\section}{
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}\@ThaiFont}
+	\@startsection{section}{2}{0cm}{0cm}{0.001cm}{\bfseries\large}
+}
+\renewcommand{\subsection}{
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}\@ThaiFont}
+	\@startsection{subsection}{3}{0cm}{0cm}{0.001cm}{\bfseries}
+}
+\renewcommand{\subsubsection}{
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}\@ThaiFont}
+	\@startsection{subsubsection}{4}{0cm}{0cm}{0.001cm}{\bfseries}
+}
+\newcommand{\subsubsubsection} {
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\@startsection{subsubsubsection}{5}{0cm}{0cm}{0.001cm}{\bfseries}
+}
+
+%%%%%%%%%%%%
+% contents %
+%%%%%%%%%%%%
+\renewcommand\@pnumwidth{0.5cm}        % toc's parameter
+\renewcommand\@tocrmarg{1.5cm}         % toc's parameter
+\renewcommand\@dotsep{4}               % toc's parameter
+\addtocontents{toc}{\protect\rightline{\pagename}}
+
+\newlength{\tocindentchap}
+\newlength{\tocnwidthchap}
+\newlength{\tocindentsection}
+\newlength{\tocnwidthsection}
+\newlength{\tocindentsubsection}
+\newlength{\tocnwidthsubsection}
+\newlength{\tocindentsubsubsection}
+\newlength{\tocnwidthsubsubsection}
+\newlength{\tocindentsubsubsubsection}
+\newlength{\tocnwidthsubsubsubsection}
+\newlength{\tocnwidthperstep}
+\newlength{\tocnwidthoffset}
+
+\setlength{\tocnwidthperstep}{0.8em}
+\setlength{\tocnwidthoffset}{1.4em}
+\setlength{\tocindentchap}{0.0em}
+\setlength{\tocnwidthchap}{\tocnwidthoffset}
+
+\newcommand{\gentocwidthparam}{
+	\setlength{\tocindentsection}{\tocindentchap + \tocnwidthchap}
+	\setlength{\tocnwidthsection}{\tocnwidthoffset + \tocnwidthperstep * 1}
+	\setlength{\tocindentsubsection}{\tocindentsection + \tocnwidthsection}
+	\setlength{\tocnwidthsubsection}{\tocnwidthoffset + \tocnwidthperstep * 2}
+	\setlength{\tocindentsubsubsection}{\tocindentsubsection + \tocnwidthsubsection}
+	\setlength{\tocnwidthsubsubsection}{\tocnwidthoffset + \tocnwidthperstep * 3}
+	\setlength{\tocindentsubsubsubsection}{\tocindentsubsubsection + \tocnwidthsubsubsection}
+	\setlength{\tocnwidthsubsubsubsection}{\tocnwidthoffset + \tocnwidthperstep * 3}
+}
+
+
+\gentocwidthparam
+
+\newcommand{\l@nchapter}{\@dottedtocline{0}{0cm}{0cm}}
+\renewcommand{\l@chapter}[2]{\@dottedtocline{0}{\tocindentchap}{\tocnwidthchap}{\bfseries #1}{\bfseries #2}}
+\renewcommand{\l@section}{\@dottedtocline{1}{\tocindentsection}{\tocnwidthsection}}
+\renewcommand{\l@subsection}{\@dottedtocline{2}{\tocindentsubsection}{\tocnwidthsubsection}}
+\renewcommand{\l@subsubsection}{\@dottedtocline{3}{\tocindentsubsubsection}{\tocnwidthsubsubsection}}
+\newcommand{\l@subsubsubsection}{\@dottedtocline{4}{\tocindentsubsubsubsection}{\tocnwidthsubsubsubsection}}
+
+\renewcommand{\l@table}{\@dottedtocline{0}{0cm}{1.6em}}
+\renewcommand{\l@figure}{\@dottedtocline{0}{0cm}{2.4em}}
+
+\renewcommand{\tableofcontents}{
+	\selectthesislang
+	\thispagestyle{empty}
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \contentsname}{\@ThaiFont\thepage}}
+	\centerline{\bfseries\Large \contentsname}
+	\@starttoc{toc}
+}
+\newcommand{\toccont}{
+	\addtocontents{toc}{
+		\protect\setlength{\protect\pageleft}{\protect\textheight - \protect\pagetotal}
+		\protect\ifdim \protect\pageleft < 1cm
+		\protect\newpage
+		\protect\centerline{\bfseries\Large }
+		{\hspace{-1cm}\chaptername\hfill\pagename\hspace{-0.1cm}}
+		\protect\fi
+	}
+}
+
+%%%%%%%%%%%%%%%%%
+% list of table %
+%%%%%%%%%%%%%%%%%
+\setlength{\arraycolsep}{5\p@}            % tabular's parameter
+\setlength{\tabcolsep}{6\p@}              % tabular's parameter
+\setlength{\arrayrulewidth}{.4\p@}        % tabular's parameter
+\setlength{\doublerulesep}{2\p@}          % tabular's parameter
+\renewcommand{\arraystretch}{1.0}         % tabular's parameter
+\renewcommand{\thetable}{\ifnum\c@chapter>\z@\thechapter.\fi\@arabic\c@table}
+\def\fps@table{tbp}
+\def\ftype@table{2}
+\def\ext@table{lot}
+\def\fnum@table{\tablename~\thetable}
+
+\renewenvironment{table}{
+	\@float{table}
+}{
+	\lotcont
+	\end@float
+}
+
+\setlength{\abovecaptionskip}{10\p@}
+\setlength{\belowcaptionskip}{10\p@}
+\long\def\@makecaption#1#2{
+	\vskip\abovecaptionskip
+	\sbox\@tempboxa{#1: #2}
+	\ifdim \wd\@tempboxa > \hsize
+	#1: #2\par
+	\else
+	\global \@minipagefalse
+	\hb@xt@\hsize{\hfil\box\@tempboxa\hfil}
+	\fi
+	\vskip\belowcaptionskip}
+
+\renewcommand{\listoftables}{
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \listtablename}{\@ThaiFont\thepage}}
+	\centerline{\bfseries\Large \listtablename}
+	\@starttoc{lot}
+	\addtocontents{lot}{\hspace{-1cm}\tablename\hfill\pagename\hspace{-0.1cm}}
+	\addtocontents{lot}{\protect\setlength{\parskip}{0.0cm}}           %  distance between paragraphs
+}
+
+\newcommand{\lotcont}{
+	\addtocontents{lot}{
+		\protect\setlength{\protect\pageleft}{\protect\textheight - \protect\pagetotal}
+		\protect\ifdim \protect\pageleft < 1cm
+		\protect\newpage
+		{\hspace{-1cm}\tablename\hfill\pagename\hspace{-0.1cm}}
+		\protect\fi
+	}
+}
+
+%%%%%%%%%%%%%%%%%%%
+% list of figures %
+%%%%%%%%%%%%%%%%%%%
+\renewcommand{\thefigure}{\ifnum\c@chapter>\z@\thechapter.\fi\@arabic\c@figure}
+\def\fps@figure{tbp}
+\def\ftype@figure{1}
+\def\ext@figure{lof}
+\def\fnum@figure{\figurename~\thefigure}
+
+\renewenvironment{figure}{
+	\@float{figure}
+}{
+	\lofcont
+	\end@float
+}
+
+\renewcommand{\listoffigures}{
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \listfigurename}{\@ThaiFont\thepage}}
+	\addtocontents{toc}{\protect\vspace*{0.5cm}}
+	\centerline{\bfseries\Large \listfigurename}
+	\@starttoc{lof}
+	\addtocontents{lof}{\hspace{-1cm}\figurename\hfill\pagename\hspace{-0.1cm}}
+	
+	%% my new attempt
+	\addtocontents{lof}{\protect\setlength{\parskip}{0.0cm}}           %  distance between paragraphs
+	
+	\addtocontents{lof}{\protect\thispagestyle{myheadings}}
+	
+	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+	% save number of roman pages %
+	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+	\addtocounter{TotalPage}{\arabic{page}}
+}
+
+\newcommand{\lofcont}{
+	\addtocontents{lof}{
+		\protect\setlength{\protect\pageleft}{\protect\textheight - \protect\pagetotal}
+		\protect\ifdim \protect\pageleft < 1cm
+		\protect\newpage
+		{\hspace{-1cm}\figurename\hfill\pagename\hspace{-0.1cm}}
+		\protect\fi
+	}
+}
+
+%%%%%%%%%%%%
+% equation %
+%%%%%%%%%%%%
+\@addtoreset{equation}{chapter}
+\renewcommand{\theequation}{\ifnum\c@chapter>\z@\thechapter.\fi\@arabic\c@equation}
+
+%%%%%%%%%%%%%
+% emphasize %
+%%%%%%%%%%%%%
+\newcommand\e[1]{{\normalem \emph{#1}}}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%% Front matter commands
+%%
+%% These commands generate the first few pages of the thesis, such as
+%% Thai Title, English Title, Committee Page, Abstract,
+%% Acknowledgement, etc.
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\newcommand{\makethaicover}{
+	%\fontsize{13}{15}\selectfont {
+	\large
+	\thispagestyle{empty}
+	\centerline{ \begin{tabular}{p{14cm}}\centering\@ThaiTitle\end{tabular} }
+	\centerline{ \begin{tabular}{p{14cm}}\centering\@EnglishTitle\end{tabular}}
+	\vfill
+	
+	\centerline{\@ThaiAuthorTitle\@ThaiAuthor}
+	
+	%% \if\@ThaiCoAuthorTitle
+	%% 		\centerline{\@ThaiCoAuthorTitle\@ThaiCoAuthor}
+	%% 	\fi
+	
+	%% \if\@ThaiCoAuthorTitle
+	%%   \vspace{1.7cm}
+	%% \else
+	\vspace{2cm}
+	\fi
+	
+	\vfill
+	
+	\begin{center}
+		{\@ThaiBookTitle}นี้เป็นส่วนหนึ่งของการศึกษา \\
+		หลักสูตร{\@ThaiDegree} สาขาวิชา{\@ThaiFieldOfStudy} \\
+		ภาควิชา{\@ThaiDept} คณะ{\@ThaiFaculty} \\
+		มหาวิทยาลัยอุบลราชธานี \\
+		ปีการศึกษา {\begin{english}\@ThaiAcademicYear\end{english}} \\
+		ลิขสิทธิ์ของมหาวิทยาลัยอุบลราชธานี
+	\end{center}
+	\normalsize
+}
+
+\newcommand{\makeenglishcover}{
+	\fontsize{11}{15}\selectfont
+	\thispagestyle{empty}
+	\centerline{\begin{tabular}{p{14cm}}\centering\@EnglishTitle\end{tabular}}
+	\vfill
+	\centerline{\@EnglishAuthorTitle~\@EnglishAuthor} \\
+	%% \if@EnglishCoAuthorTitle
+	%% \centerline{\@EnglishCoAuthorTitle~\@EnglishCoAuthor}
+	%%   \vspace{1.7cm}
+	%% \else
+	\vspace{2cm}
+	%% \if
+	\vfill
+	\begin{center}
+		A {\@EnglishBookTitle} Submitted in Partial Fulfillment of the Requirements \\
+		for the Degree of {\@EnglishDegree} Program in {\@EnglishFieldOfStudy} \\
+		Department of {\@EnglishDept} \\
+		Faculty of {\@EnglishFaculty} \\
+		Ubon Ratchathani University \\
+		Academic Year {\@EnglishAcademicYear} \\
+		Copyright of Ubon Ratchathani University
+	\end{center}
+}
+
+
+\newcommand{\ThaiCommittee}[1]{
+	\thispagestyle{empty}
+	\noindent
+	
+	\begin{tabular}{@{}p{3.8cm}p{0.5cm}p{9.2cm}}
+		{{\@ThaiBookTitle}}   & : & \@ThaiTitle \\
+		
+		{}   & {} & \@EnglishTitle \\
+		{โดย}                                &: & \@ThaiAuthorTitle\@ThaiAuthor \\
+		%% \if@thesiscoauthor
+		%%                                      &: & \@ThaiCoAuthorTitle\@ThaiCoAuthor \\
+		\fi
+		{อาจารย์ที่ปรึกษา}                   & : & \@ThaiAdvisorShort \\
+		\if@coadvisor
+		{อาจารย์ที่ปรึกษาร่วม}               & : & \@ThaiCoAdvisor \\
+		\fi
+		{ระดับการศึกษา}  & : & {\@ThaiDegree} สาขาวิชา{\@ThaiFieldOfStudy} \\
+		{ปีการศึกษา}    & : & \@ThaiAcademicYear \\
+	\end{tabular}
+	
+	\vspace*{0.4cm}
+	\hrule width 15 cm height 0.0 cm depth 0.025 cm
+	
+	\begin{center}
+		{\bfseries
+			ได้รับการพิจารณาให้เป็นส่วนหนึ่งของการศึกษา \\
+			ตามหลักสูตร{\@ThaiDegree} สาขา{\@ThaiFieldOfStudy}  \\
+		}
+	\end{center}
+	
+	%\if@ugrad {ภาควิชา\@ThaiDept} \fi {คณะ\@ThaiFaculty} {มหาวิทยาลัยอุบลราชธานี} {อนุมัติให้นับ{\@ThaiBookTitle}ฉบับนี้เป็นส่วนหนี่งของการศึกษาตามหลักสูตร{\@ThaiDegreeType}} \if@ugrad ในรายวิชา {\@subjID} {\@ThaiSubjName} \fi
+	
+	%    \vspace*{0.3cm}
+	
+	\noindent
+	\hspace*{1.5cm} {\bfseries คณะกรรมการสอบประเมินความรู้โครงงานคอมพิวเตอร์}
+	
+	\noindent
+	\begin{tabular}{p{3cm}>{\centering\arraybackslash}p{6cm}l}
+		\@Committee
+	\end{tabular}
+	
+	\noindent
+	\begin{tabular}{p{3cm}>{\centering\arraybackslash}p{6cm}l}
+		\hspace*{0.5cm} & \hspace*{8.0cm} & \\
+		& \dotfill & {\if@ugrad{หัวหน้าภาควิชา}\else{คณบดีคณะ{\@ThaiFaculty}}\fi} \\
+		& {(\@ThaiDeanName)}
+	\end{tabular}
+	
+	\noindent
+	\begin{tabular}{p{3cm}>{\centering\arraybackslash}p{6cm}l}
+		\hspace*{0.5cm} & \hspace*{8.0cm} & \\
+		& วันที่\fillin[1cm]/\fillin[1cm]/\fillin[1cm] &  {}
+	\end{tabular}
+	
+}
+
+\newcommand{\EnglishCommittee}{
+	\fontsize{11}{13.2}\selectfont
+	\setlength{\textwidth}{16.50cm}
+	\thispagestyle{empty}
+	\noindent
+	\begin{tabular}{p{3cm}p{11cm}}
+		\@EnglishBookTitle Title            & \@EnglishTitle \\
+		By                      & \@EnglishAuthorTitle\@EnglishAuthor \\
+		Field of Study          & \@EnglishFieldOfStudy \\
+		\@EnglishBookTitle~Advisor          & \@EnglishAdvisor \\
+		\if@coadvisor
+		\@EnglishBookTitle~Co-advisor       & \@EnglishCoAdvisor \\
+		\fi
+	\end{tabular}
+	
+	\vspace*{0.4cm}
+	\hrule width 15 cm height 0.0 cm depth 0.025 cm
+	
+	Accepted by the \if@ugrad Department of \@EnglishDept\fi Faculty of \@EnglishFaculty, Ubon Ratchathani University in Partial Fulfillment of the Requirements for the \@EnglishDegreeType \if@ugrad in {\@subjID} {\@EnglishSubjName}\fi
+	
+	\noindent
+	\begin{tabular}{p{3cm}p{6cm}>{\raggedright\arraybackslash}p{4.5cm}}
+		\hspace*{0.5cm} & \hspace*{8.0cm} & \\
+		& \dotfill & Dean of the {\if@ugrad{Department of \@EnglishDept}\else{Faculty of \@EnglishFaculty}\fi} \\
+		& \multicolumn{2}{l}{(\@EnglishDeanName)}
+	\end{tabular}
+	
+	\vspace*{0.4cm}
+	
+	\noindent
+	\if@ugrad{PROJECT}\else{THESIS}\fi~COMMITTEE
+	
+	\noindent
+	\begin{tabular}{p{3cm}>{\centering\arraybackslash}p{6cm}l}
+		\@Committee
+	\end{tabular}
+	\setlength{\textwidth}{15.00cm}
+}
+
+\newcommand{\makecommittee} {
+	\protect\if@thaithesis
+	\ThaiCommittee
+	\protect\else
+	%\EnglishCommittee
+	\protect\fi
+}
+
+\newcommand{\CommitteeBlock}[2] {
+	\hspace*{0.5cm} & \hspace*{8.0cm} & \\
+	& \dotfill & {#1} \\
+	& {(#2)} \\
+}
+
+\newcommand{\CommitteeBlockAdvisor} {
+	\hspace*{0.5cm} & \hspace*{8.0cm} & \\
+	& \dotfill & {\if@thaithesis {อาจารย์ที่ปรึกษา} \else \@EnglishBookTitle~Advisor \fi} \\
+	& (\if@thaithesis \@ThaiAdvisorShort \else \@EnglishAdvisor \fi) \\
+}
+
+\newcommand{\CommitteeBlockCoAdvisor} {
+	\if@coadvisor
+	\hspace*{0.5cm} & \hspace*{8.0cm} & \\
+	& \dotfill & {\if@thaithesis {อาจารย์ที่ปรึกษาร่วม} \else {\@EnglishBookTitle}~Co-advisor \fi} \\
+	& (\if@thaithesis \@ThaiCoAdvisorShort \else \@EnglishCoAdvisor~ \fi) \\
+	\fi
+}
+
+
+%%environment for multiple paragraph page such as abstract and acknowledgement
+\newenvironment{thaiabstract}{
+	\fontsize{11}{15}\selectfont
+	\thispagestyle{headings}
+	\toccont
+	\@ThaiFont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries\@AbstractThaiString}{\@ThaiFont\thepage}}
+	\noindent
+	\begin{tabular}{@{}p{3.8cm}p{0.5cm}p{9.2cm}}
+		{{\@ThaiBookTitle}}   & : & \@ThaiTitle \\
+		
+		%{}   & {} & \@EnglishTitle \\
+		{โดย}                                & : & \@ThaiAuthorTitle\@ThaiAuthor \\
+		%% \if@thesiscoauthor
+		%%                                      &: & \@ThaiCoAuthorTitle\@ThaiCoAuthor \\
+		\fi
+		{อาจารย์ที่ปรึกษา}                   & : & \@ThaiAdvisorShort \\
+		\if@coadvisor
+		{อาจารย์ที่ปรึกษาร่วม}               & : & \@ThaiCoAdvisor \\
+		\fi
+		{ระดับการศึกษา}                      & : & {\@ThaiDegree} สาขาวิชา{\@ThaiFieldOfStudy} \\
+		{ปีการศึกษา}                      & : & \@ThaiAcademicYear \\
+	\end{tabular}
+	\vspace*{0.4cm}
+	\hrule width 15 cm height 0.0 cm depth 0.025 cm
+	\vspace*{0.4cm}
+	\centerline{\bfseries\Large บทคัดย่อ}
+	%\normalsize
+}
+
+
+\newenvironment{englishabstract}{
+	\fontsize{11}{15}\selectfont
+	\thispagestyle{headings}
+	\toccont
+	\@ThaiFont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries\@AbstractEnglishString}{\@ThaiFont\thepage}}
+	\noindent
+	\begin{tabular}{@{}p{3.8cm}p{0.5cm}p{9.2cm}}
+		{Topic}   & : & \@EnglishTitle \\
+		
+		%{}   & {} & \@EnglishTitle \\
+		{Author}                                & : & \uppercase{\@EnglishAuthorUP} \\
+		%% \if@thesiscoauthor
+		%%                                      &: & \uppercase{\@EnglishCoAuthorUP} \\
+		\fi
+		{Advisor}                   & : & \@EnglishAdvisorShort \\
+		\if@coadvisor
+		{Co-advisor}               & : & \@EnglishCoAdvisorShort \\
+		\fi
+		{Degree}                      & : & {\@EnglishDegree} ({\@EnglishFieldOfStudy}) \\
+		{Academic Year}                      & : & \@EnglishAcademicYear \\
+	\end{tabular}
+	\vspace*{0.4cm}
+	\hrule width 15 cm height 0.0 cm depth 0.025 cm
+	\vspace*{0.4cm}
+	\centerline{\bfseries\Large Abstract}
+	%\normalsize
+}
+
+
+\newenvironment{englishabstract2}{
+	%    \selectthesislang
+	\fontsize{11}{15}\selectfont
+	\thispagestyle{headings}
+	\toccont
+	\@ThaiFont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \@AbstractEnglishString}{\@ThaiFont\thepage}}
+	\noindent
+	\#\# \@AuthorID : MAJOR \uppercase{\@EnglishFieldOfStudyUP} \\
+	KEYWORDS: \@KeywordsEnglish
+	
+	\vspace{-\parskip}
+	\hangindent = 1.0 cm \hangafter = 1
+	\uppercase{\@EnglishAuthorUP} : \@EnglishTitle. ADVISOR : \uppercase{\@EnglishAdvisorShort},
+	{\if@coadvisor \MakeUppercase{\@EnglishBookTitle} COADVISOR : \uppercase{\@EnglishCoAdvisorShort},\fi } \ref{@TheLastPage} pp.
+	
+} {
+	\vfill
+	
+	\noindent
+	\begin{tabular}{l@{}p{6.2cm}p{5.6cm}@{}}
+		& \\
+		Department &:       {\@EnglishDept}\dotfill & Student's Signature \dotfill \\
+		Field of Study &:   {\@EnglishFieldOfStudy}\dotfill & Advisor's Signature \dotfill \\
+		Academic Year &:     {\@EnglishAcademicYear}\dotfill           &
+		\if@coadvisor
+		Co-advisor's signature \dotfill \\
+		\fi
+	\end{tabular}
+}
+
+\newenvironment{acknowledgements}{
+	\selectthesislang
+	\fontsize{11}{15}
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{-0.1cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \@AcknowledgementsString}{\@ThaiFont\thepage}}
+	\centerline{\bfseries\Large \@AcknowledgementsString}
+	
+	\noindent
+	\hfill
+	\hspace*{1.0cm}
+	
+	\normalfont
+}
+
+
+\newenvironment{biography}{
+	\selectthesislang
+	\newpage
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{0.5cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \@BiographyString}{\@ThaiFont\thepage}}
+	\centerline{\bfseries\Large \@BiographyString}
+} {
+	%%%%%%%%%%%%%%%%%%%%%
+	% compute TotalPage %
+	%%%%%%%%%%%%%%%%%%%%%
+	\addtocounter{TotalPage}{\arabic{page}}
+	\addtocounter{TotalPage}{-1}
+	\refstepcounter{TotalPage}
+	\label{@TheLastPage}
+}
+
+\newcommand\thereferences{
+	\toccont
+	\addtocontents{toc}{\protect\vspace*{0.5cm}}
+	\addtocontents{toc}{\protect\contentsline{nchapter}{\bfseries \bibname}{\@ThaiFont\thepage}\vspace*{0.5cm}}
+}