วันเสาร์ที่ 18 มีนาคม พ.ศ. 2560

The Tutorial

   บทนำนี้เกี่ยวกับ 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
และผลลัพท์ที่ออกมาได้ผลดังนี้


















ทำการเพิ่มรายรับ











ทำการเพิ่มรายจ่าย






















คลิกดูประวัติ

 ------------------------------------------------------------------------------------------------------------------>>
   หาก มีข้อผิดพลาดประการใด กระผมขอ อภัยมา ณ ที่นี้ด้วย


 



ไม่มีความคิดเห็น:

แสดงความคิดเห็น