Django Tutorial pt.2

reference : https://docs.djangoproject.com/en/1.10/intro/tutorial02/

        ในส่วนบทที่ 2 จะเน้นเรื่องการสร้างฐานข้อมูล การสร้างคำถาม ตัวเลือก การตอบสนองของหน้าเว็บเพจ และ การตั้งค่า admin

        ในไฟล์ models.py ของ app polls จะเพิ่ม class Question,Choice โดยจะสืบทอด models.Model มาอีกที 

        โดยหลังจากนั้นก็จะไปเพิ่ม ส่วนของ setting.py เพื่อให้รู้ว่ามี app ตัวใหม่ชื่อ polls มาเพิ่มเติมอีกตัวหนึ่ง

        หลังจากที่มีการเปลี่ยนแปลงของไฟล์ที่เป็น model จะต้องใช้คำสั่ง 

    - python3 manage.py makemigrations

    - python3 manage.py migrate

        เพื่อเป็นการ apply การเปลี่ยนแปลงลงไปยัง Database โดยจะทำการตรวจสอบจากส่วน INSTALLED_APPS ถ้ามีเพิ่มเติมจะต้องทำ Migration ทุกๆครั้ง

Playing with API

        เป็นการสร้าง objects ให้กับทั้งส่วนของคำถาม และ ตัวเลือก (Question, Choice) โดยจะทำผ่าน shell วิธีการเปิด shell ก็ใช้คำสั่ง python3 manage.py shell

โดยอันดันแรกจะต้องทำการ import class ทั้งสองตัวก่อนซึ่งก็คือ Question, Choice ใช้คำสั่ง

    - from polls.models import Question, Choice

หลังจากนั้น ก็ต้อง import timezone เข้ามาด้วยเพื่อใช้ในการใส่ค่าให้กับทาง pub_date หรือ วันที่ตั้งกระทู้คำถาม

    - from django.utils import timezone

หากต้องการสร้างคำถามจะต้องใช้คำสั่งดังนี้

    - q = Question(question_text="What's your name?", pub_date=timezone.now())

จะเป็นการตั้งคำถามว่า What's your name? ซึ่งสามารถเช็คดูได้ว่ามีคำถามทั้งหมดกี่คำถามโดยใช้คำสั่ง Question.objects.all()

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

    - q = Question.objects.get(pk=?) 

โดย pk (Primary Key) จะเป็นไอดีเมื่อ get pk มาแล้วก็จะสามารถสร้าง Choice ตามคำถามได้

    - q.choice_set.all() เป็นการดูว่าchoice ทั้งหมดของคำถามนี้มีอะไรบ้าง

    - q.choice_set.create(choice_text="John", votes=0) ก็คือตัวเลือกชื่อ John ค่า votes = 0

นอกจากนี้ยังมีคำสั่งอื่นๆอีก ให้ลองดูตามนี้ กดสิกด!

การสร้าง admin

    ใช้คำสั่ง python3 manage.py createsuperuser

หลังจากนั้นก็ใส่ username , email และ password ลงไปซึ่งจะใช้ในการเข้าหน้า admin ของเว็บไซต์ของเราซึ่ง Django ได้มีหน้า admin แบบสำเร็จรูปอยู่แล้วมีหน้าตาแบบนี้ โดยวิธีการเข้าก็คือ localhost:8000/admin

    ในหน้า admin จะเป็นส่วนที่จัดการสิ่งต่างๆใน project นี้ โดยสามารถสร้างคำถาม ในนี้ได้ ตั้งค่ารหัสผ่านก็ได้ แล้วยังตั้งไอดีเพิ่มได้อีกด้วย

Django Tutorial pt.1

    จาก link ที่ อ.SPN แปะไว้ในบล็อกจะมีสองบท 1 กับ 2 โดยบท 1 จะมีรายละเอียดดังนี้

Creating Project
 
    django-admin startproject mysite ใช้คำสั่งนี้ในการสร้างโปรเจคท์ใหม่ของ Django โดย
mysite จะเป็นชื่อของตัวโปรเจคท์

    โดยในโฟล์เดอร์โปรเจคท์งานจะมีไฟล์ต่างๆที่มีคุุณสมบัติต่างกันประมาณนี้

    จากรูปด้านบน เนื่องจากภาษาอังกฤษของผมนั้นไม่ค่อยแข็งแรงเลยอาจจะแปลผิดๆถูกๆมั้ง แต่ก็ไม่น่าจะผิดเพี้ยนเกินไปเลยสรุปได้ดังนี้

    - โฟล์เดอร์ mysite ตัวนอกสุดจะเป็นเพียงที่เก็บโปรเจคท์เท่านั้นเราสามารถเปลี่ยนชื่อเป็นอะไรก็ได้

    - ไฟล์ manage.py เป็นไฟล์ cmd ที่จะทำให้เราใช้งาน django ได้ในหลายๆทาง

   

    - ไฟล์ mysite ตัวในจะเป็นโฟลเดอร์ที่เป็น python package ของจริง โดยจะชื่อของตัวนี้จะเป็นสิ่งที่จำเป็นในการ import สิ่งต่างๆ

    - ไฟล์ mysite/__init__.py เป็นไฟล์เปล่าๆที่ใช้ในการระบุกับตัว Python ว่าโฟลเดอร์นี้เป็น Python package 

    - ไฟล์ mysite/setting.py เป็นไฟล์ไว้สำหรับการตั้งค่าตัวโปรเจคท์ Django

    - ไฟล์ mysite/urls.py เป็นไฟล์ที่ใช้ประกาศ url ที่ใช้ในสำหรับโปรเจคท์นั้นๆ

    - ไฟล์ mysite/wsgi.py ยังไม่ทราบถ้าทราบเดียวจะมาอัพเดทอีกที

การรัน Server 

    ใน django ถ้าหากต้องการรัน server จะใช้คำสั่ง pyhon3 manage.py runserver ซึ่งใน tutorial จะบอกว่าเราสามารถที่จะ set ip และ port ได้ด้วยช่างสุดยอดจริงๆ โดยผมจะลองเปิดธรรมดาๆ ผลก็จะเป็นดังนี้ครับ

และเมื่อเข้าผ่านทาง web browser จะได้ดังนี้ (ip and port are default)

การสร้าง app

    ในโปรเจคท์ django เราสามารถจะสร้าง app เพื่อให้มีการแสดงผลได้ โดยใน 1 Project สามารถสร้างได้หลายๆ app ซึ่งวิธีการสร้างก็จะใช้คำสั่ง python3 manage.py startapp (app's name) ซึ่งในที่นี้จะขอใช้ชื่อ app ว่า polls 

  

    

เมื่อรันคำสั่งเสร็จแล้วจะได้โฟลเดอร์เพิ่มมาอีกโฟลเดอร์หนึ่ง

โดยในโฟลเดอร์จะมีลักษณะสถาปัตยกรรมการเขียนแบบ MCV

Write first view

     ใน tutorial จะให้ทดลองใส่คำสั่งเพื่อที่จะให้มีการแสดงผล โดยจะให้แก้ในไฟล์ views.py ในโฟลเดอร์ polls

คำสั่งด้านบนเป็นการสร้าง method และ return ประโยคกลับมาเมื่อเข้าหน้าเว็บ

    หลังจากนั้นจะต้องมีการ map ไปยัง url ของตัว project โดยเราจะต้องสร้างไฟล์ urls.py ในโฟลเดอร์ app ของเรา

    หลังจากนั้นก็เข้าไปแก้ไขในไฟล์ urls.py ของตัว project

จะเห็นได้ว่ามีการใช้ RegEx ต่างๆในการระบุ url

และมีการใช้ function include() เพื่ออ้างอิงไปยังไฟล์ polls.urls ที่สร้างไว้เมื่อกี้

อ่านเพิ่มเติมเกี่ยวกับ RegEx

    หลังจากนั้นก็เปิด server แล้วลองเข้า url => localhost:8000/polls

ผลที่ได้จากการทดลอง

Note

    

    url()argument: 

        - regex จากรูปด้านล่างจะใช้ '^polls/'  ^ จะเป็นการขึ้นไลน์ใหม่ โดย URLConf จะค้นหาแค่คำว่า polls/  จากรูปด้านบน '^$' ที่เป็นอย่างนี้ก็เพราะคิดว่าไม่มีการให้ลิงค์ไปที่ url ตัวใด (คิดว่าอย่างนั้น)

        - views เป็นการเรียกใช้ method ที่จะต้องการจะให้ทำงาน

        - kwargs อันนี้ขอข้ามเนื่องจากทาง tutorial ก็บอกว่าให้ข้ามไปเลย

        - name เป็นการกำหนดชื่อเพื่อใช้ในการแก้ไข url ได้สะดวก และ รวดเร็ว

credit => https://docs.djangoproject.com/en/1.10/intro/tutorial01/

  

        

       

การเก็บข้อมูลแบบ CSV

        SPN ได้บอกว่าถ้าหากนำการเขียนเว็บแบบ Dynamic มาใช้ในการเก็บข้อมูลว่าคนที่เข้าใช้เว็บไซต์ของเรานั้นเกิดวันไหนบ้าง แล้วเก็บเป็นสถิติเอาไว้ เราจะมีวิธีการเก็บข้อมูลอย่างไร โดยอาจารย์ได้แนะนำให้ลองใช้ CSV File ในการเก็บข้อมูล โดยในการทำงานได้ไปค้นคว้าข้อมูลจาก https://docs.python.org/3/library/csv.html ซึ่งมีประโยชน์อย่างมากถึงมากที่สุด หน้าตาของเว็บไซต์ที่เสร็จแล้วจะหน้าตาประมาณนี้

        เวลาจะใช้งานก็ติ๊กว่าเกิดวันไหนตามดังนี้แล้วก็กด Submit แล้วจะไปดึงไฟล์ Python มารันโปรแกรมที่ได้เขียนเอาไว้ โดยหน้าตาจะเป็นแบบนี้

HTML Code

ส่งค่า key ให้เป็นตัวย่อของวันต่างๆไปให้กับ ไฟล์ python เพื่อทำการคำนวณ

Python Code

    ในไฟล์ python จะ import cgi กับ csv มาโดยจะมีการรับค่า key ที่จะรับมาเป็นตัวย่อของแต่ละวันเข้ามาเพื่อทำการคำนวณ เริ่มแรกก็จะทำการเปิดไฟล์ days.csv โดยใช้คำสั่ง DictReader() โดยจะเปิดแบบ r หรือ read only หลังจากนั้นก็จะเก็บข้อมูลไว้ในลิสต์ 2 ชุด ชุดแรกจะเก็บ keyword หรือตัวย่อ ของแต่ละวันในไฟล์ csv ไปใส่ในลิสต์ อีกชุดจะเอาไว้เก็บชุดตัวเลขที่เป็นจำนวนคนที่เกิดในวันนั้นๆ หน้าตา default ของไฟล์ csv จะเป็นดังนี้

    การใช้คำสั่ง csv.DictReader() และ csv.DictWriter() จะแตกต่างกับการ write และ read ธรรมดาตรงที่จะมีส่วนของหัว (fieldnames) มาเป็นตัวกำหนดคอลัมน์ โดยในงานนี้จะเป็น d , number ดังรูปภาพด้านบน หลังจากที่เก็บข้อมูลแล้วก็จะมีการสร้างลูปเพื่อเช็คว่า key ที่รับมานั้นตรงกับ key ในลิสต์วันไหน โดย date จะเป็น list ที่เก็บวัน และ number จะเป็น list ที่เก็บจำนวนคน

    โดยถ้าหากตัวแปร days ที่เป็นตัวแปรที่รับค่า key มาจากไฟล์ html ตรงกับวันใดก็จะให้บวกจำนวนคนเพิ่มขึ้นไปซึ่งจะเป็น index ตัวเดียวกัน 

    ขั้นตอนสุดท้ายจะเป็นการเขียนทับไฟล์ csv เพื่อไว้ใช้ในการคำนวณครั้งต่อไป

    ปัญหาที่พบในการเขียนไฟล์คือในการเขียนแบบ DictWriter เมื่อเขียนไปแล้วส่วนหัวจะหายไปหรือ d,number จะหายไปทำให้การอ่านไฟล์ นั้นจะไม่สามารถอ่านได้ ก็เลยทำการเขียนในส่วนหัว แล้วก็วนลูบเขียนในส่วนเนื้อหาแยกส่วนกัน

    ในส่วนของโค้ด html ก็จะให้แสดงวันแล้วก็จำนวน โดยจะเอา list number มาใส่ให้ตรงกับวันเป็นอันเสร็จสิ้น

Area of circle

    ทดลองการทำ website (dynamic) โดยเป็นการคำนวณพื้นที่ของวงกลม

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

HTML Code

    input type จะเป็นแบบ number หรือ ตัวเลขโดยจะให้ name เป็น rads โดยเมื่อกดปุ่ม Submit จะไปดึงไฟล์ python myscript-3.py 

Python --> myscript-3.py

    โดยจากโค้ดก็จะนำค่าของตัวแปร rads มาทำการคำนวณ โดยใช้สูตรพื้นที่วงกลม 3.14(r^2) หลังจากนั้นก็จะไปแสดงผล

HANDOUT

Week 1 => Click
Week 2 - 1 => Click
Week 2 - 2 => Click
Week 3 - 1 => Click
Week 3 - 2 => Click
Week 4 - 1 => Click
Week 4 - 2 => Click
Week 5 - 1 => Click
Week 5 - 2 => Click
Week 6 => Click
Week 7-1 => Click
Week 7-2 => Click
Week 8-1 => Click
Week 8-2 => Click
Week 11-1 => Click

Website (Dynamic)

        SPN ได้พูดให้ฟังว่าเว็บไซต์จะมีทั้งแบบ static และ dynamic ซึ่งสิ่งที่ผมได้ทำไปแล้วนั้นก็คือแบบ static ซึ่งจะเป็นประเภทที่ไม่มีการเปลี่ยนแปลงอะไรทั้งสิ้นจนกว่าจะมีการลงไฟล์ใหม่ไปทับ ส่วนแบบ dynamic คือแบบที่สามารถเปลี่ยนแปลงได้ด้วยตัวเอง ซึ่งตอนแรกก็ยังไม่เห็นภาพก็เลย ลองไปเล่นกับ CGI ซึ่งจากการอ่านเว็บต่างก็สรุปได้ว่ามันคือ โปรแกรมที่อยู่บน Web Server เพื่อทำการตอบโต้กับ Web Browser  (cr. ===> http://www.siaminterhost.com/kb/index.php?mod_id=2&id=57 )

        ในการทดลองที่ได้ทำก็จะทำจาก ตัวอย่างการสอนใช้จากในเว็บ
(cr. ===> http://xmodulo.com/create-use-python-cgi-scripts.html ) โดยในเว็บค่อนข้างจะอธิบายวิธีการทดลองละเอียดมาก ซึ่งเว็บนี้ได้คุณ Thakdanai Kunsaen เป็นคนแนะนำมา ต้องขอขอบพระคุณอย่างสูง โดยเมื่อเอาสิ่งที่เว็บที่เพื่อนแนะนำมา มาบวกกับเนื้อหาที่อยู่ในลิ้งค์ก่อนหน้านี้ ก็จะทำให้เห็นภาพชัดเจนยิ่งขึ้น

        ขั้นแรกก็ได้ใช้คำสั่ง python -m CGIHTTPServer 8000 เพื่อทำการเปิด Server โดยหน้าตาที่ได้ก็จะเป็นดังนี้

        โดยการทำงานแบบ dynamic จะมีหน้าเว็บ เว็บหนึ่งไว้เพื่อทำการรับข้อมููลแล้วเมื่อทำการ กดปุ่ม submit หรือ การใส่ข้อมูลในรูปแบบต่างๆ ก็จะไปดึง เอาไฟล์ที่อยู่ใน  โฟลเดอร์ชื่อ cgi-bin ออกมาเรนเดอร์แสดงผลออกมาผ่านทาง Web browser

        ในไฟล์ cgi_test1.html จะมีหน้าตาดังนี้

html

on web browser

         จะเห็นว่าใน code html จะมี คำสั่ง form โดยจะระบุ action ว่าให้ดึงไฟล์ในโฟล์เดอร์ cgi-bin ที่มีชื่อว่า myscript.py โดยจะเป็นไฟล์ python ที่เขียนให้แสดงผลเป็น html โดยเหตุผลที่ใช้ไฟล์ python คุณ Sarik Kampan ได้บอกว่าเพราะว่า python มีการคำนวณที่เร็วกว่า html ซึ่งผมก็ยังไม่ได้ไปหาข้อพิสูจน์ในเรื่องนี้

        

โดยเมื่อกด Submit แล้วผลก็จะได้ออกมาดังนี้

        ก็เป็นอันเรียบร้อยสำหรับการทดลองการเขียน website แบบ dynamic 

แต่ในการทดลองจะมีปัญหาดังนี้

1. เมื่อทำการกดเรียกไฟล์ cgi_test1.html จะไม่สามารถเรียกดูหน้าเว็บได้ มันจะให้โหลดแทน ซึ่งวิธีแก้ก็ทำได้โดยการกำหนดสิทธ์ โดยใช้คำสั่ง chmod 755 filename เพื่อให้สามารถใช้งานได้

2. เมื่อหมดปัญหาจากข้อ 1. ก็ต้องมาเจอกับการที่ว่าเมื่อกดปุ่ม Submit แล้วดันไม่ขึ้น ซึ่งปัญหานี้ก็แก้ปัญหาได้โดยการที่ คุณ Sarik K. ได้บอกว่า "เพื่อนลองไปดูหน้า terminal ของ server สิ" เมื่อผมได้ไปดูก็ได้กระจ่าง ในหน้า terminal ของ server หลังจากที่กดปุ่ม submit ก็ได้มีข้อความ error ว่าไฟล์ที่จะดึงนั้นไม่มี permission เช่นกัน ผมเลยต้องไปกำหนดสิทธิ์ให้ไฟล์ที่จะดึง หรือ ก็คือไฟล์ myscript.py นั้นเอง ซึ่งก็ใช้คำสั่งเดิมก็คือ chmod 755 filename หลังจากนั้น ปัญหานี้ก็จะหมดไป

        ส่วนด้านล่างนี้จะเป็นการทดลอง แบบที่มีการใส่ข้อมูลแบบฟอร์มลงไป แล้ว กดปุ่ม submit

ผลที่ได้จะเป็นดังนี้

        ซึ่งจะมีการใส่คำสั่ง cgi.FieldStorage() เพื่อใช้ในการเรียกข้อมูล โดยจะมีการกำหนด ชื่อ หรือ คล้ายๆ ID ในไฟล์ html ตัวแรก พอใส่ลงไป ก็จะไปถูกดึงมาใส่กับ python มาคำนวณและ render ออกมาบน Web Browser ให้ได้ดูกัน

Web Server with python

        ในวิชา BS 2 ในชม.ได้ลองทำ web server แบบอย่างง่าย โดยใช้คำสั่ง
python -m SimpleHTTPServer 8000
ก็จะเป็นการสร้าง Server โดยมี port 8000 ผลออกมาก็จะได้หน้าตาดังนี้

ต่อไปเราก็ลองนำ IP Address ของ server ที่เปิดไปใส่ในช่องใส่ url ของ server โดยถ้าในกรณี จะเป็น 0.0.0.0:8000 หรือ localhost:8000 แล้วผลที่ได้จะเป็นดังนี้

โดยไฟล์ต่างๆที่ถูก browse ขึ้นมาให้เห็นจะเป็น ไฟล์ที่อยู่ใน directory ที่เราได้ทำการเปิด server

จะเห็นได้ว่าตรงกับไฟล์ที่ browse มาด้านบนทุกประการ โดยเราสามารถจะลอง click เล่นได้ผลที่ได้ก็จะเป็นดังนี้

เมื่อกดดูไฟล์รูปภาพ 1.jpg

เมื่อลองกดดูไฟล์ html 

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

ทดลองเขียน HTML

        ในวิชา Building Software II จะเน้นไปเรื่องการเขียน web application เป็นหลัก SPN จึงให้ทดลองการเขียนเว็บโดยใช้ HTML โดยใช้ text editor แบบธรรมดา ทางกระผมจึงได้ทดลองเขียนโดยใช้ gedit ซึ่งเป็น text editor ที่ทาง ubuntu มีให้อยู่แล้ว มาเขียนภาษา HTML โดยจะเขียนหน้าเว็บเกี่ยวกับไอดอลที่ตัวเองชื่นชอบ

        ในการเขียน HTML ก็ได้หาความรู้พื้นฐานมาจากเว็บไซด์ http://www.w3schools.com/html/ 

ซึ่งเป็นเว็บไซด์ที่ส่วนตัวผมเองว่าเป็นเว็บที่ดีมาก เพราะจะมีข้อมูลที่ครอบคลุมแล้วยังมีการทดสอบระหว่างการอ่านเนื้อหาในส่วนๆนั้นจบ ซึ่งจะมีเนื้อหาของส่วน css มาให้ด้วย

        หลังจากที่ได้ทดลองเขียนนี้คือผลงานของผม

HTML

        จากโค้ดด้านบนกระผมก็พอจะเข้าใจภาษา HTML ขั้นพื้นฐานได้แล้ว โดยความรู้พื้นฐานก็อย่างเช่นว่า <> คือ tag ในการเขียนโค้ด HTML <> จะเป็นหัวใจหลัก ในการเขียน โดยในโค้ดจะมีส่วนสำคัญๆคือ <html> <head> <body> โดยจะต้องมี tag ปิดด้วย </html> ฯลฯ ในส่วนของ <head> จะเป็นการกำหนดส่วนหัวของเว็บเพจ หรือ ก็คือส่วนนี้

        ในส่วนของ <body> ก็จะเป็นการใส่เนื้อหาต่างๆ โดยคำสั่งที่ใช้ไปก็จะมี 

<h1-h6> เป็นส่วนของ heading หรือหัวข้อ จะต้องมี tag ปิดด้วย

<p> เป็นส่วนของการใส่ข้อความเป็นย่อหน้า จะต้องมี tag ปิดด้วย

<br> เป็นการเว้นบรรทัด หรือ ขึ้นบรรทัดใหม่

<div> เป็นการสร้าง block ให้กับส่วนต่างๆของข้อความ จะต้องมี tag ปิดด้วย

<ul> เป็นการสร้าง listing โดยจะใช้คู่กับ <li> โดยจะสามารถใส่ style กำหนดได้ว่าต้องการรูป                แบบใด โดยผมเลือกแบบวงกลม

จะได้ผลเป็นดังนี้

<table> เป็นการสร้างตาราง โดยจะใช้คู่กับ <tr> เป็นการสร้างแถว <th> เป็นการใส่หัวข้อในแนวหลัก <td> เป็นการใส่เนื้อหาในแนวหลัก

<img src=""> เป็นการใส่รูปโดยใน "" จะสามารถใส่ได้ทั้งชื่อไฟล์รูปภาพที่อยู่ในเครื่อง หรือ อาจจะเป็นลิ้งค์ของรูปภาพที่ต้องการก็ได้ 

และอีกสิ่งที่ได้จากการทดลองเขียนก็คือในส่วนต่างๆของคำสั่ง สามารถที่จะใช้ คำสั่ง style เข้ามาช่วยเพิ่มเติมคุณสมบัติต่างๆได้ อย่างเช่น 

<div style="background-color:#ffb67a;border:3px solid black;"> จะเป็นการใส่สีพื้นหลัง แล้วใส่เส้นขอบขนาด 3 พิกเซล แล้วมีลักษณะของเส้นเป็นสีดำทึบ

<h2 align="left"> จะทำให้ข้อความ heading ของเรานั้นถูกจัดอยู่ในด้านซ้าย

แล้วก็ได้รู้จักกับ HTML entities จากเว็บไซด์นี้ http://www.w3schools.com/html/html_entities.asp

ซึ่งตัวที่ได้ลองใช้คือ $nbsp ซึ่งจะทำให้ผลที่ออกมาเป็นการเคาะ spacebar 1 ครั้ง หรือ non-breaking space นั้นเอง