:: Kunagorn Sirikup :: C# Developer

11/12/56

iTextSharp สร้าง Footer แสดงหน้าและจำนวนหน้า

ตัวอย่างการสร้าง Footer ที่แสดงจำนวนหน้าในรูปแบบ n of m หรือพูดง่ายๆคืิอ แสดงเลขที่หน้า และ จำนวนหน้าทั้งหมด โดยใช้ iTextSharp มาลองดูวิธีสร้างกันนะครับ
เรื่มต้นผมจะเริ่มจากสร้าง class ขึ้นมาชื่อว่า PDFPageEvent โดย Inherit iTextSharp.text.pdf.PdfPageEventHelper แล้ว โดยจะ override method ดังนี้
- OnOpenDocument(PdfWriter writer, Document document)
- OnStartPage(PdfWriter writer, Document document)
- OnEndPage(PdfWriter writer, Document document)
- OnCloseDocument(PdfWriter writer, Document document)
จะได้ Code ตามนี้ครับ
using iTextSharp.text;
using iTextSharp.text.pdf;
public class PDFPageEvent : iTextSharp.text.pdf.PdfPageEventHelper
{
    // This is the contentbyte object of the writer
    PdfContentByte cb;

    // we will put the final number of pages in a template
    PdfTemplate template;

    // this is the BaseFont we are going to use for the header / footer
    BaseFont bf = null;

    // This keeps track of the creation time
    DateTime PrintTime = DateTime.Now;

    public string Title { get; set; }
    public string HeaderLeft { get; set; }
    public string HeaderRight { get; set; }
    public Font HeaderFont { get; set; }
    public Font FooterFont { get; set; }

    // write on top of document
    public override void OnOpenDocument(PdfWriter writer, Document document)
    {
        base.OnOpenDocument(writer, document);
        try
        {
            PrintTime = DateTime.Now;
            bf = BaseFont.CreateFont(BaseFont.HELVETICA, BaseFont.CP1252, BaseFont.NOT_EMBEDDED);
            cb = writer.DirectContent;
            template = cb.CreateTemplate(50, 50);
        }
        catch (DocumentException de)
        {
        }
        catch (System.IO.IOException ioe)
        {
        }
    }

    // write on start of each page
    public override void OnStartPage(PdfWriter writer, Document document)
    {
        base.OnStartPage(writer, document);
        Rectangle pageSize = document.PageSize;

        if (Title != string.Empty)
        {
            cb.BeginText();
            cb.SetFontAndSize(bf, 15);
            cb.SetRGBColorFill(50, 50, 200);
            cb.SetTextMatrix(pageSize.GetLeft(40), pageSize.GetTop(40));
            cb.ShowText(Title);
            cb.EndText();
        }

        if (HeaderLeft + HeaderRight != string.Empty)
        {
            PdfPTable HeaderTable = new PdfPTable(2);
            HeaderTable.DefaultCell.VerticalAlignment = Element.ALIGN_MIDDLE;
            HeaderTable.TotalWidth = pageSize.Width - 80;
            HeaderTable.SetWidthPercentage(new float[] { 45, 45 }, pageSize);

            PdfPCell HeaderLeftCell = new PdfPCell(new Phrase(8, HeaderLeft, HeaderFont));
            HeaderLeftCell.Padding = 5;
            HeaderLeftCell.PaddingBottom = 8;
            HeaderLeftCell.BorderWidthRight = 0;
            HeaderTable.AddCell(HeaderLeftCell);

            PdfPCell HeaderRightCell = new PdfPCell(new Phrase(8, HeaderRight, HeaderFont));
            HeaderRightCell.HorizontalAlignment = PdfPCell.ALIGN_RIGHT;
            HeaderRightCell.Padding = 5;
            HeaderRightCell.PaddingBottom = 8;
            HeaderRightCell.BorderWidthLeft = 0;
            HeaderTable.AddCell(HeaderRightCell);

            cb.SetRGBColorFill(0, 0, 0);
            HeaderTable.WriteSelectedRows(0, -1, pageSize.GetLeft(40), pageSize.GetTop(50), cb);
        }
    }

    // write on end of each page
    public override void OnEndPage(PdfWriter writer, Document document)
    {
        base.OnEndPage(writer, document);
        int pageN = writer.PageNumber;
        String text = "Page " + pageN + " of ";
        float len = bf.GetWidthPoint(text, 8);

        Rectangle pageSize = document.PageSize;

        cb.SetRGBColorFill(100, 100, 100);

        cb.BeginText();
        cb.SetFontAndSize(bf, 8);
        cb.SetTextMatrix(pageSize.GetLeft(40), pageSize.GetBottom(30));
        cb.ShowText(text);
        cb.EndText();

        cb.AddTemplate(template, pageSize.GetLeft(40) + len, pageSize.GetBottom(30));

        cb.BeginText();
        cb.SetFontAndSize(bf, 8);
        cb.ShowTextAligned(PdfContentByte.ALIGN_RIGHT,
            "Create : " + PrintTime.ToString(),
            pageSize.GetRight(40),
            pageSize.GetBottom(30), 0);
        cb.EndText();
    }

    //write on close of document
    public override void OnCloseDocument(PdfWriter writer, Document document)
    {
        base.OnCloseDocument(writer, document);
        template.BeginText();
        template.SetFontAndSize(bf, 8);
        template.SetTextMatrix(0, 0);
        template.ShowText("" + (writer.PageNumber - 1));
        template.EndText();
    }
}

ที่นี้มาดูวิธีการเรียกใช้งานกันนะครับว่าทำอย่างไรบ้าง
Document document = new Document();
document.Open();
PdfWriter instance = PdfWriter.GetInstance(document, viewContext.HttpContext.Response.OutputStream);
// สร้าง Event Handler
PDFPageEvent pageevent = new PDFPageEvent();
// กำหนดค่า PageEvent โดยใช้ Event Handler ที่สร้างมา
instance.PageEvent = pageevent

 เท่านี้ก็สามารถสร้างแสดงจำนวนหน้าในรูปแบบในส่วน Footer ไ้ด้แล้วครับ ตัวอย่าง Footer ดังรูป

9/12/56

LINE Store สั่งซื้อ Sticker ง่ายๆผ่านหน้าเว็บไซต์

แต่ก่อนเวลาจะซื้อสติ๊กเกอร์ใน LINE จะต้องจ่ายเงินตัดผ่านบัตรเครดิต แต่ตอนนี้ไม่จำเป็นแล้วนะครับ เพราะว่าเราสามารถซื้อ Sticker ของ LINE โดยไม่ใช้บัตรเครดิตแล้ว เพราะตอนนี้ LINE ได้ทำการเปิด LINE Store ของประเทศไทยเรียบร้อยแล้ว เพื่อให้ผู้ใช้สามารถซื้อสติ๊กเกอร์หรือไอเท็มเกมต่างๆในเครือของ LINE ผ่านหน้าเว็บไซต์ได้ทันที
วันนี้ผมจะมารีวิววิธีการสั่งซื้อสติ๊กเกอร์หรือไอเท็มเกมต่างๆผ่าน LINE Store ให้ลองดูนะครับ
ก่อนอื่นให้เข้าเว็บไซต์ของ LINE Store ที่ลิงค์นี้เลยครับ https://store.line.me
01
จากนั้นให้ Login เข้าใช้งานโดยกดที่ปุ่ม Login ด้านบนนะครับ จากนั้นระบบจะให้กรอก Username และ Password ที่เราใช้ในการสมัคร LINE นะครับ ถ้าจำไม่ได้ให้เข้าไปดูที่ Settings > Account ของ LINE นะครับ
02
จากนั้นเมื่อ Login เรียบร้อยแล้วระบบจะให้เรากด ยอมรับกฎและข้อบังคับในการใช้งาน เท่านี้ก็เรียบร้อยแล้วครับ เราก็จะเข้าไปหน้าแรกของเรานะครับ
03

จะมี Sticker ใหม่ๆน่ารักให้่เพื่อนๆเลือกกันเยอะแยะเลยครับ แต่ว่าตอนนี้เรายังไม่สามารถซื้อได้นะครับ เพราะว่าตอนนี้เรายังไม่มีเงินอยู่ในเครดิตเลย ดังนั้นต้องเติมเงินก่อนเป็นอันดัีบแรก โดยกดที่เติมเงินก็จะมีหน้าต่างแสดงขึ้นเพื่อให้เลื่อกช่องทางการจ่ายเงิน ตอนนี้สามารถจ่ายได้โดยใช้ AIS 1-2-Call Cash Card เท่านั้น ซึ่งสามารถหาซื้อได้ทั่วไปนะครับ ในอนาคตผมว่าน่าจะมีผู้ให้บริการรายอื่นๆเข้ามาดำเนินการแน่นอน จากนั้นให้กดยืนยันและดำเนินการต่อ
04
จากนั้นใส่ PIN หลังบัตรเติมเงิน แล้วกดเติมเงิน เท่านี้ก็เติมเงินเรียบร้อยแล้วครับ ในหน้าแรกของเราก็มีจะเครดิตเงินเพิ่มขึ้นมา
05

เพียงเท่านี้เราก็สา่มารถสั่งซื้อสติ๊กเกอร์หรือไอเท็มเกมต่างๆผ่าน LINE Store ได้แล้วครับ แล้วยังสามารถส่งเป็น Gift ไปให้เพื่อนใน Contact ของเราได้อีกด้วย น่าจะสะดวกสำหรับเพื่อนๆที่ต้องการสั่งซื้อสติ๊กเกอร์หรือไอเท็มเกมต่างๆ ของ LINE แต่ไม่มีบัตรเครดิตครับ

21/11/56

FREEZE HEADER COLUMN เลื่อนตามหน้าจอ

วันนี้มาเขียนวิธีการสร้าง Table สำหรับแสดงข้อมูลบนหน้าเว็บ แล้วกำหนดให้ Table แสดง Header Column เลื่อนตามลงเมื่อเรา Scroll หน้าจอลงมา ซึ่งจะได้หน้าตาออกมา ดังรูป


















วิธีการสร้างไม่ยากเลยครับมาลองทำกันทีละขั้นตอนนะครับ
เริ่มแรกผมจะสร้าง CSS ขึ้นมา ดังนี้นะครับ
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px Georgia, serif;
    }
    h1 {
        font: 32px Georgia, Serif;
        margin: 0 0 20px 0;
    }
    p {
        margin: 0 0 20px 0;
    }
    #page-wrap {
        width: 500px;
        margin: 10px auto;
        padding:10px;
    }
    table {
        border-collapse: collapse;
    }
    th {
        background-color: lightgrey;
        padding: 10px;
        width: 200px;
        text-align: left;
    }
    tr:nth-child(odd) {
        background: #eee;
    }
    td {
        padding: 10px;
        width: 200px;
    }
    .floatingHeader {
        position: fixed;
        top: 0;
        visibility: hidden;
    }
</style>

ในตัวอย่างข้างบนเป็น CSS มี class ชื่อ “floatingHeader” ที่ใช้ในการสร้าง “Freeze Header Column” นอกนั้นผมสร้างขึ้นมาเพื่อใช้ในตัวอย่างนี้เท่านั้น
ต่อมาก็มาเขียน Javascript ดังนี้
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    function UpdateTableHeaders() {
        $(".persist-area").each(function () {
            var el = $(this),
                offset = el.offset(),
                scrollTop = $(window).scrollTop(),
                floatingHeader = $(".floatingHeader", this)
            if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
                floatingHeader.css({
                    "visibility": "visible"
                });
            } else {
                floatingHeader.css({
                    "visibility": "hidden"
                });
            };
        });
    }
    // DOM Ready     
    $(function () {
        var clonedHeaderRow;
        $(".persist-area").each(function () {
            clonedHeaderRow = $(".persist-header", this);
            clonedHeaderRow
                .before(clonedHeaderRow.clone())
                .css("width", clonedHeaderRow.width())
                .addClass("floatingHeader");
        });
        $(window)
            .scroll(UpdateTableHeaders)
            .trigger("scroll");
    });
</script>

จาก Code ข้างบนจะเห็นว่า Javascript จะทำงานเมื่อมีการ Scroll หน้าจอลงมา แล้วไปเรียกฟังก์ชั่น UpdateTableHeaders เพื่อทำการสร้าง Header Column ที่จะวิ่งตามการเลื่อนของ Scrollbar
จากนั้นก็สร้าง HTML ดังนี้
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div id="page-wrap">
    <table class="persist-area">
        <thead>
            <tr class="persist-header">
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>EMP0001</td>
                <td>Mr.Kunagorn Sirikupt</td>
                <td>Developer</td>
            </tr>
            <tr>
                <td>EMP0002</td>
                <td>Mr.AAAAAAAAAAAAA</td>
                <td>System Analysis</td>
            </tr>
            <tr>
                <td>EMP0003</td>
                <td>Mr.BBBBBBBBBBBBBBBB</td>
                <td>Developer</td>
            </tr>
            <tr>
                <td>EMP0004</td>
                <td>Mr.CCCCCCCCCCCCCCCC</td>
                <td>System Analysis</td>
            </tr>
            <tr>
                <td>EMP0005</td>
                <td>Mr.DDDDDDDDDDDDDDDDDD</td>
                <td>Developer</td>
            </tr>
            <tr>
                <td>EMP0006</td>
                <td>Mr.EEEEEEEEEEEEEEEEEE</td>
                <td>System Analysis</td>
            </tr>
            <tr>
                <td>EMP0007</td>
                <td>FFFFFFFFFFFFFFFFFFF</td>
                <td>Developer</td>
            </tr>
            <tr>
                <td>EMP0008</td>
                <td>GGGGGGGGGGGGGGGGGG</td>
                <td>System Analysis</td>
            </tr>
            <tr>
                <td>EMP0009</td>
                <td>HHHHHHHHHHHHHHHHH</td>
                <td>System Analysis</td>
            </tr>
            <tr>
                <td>EMP0010</td>
                <td>KKKKKKKKKKKKKKK</td>
                <td>Developer</td>
            </tr>
            <tr>
                <td>EMP0001</td>
                <td>LLLLLLLLLLLLLLLLL</td>
                <td>Developer</td>
            </tr>
        </tbody>
    </table>
    <div style=" margin-top:20px;">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
            sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
            commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
            eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
            facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
            eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
            accumsan porttitor, facilisis luctus, metus</p>
    </div>
    <div>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
            sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
            commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
            eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
            facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
            eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
            accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

จาก Code ข้างบนมีข้อสังเกต ดังนี้
- Table ที่สร้างต้องมีการประกาศ class ชื่อ “persist-area”
- ในส่วนของ Header Column ต้องใช้ tag <th></th>
?
1
2
3
4
5
6
7
<thead>
    <tr class="persist-header">
        <th>ID</th>
        <th>Name</th>
        <th>Position</th>
    </tr>
</thead>