ความคืบหน้าโปรเจค

การทำงานตาม use case สามารถทำงานได้ดังนี้
1 สามารถค้นหาข้อมูลรายละเอียดของร้านอาหารจากชื่อร้านได้
2 สามารถค้นหารายชื่อร้านอาหารจากประเภทของร้านอาหารได้

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

use case ที่ยังไม่ได้ดำเนินการ
การสุ่มร้านอาหาร

Continue project

https://github.com/Freezzes/foodproject

Commit ที่ 6
create base template
สร้าง template ส่วนที่แสดง link ด้านบน และนำไปใช้ในทุกหน้า template

Commit ที่ 7
can search data from restaurant name
เพิ่มฟังก์ชันให้สามารถค้นหาข้อมูลได้เมื่อใส่ชื่อร้านที่ถูกต้องตรงกับในฐานข้อมูล

Commit ที่ 8
create template
สร้างหน้าค้นหาด้วยประเภทของร้านค้า

Commit ที่ 9
modify model & can search from category
แยกประเภทของร้านเป็น 1 โมเดลแล้วให้ร้านค้าต่างๆอยู่ในประเภทร้านค้า

Commit ที่ 10
search by name
แก้ไขการเรียกใช้งานฟังก์ชันค้นหาด้วยชื่อ

Commit ที่ 11
create review template
สร้างหน้าเทมเพลตสำหรับการรีวิว

Commit ที่ 12
change method post to get
เปลี่ยน method ที่ใช้เรียกข้อมูลออกมาแสดงเป็น GET

Commit ที่ 13
change function name
เปลียนชื่อฟังก์ชันให้สื่อถึงสิ่งที่ฟังก์ชันทำงานมากขึ้น

Commit ที่ 14
change models name & add DateTimeField
เปลี่ยนชื่อ class เป็นตัวพิมพ์ใหญ่
เพิ่มวันที่ลงในโมเดลรีวิว

Commit ที่ 15
filter shop name,review shop
กรองการค้นหาด้วยอักษรตัวแรกของชื่อร้าน และทำให้หน้ารีวิวสามารถใช้งานได้

Start Project

https://github.com/Freezzes/foodproject

เริ่มสร้างโฟลเดอร์และค่อยๆเพิ่มส่วนต่างๆของ app เข้าไป

commit ที่ 1

start project
- สร้างโปรเจค และ แอพชื่อว่า bistro

commit ที่ 2

create model
-สร้างโมเดล 2 ส่วนคือ ส่วนแรกเก็บข้อมูลร้าน ส่วนที่สองเก็บข้อมูลการรีวิว

commit ที่ 3

modify model
-แก้ไข     shop_name = models.CharField(maxlength=200)
                category = models.CharField(maxlength=20)
  เป็น
                shop_name = models.CharField(max_length=200)
                category = models.CharField(max_length=20)

commit ที่ 4

active admin & insert test data
-เปิดใช้งาน admin
-ใส่ข้อมูลร้านอาหารสำหรับทดลองใช้โปรแกรม 6 ร้าน 4 หมวดหมู่

commit ที่ 5

create url
-สร้างเทมเพลตหน้าหลักและสร้าง link ไปที่หน้าการใช้งานตาม use case

Projectร้านอาหาร

Use Case

1 ค้นหาที่ตั้งร้านอาหารจากชื่อร้าน
2 ค้นหาร้านอาหารจากประเภทอาหาร
3 สุ่มร้านอาหาร
4 รีวิวความพึงพอใจ

Case ที่ 1
  ค้นหาที่ตั้งร้านอาหารจากชื่อร้าน
1) พิมพ์ชื่อร้านลงไปในช่องค้นหา
2) กดค้นหา
3) แสดงข้อมูลที่ตั้งร้านว่าอยู่ตรงไหน

Case ที่ 2
  ค้นหาร้านอาหารจากประเภทร้านอาหาร
1) เลือกประเภทร้านอาหาร เช่น ร้านอาหารตามสั่ง ร้านก๋วยเตี๋ยว ร้านของหวาน ฯลฯ
2) จะแสดงชื่อร้านอาหารที่ได้รับรีวิวในหมวดนั้นๆ โดยเรียงลำดับจากคะแนนมากสุดไปน้อยสุด

Case ที่ 3
  สุ่มร้านอาหาร
1) กดเข้าเมนูสุ่มร้านอาหาร
2) กดสุ่ม
3) จะแสดงชื่อร้านอาหารที่สุ่มได้ พร้อมคะแนนรีวิวร้าน
4) ถ้าต้องการสุ่มใหม่ให้กดสุ่มอีกครั้ง

Case ที่ 4
  รีวิวความพึงพอใจ
1) เลือกร้านอาหารที่ต้องการรีวิว
2) ใส่ชื่อเมนูที่จะรีวิว
3) ใส่ข้อความรีวิว
4) ให้คะแนน
5) ลงชื่อผู้รีวิว
6) กดยืนยัน


ข้อมูลที่ต้องการเก็บไว้ในฐานข้อมูลได้แก่
ชื่อร้าน :
ประเภท :
  ตามสั่ง
  ก๋วยเตี๋ยว
  ขนมหวาน
  เครื่องดื่ม
คะแนนร้าน : ( max 5 min 0 )
รีวิว         : ค่าเริ่มต้นคือไม่มี
  ชื่อเมนู
  ข้อความรีวิว
 

การทดสอบ

ใส่ข้อมูลร้านลงไปในฐานข้อมูล  5 ร้าน
ทดลองใช้งานตาม use case
1 ค้นหาที่ตั้งร้านอาหารจากชื่อร้าน
1) พิมพ์ชื่อร้าน ชั้นฟ้า ลงในช่องค้นหา
2) กด ค้นหา
3) แสดงข้อความ  “ ร้านชั้นฟ้า เป็นร้านอาหารตามสั่ง ตั้งอยู่บริเวณสะพานข้ามคลองประปาหลังมอ จุดสังเกตุเป็นรั้วสีเขียวทางด้านขวามือ ”

2 ค้นหาร้านอาหารจากประเภทอาหาร
1) กดเลือกประเภทร้านอาหารเป็น เครื่องดื่ม
2) จะแสดงชื่อร้านเรียงตามลำดับคะแนนรีวิว
     Waiting floor  4/5 คะแนน
     มาเฟีย         3/5 คะแนน

3 สุ่มร้านอาหาร
1) กดเข้าเมนูสุ่มร้านอาหาร
2) กดสุ่ม
3) จะแสดงชื่อร้านอาหารที่สุ่มได้ พร้อมคะแนนรีวิวร้าน
ชั้นฟ้า 5/5 คะแนน
4) ถ้าต้องการสุ่มใหม่ให้กดสุ่มอีกครั้ง
ซารุ 4/5 คะแนน



4 รีวิวความพึงพอใจ
1) เลือกร้าน ชั้นฟ้า
2) ใส่ชื่อเมนู ข้าวคอหมูย่าง
3) ใส่ข้อความรีวิว ข้าวเยอะหมูสุกกำลังดี บางวันอร่อยบางวันหมูเค็มไปนิดนึง น้ำจิ้มอร่อยมาก
4) ให้คะแนน 4
5) ลงชื่อผู้รีวิว น้องไอซ์คนดีที่1เลย
6) กดยืนยัน
  แสดงรีวิวของร้านชั้นฟ้าทั้งหมดที่มี

test ครั้งที่ 1

ให้แสดงสูตรคูณโดยการรับเลขมาจาก url และรับมาจาก input แบบ text

เริ่มจาก

รับเลขจาก 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

รับเเลขจาก input แบบ text มาแสดง 3 ตัว

ในไฟล์ 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

https://github.com/Freezzes/testone

 

[HTML] CSS

     CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ ตามที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น ซึ่ง CSS ได้รับความนิยมในการใช้งานเป็นอย่างมาก

ประโยชน์ของ CSS

     1.การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
     2.สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน
     3.ทำให้เว็บไซต์มีความเป็นมาตรฐานมากขึ้นและมีความทันสมัย สามารถรองรับการใช้งานในอนาคตได้

ทดลองใช้งาน CSS

<html>
<head>
<style>
body { background-color: lightpink; }

h1 {   color: blue;
          text-align: center; }
p {     font-family: verdana;
          font-size: 20px; }
</style>
</head>
<body>

<h1>My First CSS</h1>
<p>This is a paragraph.</p>

<h1>My Second CSS</h1>
<p>This is a paragraph.</p>

</body>
</html>
---------------------
ในส่วน <style> เป็นการกำหนดลักษณะของการแสดงผลข้อความว่าต้องการให้แสดงผลในรูปแบบใด

   การแสดงผลแบบไม่มีการใช้งาน CSS  การแสดงผลเมื่อมีการใช้งาน CSS

--------------------------------------------------------------------------------------------------------------------------

การตั้งค่าตาราง

<html>

<head>

<style>

#customers {

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

  border-collapse: collapse;

  width: 100%;

}

#customers td, #customers th {

  border: 1px solid #ddd;

  padding: 8px;

}

#customers th {

  padding-top: 12px;

  padding-bottom: 12px;

  text-align: left;

  background-color: #4CFF70;

  color: white;

}

</style>

</head>

<body>

<table id="customers">

  <tr>

    <th>Company</th>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Berglunds snabbköp</td>

    <td>Christina Berglund</td>

    <td>Sweden</td>

  </tr>

  <tr>

    <td>Königlich Essen</td>

    <td>Philip Cramer</td>

    <td>Germany</td>

  </tr>

</table>

</body>

</html>

----------------------

  การแสดงผลแบบไม่มีการใช้งาน CSS การแสดงผลเมื่อมีการใช้งาน CSS

--------------------------------------------------------------------------------------------------------------------------

การแบ่งการแสดงผลเป็นหลาย column

<html>

<head>

<style>

.newspaper {

  -webkit-column-count: 3; /* Chrome, Safari, Opera */

  -moz-column-count: 3; /* Firefox */

  column-count: 3;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

-----------------------

 การแสดงผลแบบไม่มีการใช้งาน CSS

 การแสดงผลเมื่อมีการใช้งาน CSS

--------------------------------------------------------------------------------------------------------------------------

Cr : https://blog.sogoodweb.com/Article/Detail/79237
       https://www.hellomyweb.com/course/CSS/

Try pythonanywhere.com

     Pythonanywhere
คือ  ออนไลน์ IDE และเป็น Web Hosting ที่ใช้ภาษา Python เป็นหลัก ซึ่งเราสามารถนำเว็บที่เราสร้างขึ้นมาใช้งานออนไลน์บนอินเตอร์เน็ตได้
ซึ่งการใช้งานหลังจากที่ได้สมัครเข้าใช้งานแล้วจะได้หน้าต่างดังภาพด้านล่าง

ให้กดเข้าไปที่ New console โดยเลือก Bash จะได้หน้าต่างดังภาพ

จากนั้นพิมพ์คำสั่ง

$ mkvirtualenv myvir --python=python3.6
$ pip install Django
$ python --version                                                                                               

$ django-admin --version                                                                                            

$ git clone https://github.com/Freezzes/pretest.git #clone project จาก GitHub

จากนั้นเปิดไปที่ Web

เลือก add new web app  ( ใช้งานฟรีสร้างได้ 1 app เท่านั้น !!! )

เลือก Framework ที่จะใช้ในการสร้าง web เป็น Django

เลือก version ของ python

ตั้งชื่อโปรเจค เสร็จแล้วจะได้หน้าต่างดังภาพด้านล่าง 

ให้ทำการตั้งค่า Virtualenv โดยการนำ mkvirtualenv myvir --python=python3.6 ข้อความในส่วนที่ถูกไฮไลท์ มาใส่ลงในช่องและกดเครื่องหมายถูก

จากนั้นแก้ไขในส่วน WSGI โดยการเพิ่ม path ของ project ที่ clone มา

      และแก้ไขในไฟล์ settings.py ที่อยู่ในโปรเจคที่ clone มาโดยคัดลอก url มาใส่ในส่วนของ ALLOWED_HOSTS

ALLOWED_HOSTS = [u'wanvipa.pythonanywhere.com'] 

กด save และ กลับไปที่หน้า web และ reload wanvipa.pythonanywhere.com

เมื่อลองเปิดหน้าเว็บพบว่าสามารถใช้งานได้ปกติ

W6 UPDATE

หลังจากที่ได้สร้างคำถามและตัวเลือกไว้ในครั้งที่ผ่านมา คำถามและตัวเลือกสามารถเพิ่มและลบได้โดยการใช้งานผ่านส่วน admin หรือ API ครั้งนี้จะทำการเพิ่มและลบคำถามผ่านหน้าเว็บโดยการสร้างฟังก์ชันขึ้นมาใช้งานโดย

ส่วนการลบคำถาม
1 สร้าง template

<h1>Remove Question</h1>
<form action="{% url 'polls:remove' %}" method="post">
{% csrf_token %}
{% for question in latest_question_list %}
<input type="radio" name="question" value="{{ question.id }}">
<label for="{{ forloop.counter }}">{{ question.question_text }}</label>
<br>
{% endfor %}
<input type="submit" value="remove">
</form>

ให้ลบคำถามโดยการเลือกตัวเลือกแบบ radio ลบได้ครั้งละ 1 คำถาม

2.สร้างฟังก์ชันใน views.py

def removequestion(request):

question = Question.objects.all()

q_select = Question.objects.get(id=request.POST['question'])

q_select.delete()

return HttpResponseRedirect(reverse('polls:index'))

เมื่อมีการเรียกใช้งานฟังก์ชันให้ลบคำถามที่ถูกเลือกและแสดงหน้าลบคำถามเดิม

3. เพิ่ม url ที่เรียกใช้ฟังก์ชัน

from django.urls import path

from . import views

app_name = 'polls'

urlpatterns = [

path('', views.IndexView.as_view(), name='index'),

path('remove/',views.removequestion,name='remove'),

        ]

เมื่อเปิดหน้าแรกจะเรียกใช้ template แสดงหน้าการลบคำถามและมีการเรียกไปที่ url remove และเรียกใช้งานฟังก์ชัน removequestion และ reverse กลับไปที่หน้าลบคำถามหน้าเดิม

หน้าแรกก่อนลบคำถาม

เมื่อเลือกคำถามและ remove จะแสดงหน้าเดิมที่ถูกลบคำถามออกไปแล้ว

ส่วนการเพิ่มคำถาม

1 สร้าง template

<h1>Create Question</h1>

<form action="{% url 'polls:Addquest' %}" method="post">

{% csrf_token %}

<input type="text" name="addq" value="{{ addq.id }}">

<br><br>

<input type="submit" value="Create">

</form>

<h2>Question now : </h2>

{% if latest_question_list %}

<ul>

{% for question in latest_question_list %}

<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>

{% endfor %}

</ul>

{% endif %}

ใน template แบ่งเป็น 2 ส่วน คือ ส่วนที่ให้เพิ่มคำถามที่ใช้ input แบบ text และส่วนที่แสดงคำถามที่มีอยู่เพื่อดูการเปลี่ยนแปลงว่าคำถามมีการเพิ่มขึ้นหรือไม่

2. สร้างฟังก์ชันใน views.py

def Add(request):

q = Question(question_text=request.POST['addq'], pub_date=timezone.now())

q.save()

return HttpResponseRedirect(reverse('polls:index'))

ให้เพิ่มคำถามโดยคำถามที่เพิ่มให้รับจาก text ที่พิมพืลงในส่วนของ input และทำการเพิ่มคำถาม

3. เพิ่ม url ที่เรียกใช้ฟังก์ชัน

from django.urls import path

from . import views

app_name = 'polls'

urlpatterns = [

path('', views.IndexView.as_view(), name='index'),

path('add/',views.Add,name='Addquest'),

        ]

เมื่อเปิดหน้าแรกจะเรียกใช้ template แสดงหน้าการเพิ่มคำถามและมีการเรียกไปที่ url Addquest และเรียกใช้งานฟังก์ชัน Add และ reverse กลับไปที่หน้าเพิ่มคำถามหน้าเดิม

พิมพ์คำถามที่ต้องการเพิ่ม

 เมื่อเลือก create จะแสดงหน้าเดิมที่ถูกเพิ่มคำถาม และแสดงคำถามที่ถูกเพิ่มขึ้นมา