วันจันทร์ที่ 4 ตุลาคม พ.ศ. 2553

ขั้นตอนในการสร้าง Report ด้วย iReport

สำหรับคนที่สนใจการสร้าง Report ด้วย iReport มีขั้นตอนในการเตียมการดังนี้

1. เนื่องจาก iReport เป็นเครื่องมือออกแบบ JasperReport ซึ่งเป็น engine หลักของ Report และถูกสร้างขึ้นจากภาษา Java ครับ ฉนั้น ในเครื่องคอมพิวเตอร์ของผู้ใช้จะต้องมี JRE ติดตั้งอยู่ แต่ผมขอแนะนำให้ติดตั้งด้วย JDK ไปเลยดีกว่าครับ เราสามารถดาวน์โหลด JDK ได้จาก http://java.sun.com/ จากนั้นก็ทำการติดตั้ง JDK ลงในเครื่องคอมพิวเตอร์ของเราครับ

2. ดาวน์โหลด iReport จาก http://jasperforge.org/ และทำการติดตั้ง iReport ลงในเครื่องคอมพิวเตอร์

3. เตรียมฐานข้อมูล ซึ่ง iReport รองรับฐานข้อมูลได้หลายชนิด เท่าที่ผู้เขียนรู้จักกับฐานข้อมูล เช่น ORACLE ,MSSQL ,MySQL ฯลฯ iReport ก็สามารถรองรับได้หมดครับ สำหรับผู้ที่ต้องการฝึกใช้แบบอย่างรวดเร็วก็อาจใช้ฐานข้อมูลที่หาได้ง่ายๆใน เครื่องเช่น Access เป็นต้น จากนั้นก็สร้างฐานข้อมูลและตารางข้อมูลสำหรับใช้สร้างรายงาน

4. จากนี้เราก็จะสามารถใช้ iReport ในการสร้าง Report ได้แล้วครับ ซึ่งขั้นตอนหลักในการออกแบบรายงานที่ต้องทำก็คือ


* การตั้งค่า iReport เช่นเส้นทางในการบันทึกและcompile รายงาน

* การสร้าง Connection/Datasource เพื่อติดต่อกับฐานข้อมูล

* การสร้าง Query เพื่อดึงฟิลด์ข้อมูลมาใช้ในรายงาน

* การออกแบบรายงาน เช่น การจัดวางออบเจ็ค การกำหนดฟอนต์ เป็นต้น

* การบันทึกและการแสดงผลรายงาน

วันอังคารที่ 24 สิงหาคม พ.ศ. 2553

About BIRT Reports

A BIRT report is a structured document that displays data from an externa information system, such as a database or application. Data in the report is organized and formatted so that it is meaningful and useful to the person who reads the report. A BIRT report is not a document that you type, like an essay or research paper, although you could use BIRT Report Designer to create such documents.

Using BIRT Report Designer, you can create operational reports, such as a bill of materials, a purchase order, or an invoice. You can also create reports that provide real-time information about business performance, such as the number of calls handled by your customer service organization, the number of problems handled, categorized by levels of complexity, and the number of repeat calls made by the same customer. You can use BIRT to create clientfacing reports, such as account statements and transaction details. Any time that you need to gather, analyze, summarize, and present data from an information system, a report is the solution.



How to installing BIRT

These are the prerequisites to create a web project including Seam and BIRT capabilities

◦Eclipse Platform 3.3.1
◦Data Tools Platform (DTP) 1.5.1
◦Eclipse Modeling Framework (EMF) 2.3.1
◦Graphical Editing Framework (GEF) 3.3.1
◦Web Tools Platform (WTP) 2.0.1
◦Java Development Kit (JDK) 1.5
On BIRT Downloads for build 2.2.1, perform one of the following tasks:

■ If you are using Windows, choose the following archive file in Report Designer Full Eclipse Install :

birt-report-designer-all-in-one-2_2_1.zip

■ If you are using Linux, choose the following archive file in Report Designer Full Eclipse Install For Linux :

birt-report-designer-all-in-one-linux-gtk-2_2_1.tar.gz

■ Choose the download site that is closest to your location.

■ The BIRT Report Designer all-in-one archive file downloads to your system.
■ Extract the archive file to a hard drive location that you specify. The extraction creates a directory named eclipse at the location that you specify.

To test the BIRT Report Designer installation, start Eclipse, then start BIRT Report Designer as described in the following procedure. BIRT Report
Designer is a perspective within Eclipse.



How to test the BIRT Report Designer installation :

วันอังคารที่ 13 กรกฎาคม พ.ศ. 2553

การสร้าง Style กับไฟล์ .css ( การใช้งานแบบ External )

External เป็นจุดประสงค์หลักของการใช้งาน CSS และมันจะประหยัดพื้นที่ในการเก็บแฟ้มต่างๆบนเซิฟเวอร์ เพราะว่าได้มีการแยกโค๊ดคุณสมบัติของเอกสาร HTML ออกมาเป็นแฟ้มเดียวแต่สามารถจัดการลักษณะทั้งหมดในทุกๆเว็บเพจที่เชื่อมโยง มายังแฟ้ม CSS แฟ้มเดียวได้ เมื่อแยกแฟ้มออกมาเป็นแฟ้มเดี่ยวแล้วให้บันทึกแฟ้ม CSS นั้นให้มีนามสกุลเ็ป็น .css เท่านั้นแล้วทำการใช้แท็ก ในเอกสาร HTML เพื่อทำการเชื่อมโยงแฟ้มเอกสาร HTML และแฟ้ม CSS เข้าด้วยกัน ทุกๆเว็บเพจที่มีการเชื่อมโยงมายังแฟ้ม CSS จะมีลักษณะตามที่กำหนดไว้ในแฟ้ม CSS นั้น

ตัวอย่างการใช้งาน

body{

color:#8B0000;

font-size:15px;

}

โดยปกติแล้วแบบ inline เราจะนำ code ดังกล่าวไปใส่ไว้ใน

หรือ

color:#8B0000; font-size:15px;">ข้อความ

ซึ่งแน่นอนว่าหากเราต้องการนำไปใช้กับไฟล์อื่นๆ ก็ต้องนำ code ไปใส่ในลักษณะเดียวกัน แต่ปัญหาคือ สมมุตว่าเรามีไฟล์อยู่ 50 ไฟล์ ใส่ code ให้ตัวอักษรเป็นสีแดงและขนาดตัวอักษร 15px แล้ว วันดีคืนดีต้องการที่จะเปลี่ยนเป็นตัวอักษรสีฟ้า ขนาดตัวอักษร 14px ............. ซวยแล้ว ตั้ง 50 ไฟล์นะ ไล่เปลี่ยนไหวหรอ เสียเวลาทำมาหากินมาก แทนที่จะเอาเวลามานั่งเปลี่ยน 50 ไฟล์นี้ เอาเวลาไปปลูกป่าช่วยโลกร้อนยังได้ประโยชน์มากกว่าเลย

และนี่คือสาเหตุที่ต้องมีการใช้งานแบบ External ซึ่งทุกๆไฟล์สามารถดึง CSS มาใช้ได้หมด หากต้องมีการเปลี่ยนแปลง เราเปลี่ยนแค่ไฟล์ .css ไฟล์เดียวจบเลยครับ หมดปัญหาในการเสียเวลามานั่งเปลี่ยน 50 ไฟล์ และข้อดีอีกอย่างหนึ่งคือ จะเป็นผลดีกับการทำ SEO สำหรับ Google เล็กน้อยด้วย เพราะทำให้ Google Robot ไม่ต้องไปอ่าน code มากๆ เพราะ Google Robot ไม่มีความจำเป็นที่จะต้องไปอ่านพวก CSS หรือ Javascript ทำให้ Google Robot นั้นเก็บข้อมูลเว็บเราได้ง่ายขึ้นครับ

เอาล่ะ มาถึงวิธีใช้แบบ External

จากตัวอย่าง code

body{

color:#8B0000;

font-size:15px;

}

ให้เรานำ code นี้ ไปใส่ใน notepad แล้วเซฟเป็น

(ชื่อไฟล์.css) ในที่นี้ผมจะตั้งชื่อว่า style.css

เวลาเรียกใช้ในหน้า HTML

ข้อความ 1

ข้อความ 2

ข้อความ 3

การใช้ CSS ใน style Tag ( Internal )

Internal

รูปแบบการใช้งานก็จะมีความคล้ายกับแบบ Inline Internal คือเขียนโค๊ดในเอกสาร HTML นั้น และจะมีผลเฉพาะภายในเอกสาร HTML นั้นเท่านั้น รูปแบบ Internal ค่อนข้างจะมีการใช้งานอยู่มากและการใช้งานจะต้องมีแท็ก


เนื้อหา เวบเพจ

นี่เป็นเพียงแต่แบบร่างสำหรับการใช้งาน CSS แบบ Internal เพราะฉะนั้นตัวอย่างโค๊ดต่อไปจะอยู่ภายในแท็ก

วันจันทร์ที่ 12 กรกฎาคม พ.ศ. 2553

ทำ CSS Style Sheet ง่าย ๆ ใน Dreamwaver

CSS ย่อมาจาก Cascading Style Sheets ซึ่งเป็นนมาตราฐานนึงในการกำหนดรูปแบบลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ CSS ช่วยเราได้อย่างมากในการออกแบบหรือจัดการกับปัญหาบางอย่างที่ HTML โดยปรกติไม่สามารถทำได้ หรือทำได้ไม่ดีเท่าที่ควร เช่น การกำหนดขนาด Font ให้ได้ขนาดตามที่เราต้องการ หรือการใส่สีสรรให้กับช่องกรอกข้อมูลบนหน้าเว็บ และอื่น ๆ ในบทเรียนนี้เราจะมาเริ่มรู้จักกับการใช้งาน CSS กับโปรแกรม Dreamweaver เบื้องต้นกันสักนิด สำหรับเทคนิควิธีการใช้งาน CSS ต่าง ๆ คุณอาจจะหาอ่านได้จากหน้า Tricks ของเว็บไซต์นี้

ข้อดีสำคัญของ CSS

  1. ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
  2. มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
  3. สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
  4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
  5. ง่ายในการเรียกดู Source
  6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ
การใช้งาน CSS Styles Panel เบื้องต้น
1. การเรียกใช้งาน CSS Styles Panel
สำหรับโปรแกรม Dreamweaver เราสามารถเรียกใช้งานหน้าต่าง CSS Styles ได้จาก Main menu -> Window -> CSS Styles หรือหากเป้นเวอร์ชั่น MX2004 คุณสามารถเรียกใช้งานได้จาก Panel Group ทางขวามือของโปรแกรม (ตามค่าเริ่มต้นของโปรแกรม) หน้าตาของ CSS Styles Panel ก็จะได้ดังรูป



2. วิธีการสร้าง CSS Style Sheet ใหม่
เราสามารถสร้าง CSS ขึ้นมาใหม่ได้โดยไปที่หน้าต่าง CSS Styles จากนั้นให้ทำการกดไปที่ Icon ที่มีเครื่องหมายบวก(+) หรือเราเรียก icon นี้ว่า New CSS Styles จะเห็นได้ตามภาพ เมื่อทำการกดไปแล้ว โปรแกรมจะทำการเปิดหน้าต่างขึ้นมาให้เราทำการตั้งชื่อหรือเลือก TAG ของ HTML มาใช้ในการกำหนดค่า ดังรูป


ที่หน้าต่าง New CSS Style นี้จะมีช่องให้เราตั้งชื่อหรือเลือกรูปแบบของ CSS ได้ ดังนี้

  • Selector : เป็นการกำหนดชื่อของ CSS ที่เราต้องการ และที่ช่องนี้จะทำงานสัมพันธ์กับ Type ด้านล่าง หากเราเลือก Type เป็น Redifine HTML TAG ที่ช่อง Selector จะมี List ของ TAG HTML ให้เราเลือกเพื่อทำการกำหนดคุณสมบัติใหม่ให้กับ TAG HTML

  • Tyle : เลือกรูปแบบที่เราจะกำหนดคุณสมบัติ CSS มี 3 ค่าให้เลือก คือ
    Make Custom Style (class) เป็นการสร้าง CSS ขึ้นมาใหม่โดยเราทำการกำหนดชื่อของ Style ขึ้นเอง เราอาจจะเรียก Style นั้นว่า Class ก็ได้
    Redifine HTML Tag เป็นการเลือก TAG ของ HTML ขึ้นมาทำการกำหนดคุณสมบัติใหม่
    Use CSS Selector เป็นการกำหนดคุณสมบัติ CSS ให้กับบางจุดของหน้าเว็้บเพจที่เราต้องการ เช่น จุดที่เป็น Link จุดที่เรากำหนด ID ของ TAG นั้น ๆ ไว้ เป็นต้น ใน MX2004 จะใช้ชื่อ option นี้ว่า Advanced ดังรูป
3. วิธีการใช้งาน CSS
วิธีการใช้ CSS โดยการลากทึบที่ตัวอักษรแล้วคลิกขวาเลือก CSS Styles แล้วเลือก Style
ตามชื่อที่เราได้ตั้งไว้ แค่นี้เราก็จะได้ Style ในแบบของเรา