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


















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











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






















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

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


 



New apps

เริ่มทำ เว็บเกี่ยวกับบัญชีรายรับ รายจ่าย

ได้ทำการ สร้างโปรเจคใหม่ และ  app ชื่อ gold






ใน โฟเดอร์ gold









ในส่วนของไฟล์ model.py ใน gold














มี class ชื่อ Income ทำหน้าที่ในการเก็บข้อมูลต่างๆ






















ในส่วนของ ไฟล์ view.py
ได้ทำการสร้าง method  ในการรับต่างๆ และนำมาประมวรผลว่าเป็นรายรับ หรือรายจ่าย
รวมถึงการคำนวณยอดคงเหลือ














ในส่วนของ templates








ในส่วนของ static
















































The Polls
















ในส่วนของไฟล์ views.py ทำการใส่ function เข้าไป และให้ return ไปยังหน้าต่างๆ พร้อมกับค่า
question_id ในส่วนของไฟล์ views.py เปรียบเสมือน controller ที่จะคอยรับค่า ประมวณผล
และทำการ return กลับไป














ในส่วนของไฟล์ urls.py ทำการแก้ไข โดยแต่ละ url จะรับค่า question_id มาด้วย
ผลที่ได้ เมื่อพิมพ์ ในช่อง url ของ browser ตามนี้






















ต่อไปเป็นการสร้าง โฟเดอร์ templates เพื่อใช้ในการตกแต่ง เว็บ










ทำการสร้างไฟล์ index.html และ details.html











โดยรูปแบบ การจัดวางไฟล์ต่างๆจะเป็น polls ---> templates ---> polls ---> ไฟล์ .html ต่างๆ

ในส่วนของ index.html










ในส่วนของ details.html








ผลที่ได้

























แหล่งที่มา https://docs.djangoproject.com/en/1.10/intro/tutorial03/
และได้ทำการตกแต่ง และแก้ไข เพิ่มเติม จาก tutorial 04 ผลที่ได้คือสามารถ กดvote และ
แสดงจำนวน ของคนที่ vote ในตัวเลือกนั้น และทำการกแต่งเพิมเติมเล็กน้อย



















































แหล่งที่มา https://docs.djangoproject.com/en/1.10/intro/tutorial04/

About database

     ในส่วน ของ app ใน model  ของ app polls จะทำหน้าที่เป็นส่วนที่ใช้ในการเก็บข้อมูล
หรือทำหน้าที่เป็น database นั้นเอง โดยที่การแก้ไขตาม tutorial02 ตามภาพ












โดยในส่วนของ class Question จะทำหน้าที่เก็บ คำถาม
        ส่วนของ class Choice     จะทำหน้าที่เก็บตัวเลือก

ต่อไปทำการติดตั้ง app ของเราลงไปที่ django (polls)







  เพื่อเป็นการบอกว่าเรามี app ที่ชื่อ polls อยู่ใน django แล้ว

















ต่อไปคือการ makemigrations เพื่อให้ django รู้ว่ามีการเปลี่ยนแปลง model
(ในที่นี้คือการสร้างใหม่)











ทำการ migrate เพื่อ ให้ database นำไปใช้ถ้าหาก model มีการเปลี่ยนแปลง
ต้องทำการ migrate ด้วย








แหล่งความรู้ https://docs.djangoproject.com/en/1.10/intro/tutorial02/