Day: May 19, 2022

  • upgrade crystal report version 10 ไปเป็น version 13

    เนื่องด้วยตอนนี้ crystal report version 10 มันเก่ามากแล้วทางผู้เขียนเลยอยากจะ upgrade crystal report version 10 ไปเป็น version 13 ดังนั้นจึงสรุปขั้นตอนไว้เพื่อเป็นแนวทางการทำงานของคนที่มีปัญหาเดียวกัน ดังนี้

    ขั้นตอนที่ 1 แก้ web.config ใน project web application โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0

    ขั้นตอนที่ 2 copy folder crystalreportviewers13 ใส่ไว้ที่ project web application

    ขั้นตอนที่ 3 แก้ page ที่เรียกใช้ crystal report โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0

    ขั้นตอนที่ 4 แก้ page ที่เรียกใช้ crystal report โดยเพิ่มการเรียก JavaScript ในส่วนของ tag head

    ขั้นตอนที่ 5 ลองเรียกใช้ page ที่มี crystal report ได้ผลลัพธ์ดังรูป

    ทางผู้เขียนหวังว่าจะมีประโยชน์ในการ upgrade crystal report version 10 ไปเป็น version 13 ใน source code ที่เรียกใช้ version เก่านะคะ

  • สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

    เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป

    เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้

    
    CSS (ตัด media query ออก เนื่องจากใช้ flex box ช่วยในการทำ responsive อยู่แล้ว)
    
    .timeline {
        position: relative;
        /*max-width: 1200px;*/
        margin: 0 auto;
    }
    
        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #977c44;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }
    
    .timeline-container {
        padding: 10px 40px;
        position: relative;
        background-color: inherit;
        width: 50%;
    }
    
        .timeline-container::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: -12px;
            background-color: white;
            border: 4px solid #FF9F55;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }
    
    .timeline-left {
        left: 0;
    }
    
    .timeline-right {
        left: 50%;
    }
    
    .timeline-left::before {
        content: " ";
        height: 0;
        position: absolute;
        top: 22px;
        width: 0;
        z-index: 1;
        right: 30px;
        border: medium solid white;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent white;
    }
    
    .timeline-right::before {
        content: " ";
        height: 0;
        position: absolute;
        top: 22px;
        width: 0;
        z-index: 1;
        left: 30px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
    
    .timeline-right::after {
        left: -12px;
    }
    
    .timeline-content {
        padding: 20px 30px;
        background-color: white;
        position: relative;
        border-radius: 6px;
    }

    HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง)

    /*Include Bootstrap 5*/
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    
    <div class="timeline">
        <div class="timeline-container timeline-left">
            <div class="timeline-content shadow-lg">
                <div class="d-flex justify-content-between align-items-baseline">
                    <img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                    <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
                </div>
                <p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
            </div>
        </div>
        <div class="timeline-container timeline-right">
            <div class="timeline-content shadow-lg">
                <div class="d-flex justify-content-between align-items-baseline">
                    <img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                    <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
                </div>
                <p>อุทยานประวัติศาสตร์พนมรุ้ง ปราสาทหินพนมรุ้งเป็นโบสถ์พราหมณ์ลัทธิไศวะ มีการบูรณะก่อสร้างต่อเนื่องกันมาหลายสมัย ตั้งแต่ประมาณพุทธศตวรรษที่ 15 ถึงพุทธศตวรรษที่ 17 และในพุทธศตวรรษที่ 18 พระเจ้าชัยวรมันที่ 7 แห่ง...</p>
            </div>
        </div>
        <div class="timeline-container timeline-left">
            <div class="timeline-content shadow-lg">
                <div class="d-flex justify-content-between align-items-baseline">
                    <img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                    <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
                </div>
                <p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
            </div>
        </div>
        <div class="timeline-container timeline-right">
            <div class="timeline-content shadow-lg">
                <div class="d-flex justify-content-between align-items-baseline">
                    <img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                    <h3 class="text-brown text-shadow">พ.ศ. 1792-2006</h3>
                </div>
                <p>อุทยานประวัติศาสตร์ศรีสัชนาลัย ศรีสัชนาลัย มีพัฒนาการมาแต่สมัยก่อนประวัติศาสตร์ตอนปลาย ประมาณ ๒,๓๐๐ – ๑,๕๐๐ ปีมาแล้ว โดยปรากฏชื่อควบคู่ไปกับเมืองสุโขทัยที่เป็นราชธานี สันนิษฐานว่าเมืองศรีสัชนาลัยมีความสำคัญในฐาน...</p>
            </div>
        </div>
    </div>

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