บทนำนี้เกี่ยวกับ tutorial ในการสร้าง app บัญชีรายรับ รายจ่าย แบบง่ายๆ สำหรับการใช้งานมี
ดังนี้
1. สามารถเพิ่มรายรับ เพิ่มรายจ่าย และคำนวณยอดเงินคงเหลือได้
2. สามารถดูประวัติของ รายรับ รายจ่ายได้
Tutorial 1 : Project and app
ในส่วนของ tutorial ที่ 1 จะขอกล่างถึง การสร้าง โปรเจค และ app
เริ่มจากกาารสร้าง โปรเจค ก่อน โดยการเปิด terminal ขึ้นมาและทำการใส่คำสั่งดังนี้
จะปรากกฏ โฟเดอร์ชื่อ mysite ขึ้นมา ภายในโฟเดอร์ mysite จะประกอบด้วยไฟล์ต่างๆ ดังนี้
ต่อไปเป็นการสร้าง app โดย app นี้มีชื่อว่า money
จะปรากฏโฟเดอร์ชื่อ money ซึ่งภายในประกอบด้วย
ในส่วนของไฟล์ views.py เริ้มต้นด้วยการแก้ไขดังนี้
หลังจากนั้นทำการสร้างไฟล์ urls.py เพื่อใช้ link urlและใส่ โค้ดดังนี้
ต่อมาในส่วนของ ไฟล์ setting.py ใน โฟเดอร์ mysite ทำการแก้ไขดังนี้
ในขั้นตอนต่อไป จะทำการเปิด server โดยใช้คำสั้ง python manage.py runserver
จากนั้นเปิด browser และ พิมพ์ localhost:8000/money ลงไปในช่อง url จะปรากฏดังรูป
ศึกษาเพิ่มเติม : https://docs.djangoproject.com/en/1.10/intro/tutorial01/
------------------------------------------------------------------------------------------------------------------>>
Tutorial 2 : About database
ในส่วนของ tutorial ที่ 2 จะขอกล่าว การสร้าง database โดยการสร้างฐานขอมูลนั้นจะ
อยู่ในไฟล์ model.py กล่าวคือ ไฟลื model.py ใน money ทำหน้าที่เป็นฐานข้อมุลนั้นเอง
โดยทำการแก้ไขดังนี้
แต่ในขณะนี้ ยังไม่สามารถเก็บข้อมูลหรือนำ model นี้ไปใช้งานได้ ให้เข้าไปยังไฟล์ setting.py
ใน mysite ตรงส่วนของ INSTALLED_APPS ให้เพิ่มโค้ด เข้าไปดังนี้
ต่อไปให้เปิด terminal ในโปรเจคของเรา แล้วพิมพ์คำสั่ง
python manage.py makemigrations money เป็นการบอก django ว่ามีการเปลี่ยนแปลง
ภายใน model (ในกรณีนี้คือ สร้างใหม่)
ทำการ migrate เพื่อให้ database นำไปใช้งาน โดยใช้คำสั่ง
python manage.py migrate money
ทำการ migrate ทั้ง โปรเจค
เป็นอันจบการสร้าง database
ผลที่ได้
ศึกษาเพิ่มเติม : https://docs.djangoproject.com/en/1.10/intro/tutorial02/
------------------------------------------------------------------------------------------------------------------>>
Tutorial 3 : Function
ในส่วนของ tutorial ที่ 3 จะขอกล่าวถึง ฟังก์ชั่น การทำงาน การคำนวณ ในการสร้าง
รายรับรายจ่าย ในการสร้างฟังก์ชั่นการคำนวณต่างๆจะ อยู่ใน ไฟล์ views.py กล่าวคือ
ไฟล์ views.py เปรียบเสมือน controller นั้นเอง
โดยในไฟล์ views.py แก้ไขดังนี้
from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect
from django.urls import reverse
from django.views import generic
from .models import Income
from django.utils import timezone
import csv
from django.http import HttpResponse
class IndexView(generic.ListView):
template_name = 'money/index.html'
context_object_name = 'latest_income_list'
def get_queryset(self):
return Income.objects.order_by('-pub_date')[:5]
def add_the_income(request):
latest_income_list = Income.objects.order_by('-pub_date')[:5]
context = {'latest_income_list':latest_income_list,}
try:
the_last = Income.objects.order_by('-id')[0].remaining
except:
the_last =0
if request.POST['bank'] == "in" and int(request.POST['add_money']) >= 0:
income = Income(income_text=request.POST['add_income'],
money_in_text=request.POST['add_money'],
remaining=the_last+int(request.POST['add_money']),
pub_date=timezone.now())
income.save()
elif int(request.POST['add_money']) < 0:
return render (request,'gold/index.html',{'error_message': "You should enter the value in positive form", })
if request.POST['bank'] == "out" and int(request.POST['add_money']) >= 0:
expenses = Income(expenses_text=request.POST['add_income'],
money_out_text=request.POST['add_money'],
remaining=the_last-int(request.POST['add_money']),
pub_date=timezone.now())
expenses.save()
elif int(request.POST['add_money']) < 0:
return render (request,'gold/index.html',{'error_message': "You should enter the value in positive form", })
return render(request,'money/index.html',context)
def history(request):
latest_income_list = Income.objects.order_by('pub_date')[:500]
context = {'latest_income_list':latest_income_list}
return render(request,'money/history.html',context)
*** เนื่องด้วย django นั้นใช้ภาษา python ในการเขียน โปรดระวังเรื่องการเว้นวรรคด้วยครับ***
ในส่วนของไฟล์ urls.py แก้ไขดังนี้
from django.conf.urls import url
from . import views
app_name = 'money'
urlpatterns = [
url(r'^$', views.IndexView.as_view(), name='index'),
url(r'^add_the_income/$', views.add_the_income, name='add_the_income'),
url(r'^history/$', views.history, name='history'),
]
*** เนื่องด้วย django นั้นใช้ภาษา python ในการเขียน โปรดระวังเรื่องการเว้นวรรคด้วยครับ***
ในส่วนของ tutorial ที่ 3 ในส่วนของ ฟังก์ชั่นการทำงานนั้นเสร็จเรียบร้อยแต่ยังไม่สามารถแสดง
ผลได้เนื่องจาก tutorial ที่ 3 นี้มีความต่อเนื่องกับ tutorial ที่ 4 ที่จะทำการอธิบายต่อไป
Tutorial 4 :Templates and Display
ในส่วนของ tutorial ที่ 4 จะขอกล่าวถึงการแสดงผลของการคำรวณ ต่างๆ ที่ได้มาจากฟังก์ชั่น
ต่างๆใน tutorial ที่ 3 โดยการแสดงผลนั้นจะทำได้โดยการใช้ templates
ในขั้นตอนแรกนั้นให้ทำการสร้าง โฟเดอร์ ชื่อ templates ใน โฟเดอร์ money โดยใน templates
จะเก็บไฟล์ ประเภท html ไว้เพื่อใช้ในการแสดงผล การจัดวางนั้นมีรุปแบบดังนี้
money ---> templates ---> money ---> ไฟล์ ประเภท html ต่างๆ
จากนั้นสร้างไฟล์ index.html และ history.html
ในส่วนของ index.html แก้ไขดังนี้
<html>
<head>
<meta charset='UTF-8'>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div>
<center><b><h>บัญชีรายรับ - รายจ่าย</h></center></b>
</div>
<br>
<table style="width:100%" bgcolor="orange">
<tr bgcolor="pink">
<th>รายการ</th>
<th>จำนวนเงิน ( บาท )</th>
<th>ยอดคงเหลือ ( บาท )</th>
<th>วัน / เดือน / ปี</th>
</tr>
{% if latest_income_list %}
{% for income in latest_income_list %}
{% if income.income_text != "" %}
<tr>
<td>{{ income.income_text }}</td>
<td bgcolor="green">{{ income.money_in_text }}</td>
<td bgcolor="green">{{ income.remaining }}</td>
<td>{{ income.pub_date }}</td></tr>
{% elif income.income_text == "" %}
<tr>
<td>{{ income.expenses_text }}</td>
<td bgcolor="red" >{{ income.money_out_text }}</td>
<td bgcolor="red" >{{ income.remaining }}</td>
<td>{{ income.pub_date }}</td></tr>
{% endif %}
{% endfor %}
{% endif %}
</table>
<br>
<div >
<form action="{% url 'money:add_the_income' %}" method="post">
{% csrf_token %}
<input type="radio" name="bank" value="in"><b style="font-size:20px;"> รายรับ<br></b>
<input type="radio" name="bank" value="out" ><b style="font-size:20px;"> รายจ่าย<br></b>
<input type="text" name="add_income">
<p><b style="font-size:20px;">จำนวนเงิน</p></b>
<input type="text" name="add_money">
<br>
<br>
<input type="submit" value="เพิ่ม" >
</form></div>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<br>
<center><form action="{% url 'money:history' %}" method="post">
{% csrf_token %}
<input type="submit" value="ประวัติ" >
</form></center>
<br>
</body>
</html>
ในส่วนของ history.html แก้ไขดังนี้
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div >
<center><b><h >ประวัติ</h></center></b>
</div>
<br>
<table style="width:100%" bgcolor="orange">
<tr bgcolor="pink">
<th>รายการ</th>
<th>จำนวนเงิน ( บาท )</th>
<th>ยอดคงเหลือ ( บาท )</th>
<th>วัน / เดือน / ปี</th>
</tr>
{% if latest_income_list %}
{% for income in latest_income_list %}
{% if income.income_text != "" %}
<tr>
<td>{{ income.income_text }}</td>
<td bgcolor="green">{{ income.money_in_text }}</td>
<td bgcolor="green">{{ income.remaining }}</td>
<td>{{ income.pub_date }}</td></tr>
{% elif income.income_text == "" %}
<tr>
<td>{{ income.expenses_text }}</td>
<td bgcolor="red" >{{ income.money_out_text }}</td>
<td bgcolor="red" >{{ income.remaining }}</td>
<td>{{ income.pub_date }}</td></tr>
{% endif %}
{% endfor %}
{% endif %}
</table>
<br>
<form action="{% url 'money:index' %}" method="get">
<center><input type="submit" value="กลับไปยังหน้าหลัก" ></center></form>
</body>
</html>
ทำการเปิด server ด้วยคำสั่ง python manage.py runserver
และผลลัพท์ที่ออกมาได้ผลดังนี้
ทำการเพิ่มรายรับ
ทำการเพิ่มรายจ่าย
คลิกดูประวัติ
------------------------------------------------------------------------------------------------------------------>>
หาก มีข้อผิดพลาดประการใด กระผมขอ อภัยมา ณ ที่นี้ด้วย
