Test/Quiz on w12-2

วันที่ 25 มกราคม 2556 

 

Update ความคืบหน้าการสร้างเว็บภาค ด้วย CMS ( Part2 )

จาก... วันศุกร์ที่ 25 มกราคม 2556

commit [ 6:f6a0e8ef87ef ] 

ใน commit ผมแก้ไขตรงส่วนของแถบเมนูด้านบนสุดของหน้าเว็บเพจ

จากรูปข้างบนนี้จะเห็นได้ว่า ผมใช้ไฟล์รูปที่ทำจาก Photoshop มาเรียงต่อกันเป็นแถบเมนู ซึ่งเป็นรูปแบบก่อนหน้าที่ผมจะทำการปรับเปลี่ยน เมื่อผมปรับเปลี่ยนแล้วจะเป็นดังรูปด้านล่างนี้

ในการสร้างแถบเมนูนี้ ผมสร้างโดยใช้ CSS กำหนดค่าต่างๆของแถบเมนูดังกล่าว ซึ่งผมได้กำหนดให้เมื่อนำเมาส์มาวางในบริเวณปุ่มใดปุ่มหนึ่ง จะปรากฎดังรูปที่ 1 (ตัวอักษรจะกลายเป็นสีดำ) หลังจากนั้นเมื่อเราคลิกที่ตำแหน่งนั้นก็จะปรากฎดังรูปที่ 2 (สีของปุ่มกับตัวอักษรจะเปลี่ยนไป)

รูปที่ 1 ขณะนำเมาส์มาวาง

รูปที่ 2 หลังจากคลิก

 หน้าเว็บเพจ หลังจากปรับเปลี่ยนแล้ว

Update ความคืบหน้าการสร้างเว็บภาค ด้วย CMS ( Part1 )

จาก... วันอังคารที่ 22 มกราคม 2556

commit [ 5:19256e672de4 ] version number and hash

ผมคิดว่าเว็บที่ผมสร้างขึ้น มีความคล้ายกับเว็บภาค ประมาณ 30%

สร้างเข้าไปดูเว็บภาคได้ตามลิงค์นี้ครับ : http://www.ee.kmutnb.ac.th/ 

 รูปนี้ เป็นหน้าเว็บที่ผมสร้างขึ้น (หน้าตาคล้ายเว็บภาค ประมาณ 30%)

ความคืบหน้าของเว็บที่สร้างขึ้น : ยังไม่สร้างลิงค์ไปยังหน้าเพจอื่นๆได้ครับ เนื่องจากผมยังไม่ได้ทำการเชื่อมโยงลิงค์ เเละยังไม่ได้สร้างหน้าเพจอื่นๆ แต่องค์ประกอบหลักของหน้าเพจตอนนี้ก็เกือบจะสมบูรณ์ แต่ผมยังมีปัญหาในการแก้ไขช่องว่างระหว่างภาพยังไม่ได้ครับ อย่างตรงบริเวณแถบเมนูทางด้านบนและทางด้านซ้ายมือ จะเห็นเป็นช่องว่างสีขาวๆ

สิ่งที่อยากให้มีเพิ่มเติมในเว็บภาค

     - เว็บบอร์ด

     - รวมประสบการณ์จากรุ่นพี่ที่จบไปแล้ว พร้อมชีวิตการทำงาน (อยู่ในเว็บบอร์ด)

     - รวมแหล่งฝึกงาน และสมัครงาน (อยู่ในเว็บบอร์ด)

     - flowchart พร้อมแนะแนวทางการเลือกลงวิชาเรียน (ผมพึ่งเข้าไปดู พึ่งรู้ว่าในเว็บภาคมี flowchart แล้ว เเต่อยากให้มีการแนะแนวทางการเลือกลงวิชาเรียน)

     - นาฬิกาบอกเวลา และวันที่ ณ ปัจจุบัน 

ส่วนเรื่องของระยะเวลาในการจัดทำสิ่งเหล่านี้ ผมจำไม่ได้เเล้วว่าผม เขียนไปนานเท่าไรบ้างต่อการสร้างสิ่งที่กล่าวมาข้างต้น ต้องขออภัยด้วยครับ 

 

ส่วน ข้อคิดที่ได้จากการอ่านหนังสือ "ธรรมะทุกลมหายใจ" 

     - การนั่งสมาธิเป็นสิ่งที่ดี กับตนเอง ทำให้เรามีจิตใจที่เย็นขึ้น มีสมาธิในการเรียนมากขึ้น จะบอกว่า มันดี ทำไปเถอะ

     - หากทำหน้าที่เป็นลูกที่ดีไม่ได้แล้ว ก็อย่าหวังว่าจะทำหน้าที่อื่นดีได้

 เต็มอิ่มไปกับอารมณ์ขัน  ความคิดสร้างสรรค์ สัจธรรม  และแนวคิดดีๆ จากผู้เขียน 

รวมทั้งฮาวทูที่ผู้เขียนพิสูจน์ด้วยตัวเองมาแล้วว่าใช้ได้จริง

พร้อมบทปุจฉา-วิสัชนาที่จะให้ความกระจ่างในทางธรรมแก่ผู้อ่าน 

ผู้เขียน : ปิยพร พรรณเชษฐ์  สำนักพิมพ์ : อมรินทร์ธรรมะ ราคา 119 บาท 

Django CMS

        อันดับแรกเลยก่อนที่เราจะใช้ CMS นั้นเราต้องมีการ install เสียก่อน แต่ในการ install ของผมมันจะมีปัญหา คือเกิด error แต่ผมจะแก้โดยการลบ Django 1.5 ออกก่อน แล้วหลังจากนั้นผมจะใช้ Django 1.4 แทน

ขั้นแรก เริ่มต้นจากการหาตำแหน่งที่อยู่ของโปรแกรม Django 1.5
     python -c "import sys; sys.path = sys.path[1:];
     > import django;
     > print(django.__path__)"

หลังจากนั้น ก็จะแสดง output ออกมา ['/usr/local/lib/python2.7/dist-packages/django']

ต่อมาให้ใช้คำสั่ง sudo rm -r xxx เพื่อลบโปรแกรมเก่าออก ซึ่ง xxx ในที่นี้คือ /usr/local/lib/python2.7/dist-packages/django (เป็นตำแหน่งที่อยู่ของโปรแกรมเดิม)

ขั้นสอง เป็นการ install Django อันดับแรกเราต้องเข้าไปโหลด Django มาก่อน

            ตามลิงค์นี้ https://www.djangoproject.com/download/

ผมจะเลือกโหลด Django-1.4.3.tar.gz ต่อมาให้ทำการแตกไฟล์ด้วยคำสั่ง tar xzvf Django-1.4.3.tar.gz หลังจากนั้นก็ cd Django-1.4.3 ก่อนที่จะพิมพ์คำสั่งนี้ ให้เข้าไปยังตำแหน่งที่โหลดไฟล์มาก่อน แล้วตามด้วยคำสั่ง sudo python setup.py install เพื่อทำการ install ถือเป็นการลง Django เสร็จเรียบร้อยแล้ว

ขั้นสาม เป็นการ install CMS
     sudo aptitude install python2.7 python-setuptools python-imaging 

     sudo easy_install pip 

     sudo pip install django-cms south 

     sudo aptitude python-psycopg2 

     sudo aptitude install python-mysql

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

Commit " Starting your Django project "

link : https://bitbucket.org/5311565070/w8_2/commits/b72258c5bd085d31eadd5455285a3d599cddc38e

     ใน commit นี้เป็นการสร้าง project ที่ชื่อว่า myproject 

     หลังจากนั้นให้ runserver ดู ด้วยคำสั่ง python manage.py runserver ก็จะปรากฎดังรูปนี้

Commit " Installing and configuring django CMS in your Django project "

link : https://bitbucket.org/5311565070/w8_2/commits/1e6ff06a1f5e61bc3cd416a969ff49fe4d83ee13

     ใน commit นี้ จะเป็นการ set ค่าให้กับไฟล์ settings.py

Commit " URL configuration "

link : https://bitbucket.org/5311565070/w8_2/commits/a4110efcb8f56ae6eabd02387634f53a0f1ac43d

     ใน commit นี้ จะเป็นการ set ค่าให้กับไฟล์ urls.py

Commit " Creating templates "

link : https://bitbucket.org/5311565070/w8_2/commits/7a51422ed358fea9be564d94aefaf12e454434e1

     ใน commit นี้ จะเป็นการสร้าง template ขึ้นมาทั้งหมด 3 ไฟล์ด้วยกัน คือ base.html , template_1.html และ template_2.html

หลังจากที่ทำตามขั้นตอนที่กล่าวมาข้างต้นแล้ว เมื่อเรา runserver ก็จะปรากฎดังรูปนี้

 

สามารถศึกษาได้ตามลิงค์นี้ : http://docs.django-cms.org/en/2.2/getting_started/tutorial.html

Report of reading

ที่มาของการบันทึกเรื่องราวการอ่านหนังสือนี้ เนื่องจากเกิด “โครงการรณรงค์ให้กรุงเทพมหานครเป็นมหานครแห่งการอ่าน” โดยกรุงเทพฯได้เป็นเมืองหนังสือโลกปี 2556 ซึ่งการอ่านก่อให้เกิดความเข้าใจ และสร้างสรรค์สิ่งดีงามให้กับคนเรา และสังคมมากมาย

           อ่านเพื่อรัก : รักตนเอง รักผู้อื่น รักโลก
           อ่านเพื่อรู้ : รู้จักตนเอง รู้จักผู้อื่น รู้จักโลก

           รักและรู้ สู่การสร้างสรรค์พัฒนาชีวิตและสังคมให้ก้าวหน้าทุกด้าน รื่นรมย์ 

           มีสันติสุขและสันติภาพ

สามารถคลิกเข้าไปดูรายละเอียดได้ : http://www.bangkokreadforlife.com/index.php/bkk-read-for-life

และนี่แหละ คือ ที่มาของการสร้าง app readBook และต้องขอขอบคุณอาจารย์โสภณ อภิรมย์วรการ ที่ได้เห็นถึงความสำคัญของการอ่านหนังสือ และได้มอบหนังสือให้แก่นักศึกษาคนละ 1 เล่ม ซึ่งผมได้หนังสือที่ชื่อว่า "ธรรมะทุกลมหายใจ"

เต็มอิ่มไปกับอารมณ์ขัน  ความคิดสร้างสรรค์ สัจธรรม  และแนวคิดดีๆ จากผู้เขียน 

รวมทั้งฮาวทูที่ผู้เขียนพิสูจน์ด้วยตัวเองมาแล้วว่าใช้ได้จริง

พร้อมบทปุจฉา-วิสัชนาที่จะให้ความกระจ่างในทางธรรมแก่ผู้อ่าน 

ผู้เขียน : ปิยพร พรรณเชษฐ์  สำนักพิมพ์ : อมรินทร์ธรรมะ ราคา 119 บาท 

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

Commit " start app "

link : https://bitbucket.org/5311565070/report-of-reading/commits/eaec2c37bcaaa50d478ff6888b1af06a50d92110

     ใน commit นี้เป็นการสร้าง app readBook โดยใช้คำสั่ง python manage.py startapp readBook ในที่นี้ readBook คือชื่อ app ที่เราต้องการที่จะสร้างขึ้นมา ซึ่ง app ที่เราสร้างขึ้นมา ก็จะประกอบไปด้วยไฟล์ 4 ไฟล์ ด้วยกัน คือ

     1.) __init__.py

     2.) models.py

     3.) tests.py

     4.) views.py

Commit " create models.py and add admin.py "

link : https://bitbucket.org/5311565070/report-of-reading/commits/51516139a73f104c502ae0833bee22f0be0bd3a6

     ใน commit เป็นการออกการ การรับข้อมูลจากผู้ใช้ โดยผมจะใช้ในรูปแบบของ admin เพื่อง่าย และสะดวกต่อการป้อนข้อมูลและแก้ไขข้อมูล
     ในส่วนนี้จะมีการรับข้อมูลในส่วนของ วันที่อ่าน (date) , ชื่อหนังสือ (title) , ชื่อผู้แต่ง (author) , เวลาที่เริ่มอ่าน (startTime) , เวลาที่หยุดอ่าน (endTime) , จำนวนหน้าที่อ่าน (amountPage) , สิ่งที่อ่านนั้นเกี่ยวกับอะไร (detall) , ได้ข้อคิดอะไรจากสิ่งที่อ่าน (eye) , คุณชอบหรือไม่ (liking) , เพราะอะไร (why)

Commit " create homepage and show data "

link : https://bitbucket.org/5311565070/report-of-reading/commits/b1d5e56ff93de9e8d7e1da4f00c1b358d32600e3

     ใน commit เป็นการออก template โดยใช้ภาษา HTML ในการสร้างหน้าเว็บเพจ ซึ่งในที่นี้ผมจะสร้างอยู่ 2 ส่วนคือ หน้าหลัก และหน้าโชว์ข้อมูล

Easy and beautiful documentation with Sphinx

Easy and beautiful documentation with Sphinx

link : http://www.ibm.com/developerworks/library/os-sphinx-documentation/index.html

 

Install sphinx and sphinx-quickstart

link : https://bitbucket.org/5311565070/w4_1/commits/d21c95b93b9521571202f9c79d3ddbc2e72d5496

     เป็นการติดตั้ง sphinx โดยใช้คำสั่ง $ easy_install sphinx

     ต่อมาเป็นการสร้าง documentation project แบบ quick start โดยใช้คำสั่ง $ sphinx-quickstart เมื่อพิมพ์คำสั่งนี้แล้ว มันก็จะรัน โดยให้เรากด enter ไปเรื่อยๆ จนเสร็จ เมื่อการสร้าง documentation project เสร็จแล้วจะมีไฟล์ที่ปรากฎ ดังนี้

     - Makefile

     - _build

     - _static

     - conf.py

     - index.rst 

ซึ่งแต่ละไฟล์ดังกล่าว จะมีหน้าที่ดังนี้ 
- Makefile เป็นเหมือนไฟล์ที่รวบรวม library ต่างๆ ไว้สำหรับนำไปใช้ได้ 
- _build  เป็น folder ที่ไว้สำหรับแสดง output 
- _static เป็น folder ที่ไว้ใช้เก็บพวกข้อมูลต่างๆ เช่น พวกรูปภาพ 
- conf.py เป็นไฟล์ที่กำหนดค่าของ sphinx ( ไฟล์นี้จะมีเมื่อมีการสร้าง new documentation project ขึ้น) 
- index.rst  เป็นไฟล์ที่ใช้สำหรับเชื่อมต่อกับไฟล์อื่นๆ 

Getting started

link : https://bitbucket.org/5311565070/w4_1/commits/f9d4883030cd3eac8675a0935b8a6c4a7f7aad16

     เป็นการเริ่มต้นการทดสอบ เริ่มแรกให้เข้าไปแก้ไขในไฟล์ index.rst โดยการเพิ่มคำว่า example (ในการย่อหน้า ให้กด spaces 3 ครั้ง) ลงในตำแหน่งตามด่านล่างนี้

Contents:

 .. toctree:: 

    :maxdepth: 2 

   example

หลังจากนั้นให้สร้างไฟล์ example.rst โดยใส่ข้อมูลดังนี้ (เฉพาะข้อความที่เป็นสีส้ม)

This is a Title 

=============== 

That has a paragraph about a main subject and is set when the '=' 

is at least the same length of the title itself. 

Subject Subtitle

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

Subtitles are set with '-' and are required to have the same length 

of the subtitle itself, just like titles. 

Lists can be unnumbered like: 

 * Item Foo 

  * Item Bar 

Or automatically numbered: 

 #. Item 1 

 #. Item 2 

Inline Markup 

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

Words can have *emphasis in italics* or be **bold** and you can define 

code samples with back quotes, like when you talk about a command: ``sudo`` 

 gives you super user powers! 

     ต่อมาเป็นการสร้างไฟล์ html โดยใช้คำสั่ง $ make html เมื่อสร้างเสร็จจะมี folder 2 folder ขึ้นมา
     - doctrees
     - html

     หลังจากนั้นให้เราเข้าไปคลิกที่ไฟล์ index.html ( doc/_build/html/index.html ) เพื่อเข้าไปดูรูปแบบ html ที่เรา make ขึ้น จะมีลักษณะดังนี้

Graphic

link : https://bitbucket.org/5311565070/w4_1/commits/292cb1ce33d31ed9bc4edb9fb25750ee20698a69

     เป็นการใช้กราฟฟิก ในที่นี้จะเป็นการใส่รูปภาพ 
     โดยใช้คำสั่ง ..image:: ตำแหน่งของรูปภาพ เช่น ..image:: _static/system_activity.jpg
     เราต้องนำรูปที่เราจะใช้มาไว้ที่ doc/_build/html/_static ก่อน