เปลี่ยน Theme ให้กับ OLAT ตอนที่ 2

มาถึงตอนต่อการการเปลี่ยน Theme ให้กับ OLAT โดยในตอนที่1 ได้เล่าถึงรูปแบบ Theme โดยรวม และการเปลี่ยน layout บางส่วน ที่นี้ลองมาดูส่วนอื่นๆที่เราสามารถปรับเปลี่ยนได้กันเลย

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\brasato.css
ไฟล์ brasato.css ทำหน้าที่กำหนดสไตล์ของ component และ container ให้กับ brassto framework ที่ OLAT ได้นำมาใช้ในการจัดการ container เช่น menu tree, table, tabbed pane, buttons, form การแก้ไขในไฟล์ brasato.css ทำได้ปรับเปลี่ยนสไตล์ที่ขึ้นต้นด้วย "b_"
*** เมื่อแก้ไขเสร็จ ไม่ต้องใช้คำสั่ง ant config-all ***

modal overlay color

• #b_modal_overlay, div.ext-el-mask กำหนดพื้นหลังและความโปร่งสีให้กับส่วนที่อยู่ด้านหลังของ modal
  
• #b_modal_area กำหนดขนาดและตำแหน่งของ modal
  

AJAX BUSY ICON

• div.b_ajax_busy กำหนดรูปที่แสดงสำหรับ ajax ระหว่าง load ข้อมูล
  

MENU TREE

• div.b_tree li กำหนดรายการบนเมนูแบบ Tree

active item and all parent items with special color and bold

• div.b_tree li a.b_tree_selected กำหนดรายการบน Menu Tree ที่ Active
  

SELECTION TREE

• div.b_selectiontree div.b_selectiontree_item:hover กำหนดสีพื้นของ Tree เมื่อเมาส์ลากผ่าน

TABLE

• div.b_table_wrapper table tbody tr:hover/focus กำหนดสีพื้นของตารางเมื่อเมาส์ลากผ่านหรือเลือกอยู่
  

TOOLBOX

• div.b_toolbox li a:active,focus,hover กำหนดสีพื้นเมื่อเมาส์ลากผ่าน กำลังเลือก และทำการเลือกแล้ว ให้กับ Toolbox ด้านขวา
  

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\olat.css
ไฟล์ olat.css ทำหน้าที่กำหนดสไตล์ให้กับหน้า Login

LOGIN

• div.o_login div.o_login_form fieldset กำหนดพื้นหลังและรูปในส่วน olat login ในหน้า login

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\content.css
ไฟล์ content.css เป็นไฟล์ที่กำหนดสไตล์ให้กับหน้าที่เป็นเนื้อหา (content)

FONT

• textarea, pre, tt, code และ body กำหนดรูปแบบและขนาดของ font ที่ใช้โดยรวมทั้งหมด
  

HEADERS

• h1...6 กำหนดขนาดของ header1 - header6

LISTS

• ul, ol, dl, li,dt,dd กำหนดรูปแบบของ list
  

TEXT FORMATTING

• cite,blockquote,blackquote,strong,bem,i,textaread,pre,tt,code,acronym,abbr กำหนดรุปแบบของ tag สัญสักษณ์พิเศษ

FIELDSET

• fieldset,legend กำหนดรูปแบบของ tag fieldset
  

OTHER ELEMENTS

• p,hr กำหนดรูปแบบของ tag p และ hr

CONTENT CLASSES

• .b_note,.b_important และอื่นๆ กำหนดรูปแบบของเนื้อหาแบบต่างๆ
• b_disabled,b_deleted และอื่นๆ กำหนดรูปแบบของเนื้อหาแบบต่างๆ
• a.b_link_extern,a.b_link_mailto และอื่นๆ กำหนดรูปแบบของ link แบบต่างๆ

GENERIC TABLES

• table.b_table,table.b_table_nobackground และอื่นๆ กำหนดรูปแบบของตารางแบบต่างๆ
  

EMOTIONS

• img.b_emoticons_angel,img.b_emoticons_angry และอื่นๆ กำหนดรูปแบบของ emotion ต่างๆ

การแก้ไข Theme ที่อยู่ในโฟลเดอร์ต่างๆ
การปรับเปลี่ยน theme ที่กล่าวมาทั้งหมดจะทำอยู่ในโฟลเดอร์ all แต่ทั้งนี้ OLAT มีการแยก theme ออกเป็นหลายโฟลเดอร์ด้วยกันขึ้นอยู่กับชนิดข้อมูล โดยการแก้ไขจะใช้หลักการเดียวกันกับการปรับ css ในโฟลเดอร์ all
OLAT มีการแบ่งโฟลเดอร์สำหรับการปรับเปลีย่น theme ดังนี้

• all กำหนด css สำหรับข้อมูลทั่วไป
  
• aural กำหนด css สำหรับข้อมูลประเภทเสียง
• print กำหนด css สำหรับข้อมูลประเภทการพิมพ์
• patches กำหนด css สำหรับแสดงผลใน IE
  

เปลี่ยน Theme ให้กับ OLAT ตอนที่ 1

อยากออกแบบ theme ให้กับ OLAT บ้างไหมครับ มาลองดูวิธีทำกันดีกว่า

สร้าง Theme ใหม่

1. copy โฟลเดอร์ theme เดิมที่มีอยู่แล้วเช่น copy โฟลเดอร์ example จาก olat3\webapp\static\themes มาตั้งชื่อเป็น theme ชื่อ imi (ขอใช้ชื่อ imi แทนชื่อ theme ที่สร้างใหม่)
   
2. เลือก theme ที่เราได้สร้างใหม่ โดย login ด้วย administrator แล้วไปที่ Administration > System Configuration > Layout > imi

เริ่มการการแก้ไข Theme
OLAT theme ใข้เทคนิคของ YAML framework มาช่วยจัด layout ทั้งหมด จึงเป็นจำเป็นที่ต้องเข้าใจพื้นฐานของ YAML กันก่อน โดย layout ของ YAML แบ่งออกตามรูปนี้

• .page_margins และ .page กำหนดความสูงและกว้างของ loyout
• #header กำหนด header ของ layout ซึ่งประกอบไปด้วย logo, #topnav( link ต่างๆ ที่อยู่มุมขวาของ header)
• #nav กำหนดเมนูหลัก
• #main กำหนดเนื้อหาหลักที่ประกอบไปด้วย #col1 & #col1_content - เมนูย่อยด้านขวา, #col2 & #col2_content - เมนูย่อยด้านซ้าย, #col3 & #col3_content - เนื้อหาตรงกลาง, #ie_clearing - จบเนื้อหา
• #footer กำหนด footer
  

การใช้งาน YAML กับ OLAT นั้น OLAT ได้เพิ่ม prefix "b_" ในส่วนที่ OLAT ทำการเปลี่ยนแปลงเพื่อกันความสับสนใน css ของ YAML

การเปลี่ยน theme นั่นถูกแบ่งอยู่ในไฟล์ css หลายไฟล์ด้วยกันตามการใช้งานต่อไปนี้

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\yaml_basemod.css
ไฟล์ yaml_basedmod.css เป็น css ที่กำหนด layout เบื้องต้น และทำหน้าที่ overide css ของ YAML framework ในไฟล์นี้จะเป็นการจัด page background, page width/height, elements:top nav - nav (ใช้เทคนิคแบบ sliding door, main แบบ col1-col2-col3 และ footer

PAGE MARGINS AND PAGE

• body เปลี่ยน body background

layout: width, background, borders

• #b_page_margins เปลี่ยน page layout margin
  
• #b_page เปลี่ยน headder background

HEADER

• #b_header ปรับความกว้างและสูงของ header
• #b_logo เปลี่ยน logo บน header

TOP NAV - เมนูบน header

• #b_topnav ปรับขนาด font ของ navigation บนสุด
• #b_topnav li a เปลี่ยนสี font ของ navigation บนสุด
• #b_topnav li a:focus, #b_topnav li a:hover เปลี่ยนสี font ของ navigation บนสุดเมื่อ focus หรือ mouse over
  

NAV - เมนูหลัก

• #b_nav_main กำหนด ระยะห่าง (margin) ระหว่าง เมนูหลัก กับ header
  
• #b_nav_main li กำหนดพื้นหลังเมนูฝั่งซ้าย
• #b_nav_main a, #b_nav_main strong กำหนดพื้นหลังเมนูฝั่งขวา
• #b_nav_main li.o_site_home กำหนดระยะห่างระหว่างเมนุจากขอบด้านซ้าย
• #b_nav_main > ul a, #b_nav_main > ul strong กำหนดความกว้างของเมนู
  
• #b_nav_main li.b_nav_active กำหนดพื้นหลังเมนูที่กำลัง ฝั่งขวา
• #b_nav_main li.b_nav_active a, #b_nav_main li.b_nav_active strong กำหนดพื้นหลังเมนูที่กำลัง ฝั่งซ้าย

Main - เนื้อหา

• #b_main กำหนดพื้นหลังของเนื้อหา (ยกเว้นหน้า home)
  

Main - เนื้อหา

• #b_main กำหนดพื้นหลังของ footer
  

เปลี่ยน OLAT ให้เป็นภาษาไทย

มาถึงการปรับเปลี่ยน OLAT เพิ่มเติมกันอีกครับ คราวนี้ขอแนะนำเรื่องการเปลี่ยนภาษาที่แสดงใน OLAT โดยปกติแล้วเมื่อติดตั้งเสร็จเราสามารถเลือกภาษาที่มีให้ใช้เช่น อังกฤษ เยอรมัน อิตาลี และอื่นๆ แต่....ไม่มีไทยครับ (ตอนนี้ผมกำลังติดต่อ OLAT เพื่อขอทำหน้าที่แปลงภาษาไทยอย่างเป็นทางการให้)

เมื่อไม่มีเราก็ต้องแปลภาษาครับ โดยเราสามารถแปลเป็นภาษาใดๆก็ได้ หรือเปลียนข้อความที่มีอยู่แล้วตามต้องการได้เลย เนื่องจาก OLAT สนับสนุน UTF-8 ทำให้สามารถใช้ภาษาอะไรก็ได้

สร้างภาษาไทยให้ OLAT รู้จัก

1. ทำการ check out olat3_i18n,olatcore_i18n (ดูวิธีการ check out olat project ได้ที่นี้)
2. แก้ไข i18n.application.src.dir และ i18n.brasato.src.dir ในไฟล์ build.properties ให้ชี้ไปยัง path ของ project ที่ได้ check out มา เช่น
   
   

   i18n.application.src.dir = D:/Jboss/workspace/olat3_i18n/src/main/java/
   i18n.brasato.src.dir = D:/Jboss/workspace/olatcore_i18n/src/main/java/

3. แก้ไข is.translation.server ในไฟล์ build.properties ให้เป็น true เช่น
   
   

   is.translation.server=true

4. แก้ไข fallbackLanguage ในไฟล์ webapp/WEB-INF/olatconfig.xml.in ให้เป็น en เพื่อให้ภาษาที่จะสร้างขึ้นใหม่ใช้ภาษาอังกฤษเป็นภาษาตั้งต้น
   
5. ลบไฟล์ olatcore_i18n_all-SNAPSHOT.jar, olat3_i18n_all-SNAPSHOT.jar ที่อยู่ใน olat3\webapp\WEB-INF\lib ออก
6. ใช้คำสั่ง ant config-all และ restart tomcat ใหม่
7. login เข้า OLAT และไปกดที่ปุ่ม Generate New Language ที่ Administration > System Configuration > Languages > Languages Administration

จากนั้นก็ใส่ข้อมูลของภาษาที่ต้องการสร้างใหม่ แล้วกดปุ่ม Generate New Language เช่น ภาษาไทยใส่ข้อมูลดังนี้
ใส่คำแปลให้กับภาษาไทย

1. login เข้า OLAT และไปกดที่ปุ่ม Start ที่ Administration > Translation Tool > Translation Tool
2. เลือกแปลเป็นภาษาไทยและกด Translate ตามรูป
   
3. ใส่คำแปลได้เลยครับ แล้วก็ save and next ไปเรื่อยๆ มีทั้งหมด 7 พันกว่าคำนะครับ

ใส่ icon ธงชาติไทย
หลังจากเพิ่ิมภาษาไทยแล้วต้องทำการใส่ icon ธงชาติหน้าภาษาไทย 

1. ไปที่ไฟล์ webapp/static/themes/default/all/brasato.css
2. เพิ่ม .b_flag_th {background-image: url(../images/flags/th.png)}  บรรทัดล่างสุด

ไฟล์ที่ไม่ได้รวมอยู่ใน Translation Tool
หลังจากแปลภาษาใน Translation Tool เสร็จแล้วยังเหลือไฟล์ที่ต้องแปลอีกนิดหน่อยครับ โดยเปลี่ยนไฟล์ด้านล่างนี้ เป็นภาษาที่เราต้องการได้เลย เช่น ภาษาไทยเปลียนเป็น results2html_th.xsl

1. olat3/webapp/WEB-INF/src/org/olat/ims/resources/xsl/results2html_*.xsl สำหรับแสดงผลทดสอบ QTI
2. olat3/webapp/static/disclaimer/disclaimer_*.html สำหรับอธิบายการลงทะเบียน
3. olat3/webapp/WEB-INF/src/org/olat/core/gui/components/form/_static/js/jscalendar/lang/calendar-*.js สำหรับหน้า popup ปฎิทิน
4. olat3/webapp/help/help-course_*.zip สำหรับหน้าช่วยเหลือ (ถ้าเพิ่ม help ใหม่ต้องเพิ่มข้อมูลให้ตรงกับ olat_config.xml.in ด้วย และสั่ง ant config-all)
   

การปรับแต่ง OLAT แบบละเอียด

การปรับแต่งข้อมูลของ OLAT สามารถทำได้โดยผ่าน config files ที่แบ่งตามหน้าที่การทำงานดังนี้

Build.properties
ไฟล์ config หลักที่ต้องทำการปรับแต่งก่อนการติดตั้งโปรแกรม โดยเมื่อใช้คำสั่ง ant config-all ไฟล์นี้จะถูก copy ไปที่ webapp/WEB-INF/src/serviceconfig ดูตัวอย่างการแก้ไขไฟล์ที่นี้

webapp/WEB-INF/olatconfig.xml.in
ไฟล์ config สำหรับปรับแต่งโปรแกรมที่อยู่นอกเหนือจาก build.properties โดยเมื่อแก้ไขเสร็จต้องใช้คำสั่ง ant config-all การปรับแต่งแบบออกเป็นโมดูลย่อยดังนี้

1. module classname="org.olat.core.util.i18n.I18nModule"
   

   - กำหนดจำนวนภาษาที่ให้เลือกใช้ ที่ enabledLanguages เช่น en,de,fr,it,es
   - กำหนดภาษาเมื่อมีการ fallback ที่ fallbackLanguage เช่น en
   - กำหนดภาษาเมื่อมีการแปลงภาษาที่ transToolReferenceLanguages เช่น en

2. module classname="org.olat.core.commons.contextHelp.ContextHelpModule"

   - เปิดหรือปิดระบบคู่มือ context help ช่วยเหลือการใช้โปรแกรมที่ contextHelpEnabled เช่น true,false
   - กำหนดให้มีการใช้ rating ใน context help หรือไม่ ที่ ratingEnabled เช่น true,false
   

3. module classname="org.olat.basesecurity.BaseSecurityModule"

- กำหนดสิทธิสำหรับ user ที่อยู่ในกลุ่ม userManger (ไม่เกี่ยวกับ System Administrator ที่มีสิทธิทุกอย่าง) ที่ canCreateUser,canDeleteUser,.... เช่น true,false


4. module classname="org.olat.admin.AdminModule"

- กำหนดจำนวน user session ที่ maxNumberOfSessions เช่น -1(admin login ได้เท่านั้น) 0(ไม่จำกัดจนกว่า ram จะเต็ม) 1..m(ตามจำนวนที่ต้องการ)


5. module classname="org.olat.user.UserModule"

   - กำหนดข้อมูล administrator ที่ defaultUsers เช่น username,password
   - กำหนดรายชื่อของ test user ที่ testUsers (ถ้าไม่ต้องการให้สร้าง test user ให้กำหนด user.generateTestUsers=false ที่ build.properties
   

6. module classname="org.olat.course.CourseModule"

   - เปิดหรือปิดการ log การใช้ course ที่ enableCourseLogging เช่น true,false
   - เปิดหรือปิดระบบ chat ใน course ที่ enableCourseChat เช่น true,false
   - เปิดหรือปิดการ log ของ admin, user, คนนอกที่ไม่ใช้ user ที่ LogVisibilityForCourseAuthor เช่น AdminLog = INVISBLE, VISIBLE
   - กำหนดให้มีการ deploy course โดยตรงที่ DeployCourseExports เช่น true,false
   - กำหนดบทเรียนที่ต้องการให้ deploy ที่ CourseExportFile เช่น examples/Course_template_big.zip
   - กำหนดบทเรียนที่เป็น help ที่ helpCourseFile เช่น help/OLAT Hilfe.zip
   

webapp/WEB-INF/olat_extensions.xml

1. bean id="olatsites"

   - กำหนดเมนูหลัก (อยู่ด้านบน) ที่ต้องการแสดงหรือซ่อน โดย comment เมนูที่ต้องการซ่อนที่ property name="siteDefList" ออก เช่น ต้องการซ่อนเมนู Group Adminsitrator
   

2. bean id="bbfactory"

   - กำหนดเมนูสำหรับ Course (อยู่ด้านขวา) ที่ต้องการแสดงหรือซ่อน โดย comment เมนูที่ต้องการซ่อนที่ property name="nodeConfigurationList" ออก เช่น ต้องการซ่อนเมนู Wiki

webapp/WEB-INF/olat_portals.xml.in
ไฟล์ config สำหรับปรับแต่ง module ที่แสดงในหน้า protal ของ user และ guestโดยเมื่อแก้ไขเสร็จต้องใช้คำสั่ง ant config-all การปรับแต่งแบบออกเป็นโมดูลย่อยดังนี้

1. bean id="portalfactory"

   - กำหนด module สำหรับ portal (อยู่หน้า home) ที่ต้องการแสดงหรือซ่อน โดย comment เมนูที่ต้องการซ่อนที่ bean id="homeportal" (สำหรับ user) และ bean id="guestportal" (สำหรับ guest) ออก แล้ว commnet เมนูที่สัมพันธ์่ใน property name="portalColumns" ออกด้วย

webapp/WEB-INF/src/serviceconfig/org/olat/_spring/olat_userconfig.xml
ไฟล์ config สำหรับปรับแต่ง field ข้อมูลของ user และ guest รวมถึงหน้าค้นหา และแสดงรายการผู้ใช้ โดยเมื่อแก้ไขเสร็จต้องใช้คำสั่ง ant config-all และ ant copy-resource การปรับแต่งแบบออกเป็นโมดูลย่อยดังนี้

1. bean id="org.olat.user.UserPropertiesConfig" > property name="userPropertyHandlers" เพื่อแสดง user properties ทั้งหมดที่สามารถกำหนดได้
   
2. bean id="org.olat.user.UserPropertiesConfig" > property name="userPropertyUsageContexts"

   - กำหนดข้อมูลที่ต้องการให้แสดงหรือซ่อนในหน้า search ที่ entry key="org.olat.admin.user.UsermanagerUserSearchForm" เช่นซ่อน country โดย comment ที่ ref bean="userPropertyCountry ออก

   - กำหนดข้อมูลที่ต้องการให้แสดงหรือซ่อนในหน้าแสดงข้อมูลที่ entry key="org.olat.user.ProfileForm" เช่นซ่อน country โดย comment ที่ ref bean="userPropertyCountry ออก

   - กำหนดข้อมูลที่ต้องการให้แสดงหรือซ่อนในหน้าสมัครสมาชิกที่ entry key="org.olat.admin.user.NewUserForm2"
   

   - และสามารถกำหนดข้อมูลใน entry อื่นๆได้อีก (ไว้ค่อยทยอยเพิ่มให้นะครับ)

webapp/WEB-INF/src/serviceconfig/org/olat/_spring/olattextconfig.xml
ไฟล์ config สำหรับปรับแต่ง layout ในส่วนของ head, footer, top navigation โดยเมื่อแก้ไขเสร็จต้องใช้คำสั่ง ant config-all และ ant copy-resource การปรับแต่งแบบออกเป็นโมดูลย่อยดังนี้

1. กำหนดให้เปลี่ยน logo บน header ที่ bean id="fullWebApp.HeaderControllerCreator" โดย comment ของเดิมออกแล้วเพิ่ม

   property name="linkURI" value="url เมื่อคลิกที่ logo" />
   property name="imgURI" value="url ของ logo" />
   property name="imgAltText" value="alt ของ logo" />
   

การติดตั้งและปรับแต่ง OLAT โดยใช้ Eclipse

จากครั้งที่แล้วเราได้ลองทำการติดตั้งและปรับแต่ง olat แบบไม่ใช้ tool กันมาแล้ว คราวนี้ลองมาทำแบบใช้ tool ก็คือ Eclipse กันดูบ้าง

Software and Configuration
เริ่มจากต้องทำการติดตั้งโปรแกรมดังต่อไปนี้ก่อน

1. Java SDK 1.5 ขึ้นไป http://java.sun.com
2. Eclipse 3.2 ขึ้นไป htttp://www.eclipse.org
3. MySQL 5.0 http://www.mysql.org
4. Tomcat 5.0 ขึ้นไป โดยเลือกติดตั้งแบบ windows service installer http://tomcat.apache.org
   

หลังจากติดตั้ง Eclipse เสร็จก็ทำการ Config Eclipse ต่อเลยครับ

1. ติดตั้ง Web Tools Platform (WTP) โดยไปที่ Help > Software Updates > Find and Install > Add Sites แล้ว พิมพ์ http://download.eclipse.org/webtools/updates จากนั้นเลือก Web Tools Platform (WTP)
   
2. ติดตั้ง Apache Tomcat โดยไปที่ Window > Preferences > Server > Runtime Environments > Add > Apache Tomcat V5.0 หรือ 6.0 (ตามที่เราติดตั้ง)
3. เพิ่ม TOMCAT_HOME classpath โดยไปที่ Window > Preferences > Java > Build Path > Classpath Variables > New > เพิ่ม path ไปยัง directory ที่ติดตั้ง Tomcat
   

OLAT source code
หลังจากติดตั้ง software ที่ต้องการเรียบร้อยแล้วก็มาถึงการ download source code จาก olat server จาก cvs กันบ้าง โดยการใช้ Eclipse

1. เปิดหน้า CVS Repository Exploring จาก Window > Open Perspective > Other > New Repository Location
2. กรอกรายละเอียดดังนี้
   

   host: cvs.lot.org
   repository path: /usr/local/cvs
   user: anonymous
   password: anonymous
   connection type: pserver
   use default port
   validate connectoin on finish
   เลือก save password

3. กด Finish แล้วน่าจะทำการ connect ไปที่ server ได้
   
4. จากนั้นเลือก HEAD > olat3 แล้วคลิกขวาเลือก Check Out เป็นอันเสร็จก็รอครับ เพราะอาจใช้เวลาในการ download นานสักหน่อย
   

Setup OLAT Database
มาถึง database ก็เกือบเสร็จแล้วครับครับ ทำการสร้างได้เลย

1. สร้าง database ชื่อ Olat
2. กำหนดผู้ใช้ database เป็น user ชื่อ olat (password ตามต้องการ)

Configre OLAT
พอติดตั้งทุกอย่างครบก็ทำการปรับค่าเริ่มต้นของ OLAT ให้เข้ากับ environment ของเครื่องเราได้แล้วครับ

1. สร้างโฟลเดอร์ olatdata ที่ workspace ของ Eclipse (เอาไว้ที่เดียวกับ olat3 ที่เราได้ทำการ checkout มาแล้วจะได้หาง่ายดี) โดยเอาไว้อ้างถึง path ของ userdata.dir paremeter
2. ไปที่โฟลเดอร์ olat3 แล้ว copy build.properties.default เป็น build.properties เพื่อใช้ในการปรับแต่งค่าเริ่มต้นของ OLAT เนื่องจาก ANT build.xml จะมาอ่านข้อมูลในนี้ โดยปรับแต่ข้อมูลตามนี้ให้เข้ากับ enviroment ของเราได้เลย (แนะนำว่า path ของ window ควรใช้ "/" แทน "\"
   

   
   base.dir=/usr/local/opt/olat/olat3
   userdata.dir=/usr/local/opt/olat/olatdata
   tomcat.home=/usr/local/opt/tomcat5
   server.domainname=localhost
   server.port=8080
   adminemail=yourname@yourdomain.com
   supportemail=yourname@yourdomain.com
   smtp.host=smtp.yourdomain.com
   db.pass=mypassword
   brasato.debug=true
   localization.cache=false
   user.generateTestUsers=true
   log.rootCategory = INFO, syslog, A1
   

   
   
3. คลิกขวาที่ build.xml แล้วเลือก Run As > Ant Build
   
4. จากนั้นติ๊กที่ Sort targets และ Hide internal targets
5. ต่อด้วยติ๊กที่ cofig-all, dbsetup และ build (ต้องกด Order ให้เรียงคำสั่งตามนี้ด้วยนะครับ เพราะ ant จะทำการ config ต่อด้วยสร้าง database และ build ครับ)
   
6. กด Run ได้เลย
   

Run OLAT
มาถึงสุดท้ายจนได้ครับ พร้อมที่จะ Run OLAT ได้แล้ว :-)

1. copy server.xml จาก olat3/conf/server.xml ไปที่ Tomcat/conf
2. เปิด Eclipse แล้วไปที่ Window > Show View > Other > Server
3. คลิกขวา Tomcat Server แล้ว Start
4. เปิด browser ไปที่ http://localhost:8080/olat ได้เลยครับ