การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 3
ต่อจาก
การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 1
การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 2
การทำงานเกี่ยวกับฟอร์ม Python
1.สร้างโปรเจค Django ชื่อ Studentinfo ด้วยคำสั่ง
...\scripts\mydjango>django-admin startproject helloapp <Enter>
2.เมื่อสร้างโปรเจคได้เเล้วให้เข้าไปในโฟล์เดอร์ที่สร้างโดยใช้คำสั่ง CD studeninfo <Enter>
เมื่อเข้ามาในโฟล์เดอร์ Studeninfo เเล้ว ก็เริ่มสร้างเเอพกันเลย โดยชื่อแอพให้ตั้งชื่อว่า studentinfo โดยใช้คำสั่ง
> python manage.py startapp studentinfo
3.จากนั้นให้เราใส่ชื่อ App ใน settings.py ดังนี้
4.เมื่อเราทำการใส่ชื่อ App ใน settings.py เเล้ว ขั้นต่อไปจะเป็นการ Migration ฐานข้อมูล โดยใช้คำสั่ง
> python manage.py migrate <Enter>
5.จากนั้นให้ทำการกำหนด Path ให้กับโปรเจคโดยใส่ path ของ app ใน studeninfo\studeninfo\urls.py
from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('studentinfo.urls')),
]
6.เมื่อแก้ไขไฟล์ urls.py เสร็จเเล้ว ให้ Copy ไฟล์ตัวนี้ไปวางใน studentinfo หรือภายใน App ของเรา เเละทำการแก้ไข Url ภายในดังนี้
from django.urls import path
from django.conf.urls import url
from studentinfo import views
urlpatterns = [
path('',views.HomePageView.as_view()),
path('result/',views.index),
]
7. เมื่อทำการแก้ไขไฟล์ url ทั้ง 2 ที่เสร็จเรียบร้อยเเล้ว ให้เราทำการแก้ไขไฟล์ View.py ภายใน Studentinfo ตามตัวอย่างดังนี้
from django.shortcuts import render
from django.views.generic import TemplateView
from django.template import loader
from django.http import HttpResponse
# Create your views here.
class HomePageView(TemplateView):
def get(self,request,**kwargs):
return render(request, 'index.html', context=None)
def index(request):
if request.method == 'POST':
name = request.POST.get('name')
email = request.POST.get('email')
phone = request.POST.get('phone')
context = {
'name':name,
'email':email,
'phone':phone
}
template = loader.get_template('result.html')
return HttpResponse(template.render(context,request))
else :
#if post request is not true
#returning the form template
template = loader.get_template('index.html')
return HttpResponse(template.render())
8.สร้างโฟล์เดอร์ชื่อTemplateใน studentinfo หรือภายใน App ของผู้ใช้งาน จากนั้นสร้างไฟล์ Html ชื่อ index.html โดยโค้ดภายในจะมีดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Django Form</title>
</head>
<body>
<h2>Django Form</h2>
<form method="post" action="/result/">{% csrf_token %}
<table>
<tr>
<td>Enter your name: </td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>Enter your email:</td>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<td>Enter your phone:</td>
<td><input type="text" name="phone"/></td>
</tr>
<tr>
<td><button>Submit</button></td>
</tr>
</table>
</form>
</body>
</html>
9.เมื่อสร้างไฟล์ index เสร็จเรียบร้อยเเล้ว ให้คัดลอกโค้ด ไฟล์ index มา จากนั้นสร้างไฟล์ใหม่ชื่อ result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ทดสอบรับข้อมูลจากฟอร์ม</title>
</head>
<body>
<h2>Django Form</h2>
<form method="post" action="/result/">
<table>
<tr>
<td>Enter your name: </td>
<td><strong>{{ name }}</strong></td>
</tr>
<tr>
<td>Enter your email:</td>
<td><strong>{{ email }}</strong></td>
</tr>
<tr>
<td>Enter your phone:</td>
<td><strong>{{ phone }}</strong></td>
</tr>
<td><a href="/">ย้อนกลับ</a></td>
</table>
</form>
</body>
</html>
10.ทดลองรันเซิร์ฟเวอร์ จะเเสดงผลดังนี้
เมื่อทำการกรอกข้อมูลจะได้เเสดงผลข้อมูลตามที่เราได้กรอกไป ดังนี้
เมื่อทำการกด Submit จะได้ผลลัพธ์ดังนี้
สรุปเมื่อการทำงาน เมื่อผู้ใช้งานทำการกรอกข้อมูล เช่น ชื่อ E-mail หรือเบอร์โทรศัพท์เข้าไป หน้าเว็บจะทำการเก็บข้อมูลเอาไว้ เเล้วนำไปแสดงผลที่หน้า result โดยการใช้คำสั่ง post ถ้าหากไม่มีการป้อนข้อมูล หรือข้อมูลไม่ครบระบบจะเเสดงหน้าผลลัพธ์เดิมออกมา จากการใช้ฟอร์มดังกล่าว ผู้ใช้งานสามารถนำฟอร์มดังกล่าวไปพัฒนาต่อหรือใช้ในการเก็บข้อมูลลงฐานข้อมูลได้
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Python
- บทเรียนเกี่ยวกับ Python (166)
- ถาม - ตอบเกี่ยวกับเรื่อง Python (606)
- ความรู้เกี่ยวกับ Python (261)
