\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}
