เริ่มจาก
รับเลขจาก url มาแสดง 3 ตัว
ในไฟล์ index.html
ให้แสดงเลขที่รับมา 3 รอบแบบไม่เว้นบรรทัด
<h1>{{number}}</h1>
<label >{{ number }}</label>
<label >{{ number }}</label>
<label >{{ number }}</label>
ในไฟล์ views.py
เมื่อมีการส่ง request เข้ามา ให้ส่งค่าตัวเลขจาก url มาด้วย และนำตัวเลขนั้นไปใส่ลงใน context เพื่อส่งค่าไปใช้ที่ index.html
def show(request,id):
context = {'number': id }
return render(request, 'mulnum/index.html', context)
ในไฟล์ urls.py
ในการเรียก url ให้ใส่ตัวเลขลงมาด้วย
app_name = 'm'
urlpatterns = [
path('<int:id>/', views.show, name='index'),
]
การแสดงผลการทำงาน เมื่อรับเลข 1 จาก url มา จะส่งไปให้ฟังก์ชัน
ทำการแสดงค่าผ่านเทมเพลตที่ชื่อว่า index.html
ในไฟล์ index.html
เพิ่มในส่วนของ <form> เข้ามารับค่า input แบบ text
<h1>NUMBER</h1>
<body>
<form action= "{% url 'm:mult' %}" method="post">
{% csrf_token %}
<input type="text" name="inte" >
<input type="submit" value="SHOW">
</form>
</body>
<label >{{ number }}</label>
<label >{{ number }}</label>
<label >{{ number }}</label>
ในไฟล์ views.py
สร้างฟังก์ชันให้แสดงส่วนรับ input เข้ามา และเปลี่ยนให้ context ที่นำไปแสดงผลเป็นค่าที่มาจากการป้อน input โดยการเรียก request.POST['inte']
def inputnum(request):
return render(request,'mulnum/index.html')
def show(request):
context = {'number': request.POST['inte'] }
return render(request, 'mulnum/index.html', context)
ในไฟล์ urls.py
เพิ่ม path โดย input/ คือการแสดงช่อง text ที่ใช้รับ input และ mult/ คือ ให้แสดงตัวเลขที่รับมา 3 ครั้ง
app_name = 'm'
urlpatterns = [
path('input/', views.inputnum, name='index'),
path('mult/',views.show, name='mult')
]
ใส่เลข 5 ลงในช่อง text
แสดงผลเป็นเลข 5 3 ตัวแสดงสูตรคูณโดยการรับเลขมาจาก url
views.py
เพิ่ม loop ให้ id ที่รับมานำมาคูณกับเลขตั้งแต่ 1 - 12 และเก็บแต่ละค่าลงใน list ชื่อ number และส่ง id , number ให้แสดงผลโดยใช้เทมเพลต index.html
def show(request,id):
number = []
for i in range(1,13):
ans = id * i
number.append(ans)
context = {
'id': id,
'num': number
}
return render(request, 'mulnum/index.html', context)
ในไฟล์ index.html
ให้แสดงสูตรคูณไว้ตรงกลางหน้าต่างแสดงผลโดยการวน loop
<h1>NUMBER</h1>
{% for i in num %}
<center>{{id}} x {{forloop.counter}} = {{i}}</center>
<br>
{% endfor %}
ในไฟล์ urls.py
ในการเรียก url ให้ใส่ตัวเลขลงมาด้วย
app_name = 'm'
urlpatterns = [
path('<int:id>',views.show,name='mul'),
]
การแสดงผลเมื่อในเลข 4 ลงไปใน url
แสดงสูตรคูณโดยการรับเลขมาจาก input แบบ text
ใน index.html
เพิ่มส่วนที่สร้าง input แบบ text โดยให้ไปทำฟังก์ชันที่เกี่ยวข้องกันกับ url name mult
<h1>NUMBER</h1>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action= "{% url 'm:mult' %}" method="post">
{% csrf_token %}
<input type="text" name="inte" >
<input type="submit" value="SHOW">
</form>
</body>
<hr>
{% for i in num %}
<center>{{id}} x {{forloop.counter}} = {{i}}</center>
<br>
{% endfor %}
ใน views.py
ฟังก์ชันแรกให้แสดง textbox สำหรับให้ผู้ใช้ใส่ตัวเลขลงไป ส่วนอีกฟังก์ชันเป็นการรับค่าจาก text ที่ผู้ใช้ใส่ลงไปมาแสดงผลเป็นสูตรคูณ
def inputnum(request):
return render(request,'mulnum/index.html')
def mul(request):
number = []
for i in range(1,13):
ans = int(request.POST['inte']) * i
number.append(ans)
context = {
'id': request.POST['inte'],
'num': number
}
return render(request, 'mulnum/index.html', context)
ใน urls.py
เพิ่ม path mult ให้เชื่อมกันกับฟังก์ชัน mul ที่ทำการคูณค่าและเก็บไว้ใน context
app_name = 'm'
urlpatterns = [
path('input/', views.inputnum, name='index'), # show text box
path('<int:id>',views.show,name='mul'), #multiplication by number in url
path('mult/',views.mul,name='mult'), #multiplication by number from text box
]
การแสดงผลก่อนในเลขลงใน textbox
เมื่อใส่เลข 16 ลงไปและกด SHOW
ไม่มีความคิดเห็น:
แสดงความคิดเห็น