decorate rate page

 

rate page(เก่า)

 

 rate page(ใหม่)

 

    จากตอนแรกใช้ bootstrap ตกแต่งแล้วดูไม่ค่อยสวยซักเท่าไหร่ จึงลองมาใช้เป็น table แทน และในส่วนของการคอมเม้น ใช้ textarea เพื่อให้ผู้ใช้สามารถใช้ได้สะดวกขึ้น

Commit meaning

first commit
    - เริ่มสร้างไฟล์งานโปรเจค

make home page page
    - สร้างหน้า home page ที่ใช้เลือกคนขับ taxi

make rage page
    - สร้างหน้า rage page เพื่อที่ผู้ใช้จะสามารถให้คะแนนคนขับแต่ละคนได้

can rate cab driver
    - ผู้ใช้สามารถให้คะแนนคนขับและนำไปเก็บในฐานข้อมูลได้

make thank page, make login page
    - สร้างหน้า ขอบคุณหลังใช้เสร็จ และกลับไปที่หน้าแรก
    - สร้างหน้า login

complate functional test, decorate with bootstrap
    - เปลี่ยนจากการกดเลือกคนขับเป็นการเลือกเป็นการพิมพ์ชื่อหา
    - เขียน functional test เสร็จ
    - ตกแต่งหน้าเว็บด้วย bootstrap


add about page
    - สร้างหน้าที่บอกถึงความสามารถของ app

change about button location
    - เปลี่ยนตำแหน่งปุ่ม about ในหน้า login

fix login & sign in page to inheritance template
    - ในหน้า log in และ หน้า sign in มีรูปแบบคล้ายกัน จึงเปลี่ยนมาใช้แบบ inheritance 
    template

change word on button
    - เปลี่ยนคำบนปุ่มในหน้า sign in page

add comment in code
    - คอมเม้นถึงการทำงานของแต่ละบรรทัด

decorate rate page
    - ตกแต่งหน้า rate ให้มีความดูดีขึ้น

inheritance templates

    เราได้นำโค้ด html ของ login page และ sign in page มาเทียบกันแล้ว โค้ดมีหน้าตาที่คล้ายกัน

 login.html

 signin.html

     เพื่อให้เป็นการประหยัดเวลาในการเขียนโค้ด เราจึงสร้าง file หลัก ที่เป็นต้นแบบให้กับ login.html

 และ signin.html ซึ่งผมตั้งชื่อ file นี้ว่า id_pass_input_b.html

 

id_pass_input_b.html

    จากที่เห็น เราจะใส่เป็นตัว {% block ... %}{% endblock %} ซึ่งเราเรียกว่า block เพื่อที่เราจะได้ใส่ส่วนที่ต่างกันลงใน block

login.html

 

 signin.html

    เราจะสามารถใช้ file หลักได้ เราจะต้องใช้
       {% extends ' directory ' %}
    เราจึงจะสามารถโหลดไฟล์หลักมาใช้ได้ จากนั้น เราก็ใส่โค้ดตามที่เราต้องการลงใน block ตามที่เราต้องการได้
    
   

เมื่อใช้ bootstrap กับ app และการเพิ่ม comment ในหน้า rate page

Log in page

                 
                                      Home page

Rate page 

Sign in page

 

     เพิ่มในส่วนของ comment เข้ามาเพื่อที่ลูกค้าจะได้สามารถติชมคนขับแท๊กซี่ได้

    
จึงเพิ่ม attribute ใน class DriverHistory ชื่อ comment เพื่อที่จะใช้เก็บข้อมูลในส่วนนี้ได้

Rate Your Cab part2

    เพิ่มหน้า sign page ขึ้นมาเพื่อที่จะให้ผู้ใช้ ที่ยังไม่เคยใช้เข้ามาสมัครก่อน แล้วจึงจะ log in เข้าไปในหน้า homepage ได้

  

 

     เปลี่ยนการเก็บคะแนนจากเมื่อครั้งที่แล้วโดยครั้งนี้จะนำการให้คะแนนทุกครั้งมาหาค่าเฉลี่ย แล้วจึงเก็บเป็นคะแนนของแต่ละคน

     จากครั้งที่แล้วเป็น sild down input เป็น radion input input

 

    

Rate Your Cab part3

    เปลี่ยนจากเลือกคนขับโดยการคลิ้ก เป็นเลือกโดยใช้เป็นการใส่ชื่อลงไป เพื่อเป็นการเจาะจงว่าต้องการที่จะให้คะแนนคนขับคนนั้น

 

     User Story

         1.มานีได้ยินเกี่ยวกับแอพนี้จึงลองเปิดขึ้นมาดู

         2.เธอเปิดมาเจอหน้า log in

         3.เธอใส่ชื่อและรหัส

         4.เธอพิมพ์หาชื่อ สมหมาย

         5.เธอให้คะแนนสมหมาย 4 ดาว

         6.เธอกดกลับไปที่หน้า log in

         7.Don goes to the sign in page

         8.He insert his name and password

         9.He click back to the login page

        

   

Rate Your Cab part1

Log In


Home Page


Rate Page


Thank Page


ภายใน view.py มีทั้งหมด 4 method

• callLogInPage
• callHomePage
• callRatePage
• savePoint

callLoginPage method

    เรียกหน้า Log In ขึ้นมา

callHomePage method

    เมื่อผู้ใช้ Log In เข้ามาแล้ว ใน method นี้จะ เทียบชื่อผู้ใช้กับฐานข้อมูล จากนั้นจึงเทียบรหัสกับฐานข้อมูลอีกที แล้วจึงเรียกหน้า homepage

callRatePage method
    หลังจากที่ผู้ใช้เลือกคนขับแล้วจะเรียกหน้า Rate Page ขึ้นมา

savePoint method
    หลังจากที่ผู้ใช้ให้คะแนนคนขับ taxi แล้วจะนำมารวมกับคะแนนก่อนหน้าโดยดึงเอาจาก point ที่อยู่ใน CabDriver แล้วจึงหาร 2 แล้วเก็บเข้าไปใหม่ แล้วจึงเรียกหน้า thank page ขึ้นมา

มีทั้งหมด 4 template

• login.html
• home.html
• rate_page.html
• thank_page.html

 

Advertising Link

https://www.youtube.com/watch?v=eb0D8zKgs5Y&feature=youtu.be

github link
    https://github.com/FoxIsMaName/trial_tdd.git

app link
    http://redfury.pythonanywhere.com/

บัญชีรายรับรายจ่าย : tutorial 5

    ในส่วนนี้เราจะทำให้ผู้ใช้สามารถใส่ type income และ type payment ได้
        1.สร้างไฟล์ template insertType เพื่อให้ผู้ใช้สามารถเพื่อประเภทของรายการได้ตามที่
    ต้องการ

<html>
<h1 style ="text-align:center">Add Income Type</h1>
    <form action="{% url 'ManMon:saveType'%}" method="post">
    <input type="radio" name="choice" value="income">
    <label style ="color:rgb(110, 101, 252);">Income</label>
    <input type="radio" name="choice" value="payment">
    <label style ="color:rgb(110, 101, 252);">Payment</label><br>
    {% csrf_token %}
        <p style ="color:rgb(110, 101, 252);">
            Type:<input type="text" name="type">
            <input type="submit">
        </p>
    </form>
<a href="{% url 'ManMon:mainpage' %}" class="button"> back to main page</a>
</html>

        2.จากนั้นเราจะต้องมี method callInsertType ที่เรียกหน้า template insertType ขึ้นมา และเราจะ
    ต้องมี method saveType  ที่ใช้เพื่อนำประเภทของรายการไปเก็บ

def callInsertType(request):    return render(request,"ManMon/insertType.html",'')

def saveType(request):    if(request.POST['choice'] == 'income' ):        try:             save_type = request.POST['type']        except:            save_type = ""        else:            save_type = TypeIncome(type_income = save_type)            save_type.save()    if(request.POST['choice'] == 'payment' ):        try:            save_type = request.POST['type']        except:             save_type = ""        else:            save_type = TypePayment(type_payment = save_type)            save_type.save()    return render(request, "ManMon/saveType.html",{'save_type':save_type})

        3.เมื่อเราเก็บประเภทของรายการเสร็จแล้ว เราจะให้แสดงหน้าให้ผู้ใช้เห็นว่า ผู้ใช้ได้เซฟ
    ประเภทรายการนี้ไปแล้ว

<html><h1>You save:{{save_type}}</h1><a href="{% url 'ManMon:mainpage' %}" > back to main page</a></body></html>

บัญชีรายรับรายจ่าย : tutorial 2

    ใน tutorial นี้ เราจะนำรายการที่เราบันทึกไว้ มาแสดงออกมานะครับ

        1.เราจะสร้างไฟล์ ManMon/template/ManMon/main.html ซึ่งเป็นไฟล์ template ที่เราจะใช้เพื่อ
    นำมาแสดงผลข้อมูลตามที่เราต้องการ แล้วก็ใส่โค้ดด้านล่างลงไป

<html><h1 style = "text-align: center;">Manage Your Money</h1> <table border=1 style="width:50%;clear:both" align="center">         <tr>             <td>Note</td>             <td>Money</td>             <td>Type</td>             <td>Date</td>         </tr>    {% for account in account_list %}         <tr>             <td>{{ account.note }}</td>             <td>{{ account.money }} Baths</td>             <td>{{ account.type_note }}</td>             <td>{{ account.pub_date }}</td>         </tr> {% endfor %}         <tr>             <td style="text-align: center;" colspan="5">money sum : {{ remain_money }} Baths</td>         </tr></html>

        2.จาก tutorial 1 เราจะเปลี่ยน method callMainPage ให้เป็นตามด้านล่าง เพื่อให้มันดึง
    template ที่เราต้องการมาใช้

def callMainPage(request):
    account_list = Account.objects.order_by('-pub_date')
    #calulation the rest of money
    remain_money = 0
    for account in account_list :
        remain_money += account.money
    account_list = Account.objects.order_by('-pub_date')[:5]
    for account in account_list :
        if account.money < 0 :
            money = account.money
            account.money = (-1)*float(money)
    return render(request, 'ManMon/main.html',
{'remain_money':remain_money, 'account_list':account_list})

        จากโค้ดด้านบนจะมีการเลือก 5 รายการล่าสุดที่มาแสดง ที่หน้าหลัก


 

บัญชีรายรับรายจ่าย : tutorial 4

                ในหน้าหลักนั้นเราใส่ให้เราสามารถดูได้แค่ 5 รายการแรก แต่ในส่วนนี้นั้นเราจะมาสอน

    คนก่อน
    1.เราก็สร้างหน้า template ของ history เพื่อให้เราสามารถดูรายการเก่าๆได้ตามนี้

<html>
<h1 style="text-align:center">History</h1>
{% if account_list %}
<table border=1 style="width:50%;clear:both" align="center">
        <tr>
            <td>Note</td>
            <td>Money</td>
            <td>Type</td>
            <td>Date</td>
        </tr>
    {% for account in account_list %}
        <tr>
            <td>{{ account.note }}</td>
            <td>{{ account.money }} Baths</td>
            <td>{{ account.type_note }}</td>
            <td>{{ account.pub_date }}</td>
        </tr>
    {% endfor %}
        <tr>
            <td style="text-align: center;" colspan="5">money sum : {{ money_sum }} Baths</td>
        </tr>
    <a href="{% url 'ManMon:mainpage'%}">{{"back to main page"}}</a>
{% else %}
    <p> Insert your income</p>
{% endif %}
</html>

    2.จากนั้นเพิ่ม method ที่ใช้ในการเรียก

def history(request):
    account_list = Account.objects.order_by('-pub_date')
    money_sum = 0
    for account in account_list :
        money_sum += account.money
    for account in account_list :
        if account.money < 0 :
            money = account.money
            account.money = (-1)*float(money)
    return render(request, 'ManMon/history.html', {'account_list':account_list, 'money_sum':money_sum}) 

        ในส่วนก็จะคำนวณค่ายอดเงินรวม และค่าทั้งหมดไปที่หน้า template history

    3.เปิดไฟล์ ManMon/urls.py แล้วเพิ่ม url ของ history ตามนี้

                              url(r'^history$', views.history, name="history")

        จากนั้น เพิ่มปุ่มกดแบบ button ลงไป

<a href="{% url 'ManMon:history' %}">{{"history"}}</a>

บัญชีรายรับรายจ่าย : tutorial 3

    ส่วนนี้เราจะมาทำส่วนการทำรายการนะครับ
        1.สร้างไฟล์ ManMon/templates/ManMon/accountInput.html แล้วใส่โค้ดด้านล่าง ในส่วนนี้จะ
    เป็นส่วนที่ใช้เพื่อใส่ข้อมูลลงไป

<html>
<h1 style = "text-align: center;">Manage Your Money</h1>
    <form action="{% url 'ManMon:saveAccount' %}" method="post">
    {% csrf_token %}
        <p>
        Note:
        <input type="text" name="note"></p>
        <p>Money:
        <input type="number" name="money" step="any"></p>
        <p>Date:
        <input type="datetime-local" name="dmy"></p><br>
        <input type="radio" name="choice" value="income">
        <label style = "color:rgb(110, 101, 252);" >income</label>
        <p>Type:
        <select name="type">          
            {% for typeincome in type_in_list %}
                <option for="type_income{{ forloop.counter }}">{{ typeincome.type_income }}</option>
            {% endfor %}
        </select>
        </p><br>
        <input type="radio" name="choice" value="payment">
        <label style = "color:rgb(110, 101, 252);">payment</label>
        <p>Type:
        <select name="type">
            {% for typepayment in type_pay_list %}
                <option for="type_payment{{ forloop.counter }}">{{ typepayment.type_payment }}</option>
            {% endfor %}
        </select>
        </p>
        <input type="submit" >
    </form>
</html>

        จากโค้ดด้านบน จะมี input 5 ตัว คือ
            note - ใช้กรอกรายละเอียดของรายการ
            money - ใช้กรอกจำนวนเงินของรายการ
            choice - ใช้เลือกว่าจะเป็น input แบบ income หรือ payment
            type - ใช้เลือกประเภทของรายการ
            dmy - ใช้เลือกเวลาและวันที่ที่ทำรายการ

        2.สร้าง method callAccountInput ซึ่งในส่วนนี้จะเรียก template accountInput มา และส่งค่าที่อยู่
    ใน TypeIncome และ TypePayment ออกไป

def callAccountInput(request):
    type_in_list = TypeIncome.objects.order_by('-type_income')
    type_pay_list = TypePayment.objects.order_by('-type_payment')
    return render(request, 'ManMon/accountInput.html', {'type_in_list':type_in_list,'type_pay_list':type_pay_list})

        3.ไปที่ไฟล์ ManMon/urls.py แล้วใส่ url ลงไปตามนี้

url(r'^accountInput$', views.callAccountInput, name="callAccountInput")

            จากนั้น ให้กลับไปที่ไฟล์ ManMon/templates/ManMon/main.html แล้วเพิ่มโค้ดนี้เข้าไป

<a href="{% url 'ManMon:callAccountInput' %}">{{"Account Input"}}</a>

            ผลคือเราจะได้เป็นปุ่มที่เราจะสามารถเข้าไปที่เราจะสามารถกรอกข้อมูลได้

        4.เราทำในส่วนกรอกข้อมูลแล้วแต่ ยังไม่ได้ทำได้ทำในส่วนเก็บข้อมูล เพราะฉะนั้น เราจะมา
    เก็บข้อมูลกัน โดยเราจะเข้าไปใน view.py แล้วสร้าง method saveAccount

def saveAccount(request):
    try:
        note = request.POST['note']
        money = request.POST['money']
        type_note = request.POST['type']
        date = request.POST['dmy']
    except:
        note = ""
        money = ""
        type_note = ""
        date = ""
    if(request.POST['choice'] == 'payment'):
        money = (-1)*float(money)
    ac = Account(note = note, money = money, type_note = type_note, pub_date = date)
    ac.save()
    return render(request, 'ManMon/saveAccount.html',{'note':note, 'money':money, 'type_note':type_note, 'date':date})

        ซึ่งเราจะให้ POST ดึงค่าที่ได้จาก templates ที่ได้จากการ submit มา แล้วนำไปเก็บไว้ใน
    Account แล้วส่งค่าที่ได้เก็บไปแล้ว ส่งไปที่หน้า template saveAccount

        5.เมื่อเราสร้าง method saveAccount แล้วเราก็จะเพิ่ม url ของ method นี้เพื่อให้เราสามารถใช้
    method

url(r'^accountInput$', views.callAccountInput, name="callAccountInput")

        6.ในส่วนนี้จะเป็นการบอก ผู้ใช้ว่า ผู้ใช้ได้ทำรายการอะไรไปแล้ว โดยจะได้รับค่าจาก method
    saveAccount จะมีโค้ดดังนี้

<html>
<h1 style = "text-align:center; font-size:330%;">Manage Your Money</h1>
<h1>You're already save:</h1>
<p>Note : {{note}}</p>
<p>Type : {{note_type}}</p>
<p>Money : {{money}}</p>
<p>Date : {{date}}</p>
<a href="{% url 'ManMon:mainpage'%}" class="circleBtn">{{"back to main page"}}</a>
</html>

       

บัญชีรายรับรายจ่าย : Tutorial 1

        1.เริ่มแรก เราต้องมี django ก่อน เพราะ tutorial ต่อไปนี้ใช้ django เป็น framework และสาเหตุ
    ที่ใช้คือ ใช้เวลาน้อย, ใช้ code น้อย, ง่ายต่อการพัฒนา และปลอดภัย ต่อมา เราต้องสร้างโปร
    เจคขึ้นมาก่อน โดยใช้คำสั่ง ลงใน command line จาก คำสั่งด้านล่าง จะเป็นการสร้าง โปรเจค
    ที่ชื่อ tutoProject

django-admin startproject tutoProject

    ซึ่งเราจะได้ เป็น folder แบบนี้

            tutoProject

                - manage.py

                - tutoProject

                      - __init__.py

                      - settings.py

                      - urls.py

                      - wsgi.py

        2.ต่อมา เราจึงจะสร้าง เป็น app โดยการใช้คำสั่ง

python3 manage.py startapp ManMon

        จะเป็นการสร้างแอพที่ชื่อ ManMon (ในส่วนนี้แล้วแต่คนตั้งนะครับ) จะได้เป็นไฟล์ตามนี้
          ManMon
              - __init__.py
              - apps.py
              - admin.py
              - model.py
              - test.py
              - view.py
              - migration
                    - __init__.py

    3. ในไฟล์ view.py นั้นจะเป็นส่วนที่เอาไว้เก็บ method ทั้งหมดที่เราจะใช้ใน appplication เพราะ
    ฉะนั้น method แรกของเรานั่นคือ callMainPage 

        from django.shortcuts import render        from django.http import HttpResponse        def callMainPage(request):            return HttpResponse("Hello, this is ManMon app")

    4.หลังจากนั้น เราก็เพิ่ม ManMon/url.py แล้วใส่โค้ดด้านล่าง

from django.conf.urls import url from . import views app_name = 'ManMon' urlpatterns = [                       url(r'^$', views.callMainPage, name="callMainPage"), ]

        เพื่อให้เป็นการเรียกใช้ หน้าแรกของ app ตาม pattern regular expression และเรียกใช้ method
    นั้นๆทดสอบการแสดงหน้าเว็บโดยใช้

     python3 manage.py runserver

        จะได้ขึ้นเป็นหน้าที่บอกว่า 

        Hello, this is ManMon app

    5.จากนั้นเราก็เข้าไปใน tutoProject/ManMon/model.py เพื่อสร้าง ส่วนที่ไว้เพื่อเก็บข้อมูล ดังนี้

class Account(models.Model):    note = models.CharField(max_length=200)    money = models.FloatField(default=0)    type_note = models.CharField(max_length=200, default='salary')    
pub_date = models.DateTimeField('date published')   
def __str__(self):           
    return self.pub_date    
def __str__(self):            
    return self.type_note    
def __flo__(self):           
    return self.money    
def __str__(self):               return self.note

class TypeIncome(models.Model):
    type_income = models.CharField(max_length=200)
    def __str__(self):
    return self.type_income

class TypePayment(models.Model):    type_payment = models.CharField(max_length=200)    def __str__(self):        return self.type_payment 

        Account - ใช้เก็บข้อมูลรายรับและรายจ่ายของผู้ใช้ ซึ่งจะมี attribute ดังนี้
                         - note = ใช้เก็บรายละเอียดของรายการนั้น(string)
                         - money = ใช้เก็บค่าจำนวนเงินของรายการ(float)
                         - type_note = ใช้เก็บประเภทของรายการ(string)
                         - pub_date = ใช้เก็บเวลาและวันที่(string)

        TypeIncome - ใช้เก็บประเภทรายรับมี attribute ดังนี้
                         - type_income = ใช้เก็บประเภทของรายรับ(string)

        TypePayment - ใช้เก็บประเภทของรายจ่ายมี attribute ดังนี้
                         - type_payment = ใช้เก็บประเภทของรายจ่าย(string)

    5.เราจะต้องบอกกับ โปรเจคหลักว่า เรามี แอพนี้แล้ว โดยที่มันจะไปอ้างอิงเอา class จากใน 
    application อย่างแรก เราจะเข้าไปในไฟล์ tutoProject/tutoProject/settings.py จากนั้น เราจึงจะ
    เจอกับบรรทัดที่เขียนว่า  INSTALLED_APPS แล้วจึงจะเพิ่มโค้ดด้านล่างลงไป

     'ManMon.apps.ManMon',

        จากนั้นก็ใช้คำสั่ง

         python3 manage.py makemigrations ManMon         python3 manage.py sqlmigrate ManMon 0001         python3 manage.py migrate    

        เพื่อที่จะอัพเดตของมูลใน database ว่ามีอะไรใน model.py ที่เปลี่ยนไปบ้าง

    5. ในขั้นตอนนี้ เราจะมาทดลอง เก็บข้อมูล 

        อย่างแรก เรามาเปิด API ใน Django โดยใช้คำสั่ง 

python3 manage.py shell

        ต่อมาก็

>>> from polls.models import Account,TypeIncome, TypePayment           >>> from django.utils import timezone 
>>> ac = Account(note = "ได้เงิน", money = 100, type_note =   
                "saving", pub_date=timezone.now()) 
>>> ti = TypeIncome(type_income = "saving")>>> ti.save()
>>> tp = TypePayment(type_payment = "food")
>>> tp.save()

        ในขั้นตอนต่อไป เราจะได้เห็นข้อมูลที่เราใส่ลงไป
  

    6.เราจำเป็นที่จะต้องมี admin ที่จะจัดการกับข้อมูลที่เข้ามา จะสามารถสร้าง admin ได้โดย

python manage.py createsuperuser

         จากนั้น จะขึ้นให้ใส่ชื่อ, email และรหัส เมื่อเสร็จเราจึงจะสามารถเข้าไปหน้าที่อยู่ของ admin 

    ได้ตาม ที่อยู่ /admin/ พอเข้าไปเราก็จะเห็น

        Account

        TypeIncome

        TypePayment

        ซึ่งแต่ละตัวก็จะมีข้อมูลที่เราใส่ไป

       

 

บัญชีรายรับรายจ่าย(part 4)

     1.จากปัญหาที่ว่า ผมไม่สามารถเรียงวันที่ได้ เลยทำให้เป็น class เดียวกันเป็น class Account

    2.ส่วนใน view นั้นเราเพิ่ม method ดังนี้

        callMainPage
             -คิดยอดเงินรวม
             -ส่ง 5 รายการล่าสุดไปแสดง

          callAccountInput
               เป็นส่วนที่จะส่งค่า type ออกไปถ้ามีค่า income เข้ามา จะส่ง type ของ income ออกไปที่หน้า
          แต่ถ้ามีค่า payment เข้ามา จะส่งค่า type ของ payment ออกไป ซึ่งจะรับค่า choice มาจาก
          template chooseInOrPay ซึ่งถ้าคลิ้กปุ่ม Account Input เข้ามา จะ render หน้า chooseInOrPay
          ออกไป

            saveAccount
                 เป็นส่วนที่ไว้เก็บข้อมูลลงใน Account และจะ render หน้า saveAccount ออกไปเพื่อแสดง
            ทำให้ผู้ใช้รู้ว่า ได้เก็บค่าอะไรไป

              history
                   ส่วนนี้จะส่ง attribute ที่อยู่ใน Account ไปที่หน้า template history และยอดเงินรวมออก
              ไป

    3.ในส่วนของ template มีดังนี้

        accountInput
              เป็นหน้าที่จะรับ input แล้วส่งไปที่ method saveAccount เมื่อผู้ใช้กด submit ไป

    

        saveAccount
            ในส่วนนี้จะรับค่า note, money, choice และ type จาก method saveAccount แล้วมาแสดงผลที่
        หน้านี้

        history
            และส่วนนี้จะเป็นส่วนที่จะแสดงรายการที่ทำไปทั้งหมด โดยรับค่าจาก method history

บัญชีรายรับรายจ่าย(part 3)

    1.แบ่งหน้า input income และหน้า input payment เพื่อให้ได้เป็น submit แค่ปุ่มเดียว

    2.สร้าง ปุ่มที่ทำให้ผู้ใช้ สามารถใส่ type ลงไปได้ตามที่ต้องการ

      ซึ่งจะมี method ที่ใช้เรียกหน้า และที่ใช้เก็บ type ดังนี้

    3.ส่วน url ก็มีดังนี้

     3.ได้ใช้ ภาษา CSS เพื่อตกแต่ง หน้า template ซึ่ง เราจะสร้าง ไฟล์
        ManMon/style/ManMon/style.css แล้วจึงใส่ในสิ่งที่เราอยากตกแต่ง เช่น สีตัวอักษร, ฟ้อนของ
        ตัวอักษร หรือ หน้าตาของตารางที่เราอยากให้เป็น

      ซึ่งถ้าเราอยากเรียกใช้ก็ให้เอาคำสั่งด้านล่าง ไปใส่ไว้ใน html นั้นๆ

บัญชีรายรับรายจ่าย(part 2)

     1.สร้าง class TypeIncome และ class TypePayment ใน model

    2.สร้างส่วนที่เลือกใน template main_page ซึ่งจะสร้างเป็น pull down input 

        หลังจากนั้นเราจึงเพิ่ม attribute ใน class Income กับ class Payment เพื่อให้เราสามารถเก็บค่า type

    ลงไปใน class ได้ 

บัญชีรายรับรายจ่าย(part 1)

    1.เราให้ใน ข้อมูลหลักเรามี 3 ส่วน คือ income, payment และ type(ว่างร่างไว้ ยังไม่เริ่ม) ซึ่งในแต่ละ class นั้น จะมีส่วนย่อยอยู่อีก ดังนี้

       Income

           - income_text(ชื่อของแต่ละรายการ)

           - earning(จำนวนเงินของรายจ่าย)

           - pub_date(วันที่ของรายการ)

       Payment
           - payment_text(ชื่อของรายการ)
           - buy_thing(จำนวนเงินของรายจ่าย)
           - pub_date(วันที่ของรายการ)

    2.หลังจากนั้น เราจึงสร้าง method ที่เราจะใช้ดังนี้
     
       callMainPage

           ใช้เพื่อเรียกหน้าหลักขึ้นมา ซึ่งจะคำนวนยอดรวมออกมา และส่งค่าที่ได้ไปที่ template
        main_page

        saveIncome

            จะเก็บค่าที่ผู้ใช้ใส่เข้ามา แล้วนำไปเก็บไว้ใน class Income แล้วคำนวณค่าเงินที่ได้ทั้งหมดไปที่
        template main_page

        savePayment

            จะเก็บค่าที่ผู้ใช้ใส่เข้ามา แล้วนำไปเก็บไว้ใน class Payment แล้วคำนวณค่าเงินที่ได้ทั้งหมดไป
        ที่ template main_page

        tableIncome
         
            จะส่งข้อมูลจาก class Income ไปที่หน้า template showIncome

        tablePayment

            จะส่งข้อมูลจาก class Payment ไปที่หน้า template showPayment

    3.หลังจากสร้าง method แล้วก็สร้าง template เพื่อแสดงค่าที่ได้จาก method ดังนี้

        main_page

            เราออกแบบให้ปุ่มกดโดยใช้ รูปแบบ css
     

            และสามารถใช้ปุ่ม ให้เข้าไปใช้ method showIncome และ showPayment ตามนี้

            

            จากนั้นเราก็ทำส่วนที่ใช้ใส่รายการ ซึ่งมี 2 ส่วน คือ ส่วนที่ใช้ใส่รายรับ(Income) และส่วนที่ใส่

        รายจ่าย(Payment)

        showIncome

            ในส่วนนี้เราจะรับข้อมูล Income จาก method tableIncome เพื่อมาแสดงเป็นตารางในหน้านี้

        showPayment

            ในส่วนนี้เราจะรับข้อมูล Payment จาก method tablePayment เพื่อมาแสดงเป็นตารางในหน้านี้