Adobe Dreamweaver + PHP + MySQL ตอนที่ 2 การกำหนด Site

หลังจากที่ผมได้แนะนำตอนแรก การกำหนดค่าเริ่มต้นเกี่ยวกับเว็บเพจให้รองรับภาษาไทยไปแล้ว ในตอนนี้เป็นการกำหนด Site ซึ่งเป็นขั้นตอนเบื้องต้นอยู่นะครับ ถ้าเราไม่กำหนดหรือสร้าง Site แล้ว เวลาเราทำ Link ไปยังเพจอื่นๆ จะมีปัญหาเรื่องของที่อยู่นะครับ เพราะมันจะ Link ไปที่เครื่องของเรา (C:\AppServ\www\student\test.html) ไม่ได้ Link ไปยังเพจ (test.html) ที่เรากำหนดครับ เพราะฉะนั้นแล้ว เราต้องกำหนดหรือสร้าง Site ก่อนครับ

ก่อนอื่นให้เราทำการตรวจสอบเครื่องของเราก่อนว่า เครื่องของเราได้จำลองการทำงานเป็นเว็บเซิร์ฟเวอร์หรือยัง ถ้าเราตรวจสอบแล้วว่าเครื่องเราจำลองการทำงานเป็นเว็บเซิร์ฟเวอร์ให้สร้าง folder ชื่อ student นะครับ ถ้าเราให้ xampp ก็จะสร้าง folder เพิ่มใน folder htdocs แต่ถ้าใครใช้ AppServ ก็ต้องสร้าง folder เพิ่มใน folder www ครับ หลังจากนั้นก็เริ่มกำหนด Site ได้เลยครับ

1. ไปที่เมนู Site -> New Site...

2. กำหนดค่าต่างๆ ดังนี้

• What would you like to name your site? เป็นการกำหนดชื่อเว็บไซต์ครับ ในที่นี้ให้กำหนดเป็น student 
• What is the HTTP Address (URL) of your site? เป็นการกำหนด URL ครับ ซึ่งจริงๆ แล้วก็เป็นเครื่องของเราเองนะครับ ให้กำหนดเป็น http://localhost/student
• กดปุ่ม Next >

• เลือก Yes, I want to use a server technology ซึ่งเราจะใช้เทคโนโลยีเซิร์ฟเวอร์ และเลือกรายการใน Which server technology? เป็น PHP MySQL 
• กดปุ่ม Next > 

• เลือก Edit and test locally (my testing server is on this computer) ซึ่งเป็นการกำหนดการแก้ไขและทดสอบที่เครื่องของเรา
• Where on your computer do you want to store your files? เป็นกำหนดไฟล์ต่างๆ ที่เราสร้างขึ้นนั้นจัดเก็บไว้ที่ไหน ในกรณีนี้ผมใช้ xampp ผมก็กำหนดเป็น C:\xampp\htdocs\student\ แต่ถ้าเป็น AppServer ก็ต้องกำหนดเป็น C:\AppServer\www.\student\
• กดปุ่ม Next >

• What URL would you use to browse to file root of your site? เป็นการกำหนดค่าที่อยู่ของเว็บไซต์ของเรา กรณีนี้เป็นเครื่องของเราเอง กำหนดเป็น http://localhost/student
• กดปุ่ม Test URL เพื่อทำการตรวจสอบ ถ้าตรวจสอบผ่านจะขึ้น successfully นะครับ
• กดปุ่ม Next >

• เลือก No นะครับ เพราะเรายังไม่ต้องย้ายข้อมูลขึ้นเซิร์ฟเวอร์
• กดปุ่ม Next >

• แสดงข้อมูลที่เราได้กำหนดไปแล้ว
• กดปุ่ม Done ครับ

• ปรากฏ student ในหน้าต่าง Manage Sites
• เลือก Site ที่เราได้ทำการสร้างขึ้น กรณีนี้เลือก student
• กดปุ่ม Done

สำหรับตอนนี้ก็มีเพียงเท่านี้นะครับ ง่ายใช่ไหมครับ

Adobe Dreamweaver + PHP + MySQL ตอนแรก การกำหนดค่าเริ่มต้นเกี่ยวกับเว็บเพจให้รองรับภาษาไทย

บทความนี้เป็นเรื่องของการพัฒนาเว็บไซต์ โดยอาศัยเครื่องมือช่วยในการทำงาน เพื่อลดขั้นตอนการเขียนโค้ดขึ้นมาเอง ซึ่งเครื่องมือที่ใช้ก็คือ Adobe Dreamweaver (CS3), PHP และ MySQL ในการพัฒนาเว็บไซต์

Adobe Dreamweaver ที่ผมใช้ในการแนะนำคือเวอร์ชั่น CS3 แต่จริงๆ แล้วจะใช้เวอร์ชั่นอะไรก็ได้นะครับ ใช้หลักการเดียวกันทั้งนั้น

ตอนแรกจะเป็นการจัดเตรียมเว็บไซต์เบื้องต้นที่เกี่ยวกับ Dreamweaver ก่อนนะครับ หลังจากนั้นก็เป็นเรื่องของการเชื่อมต่อฐานข้อมูล ซึ่งจริงๆ แล้ว ถ้าเราอาศัย Dreamweaver ช่วยในการพัฒนาเว็บไซต์จะลดขั้นตอนในการเขียนโค้ด PHP ไปได้มากทีเดียว แต่เราจะต้องกำหนดค่าต่างๆ ให้ถูกต้องเท่านั้นเองครับ

เรามาเริ่มต้นในการจัดเตรียมเว็บไซต์ของเรากันก่อนเลยนะครับ

1. เปิดโปรแกรม Dreamweaver ครับ

2. กำหนดค่าต่างๆ ที่จำเป็นในการแสดงผลภาษาไทย และเมื่อมีการสร้างเพจใหม่ทุกครั้ง โดยไปที่เมนู Edit -> Preferences...

ให้ทำการเลือกรายการ Fonts และเลือก Fonts เป็น Unicode หรือไม่ก็เลือกฟอนต์ภาษาไทยก็ได้ครับ แต่ที่ให้เลือก Unicode ก็เพราะว่า ณ ปัจจุบันนี้เค้านิยมกันครับ

หลังจากนั้นให้เลือก New Documents และกำหนดค่าที่ Default encoding เป็น Unicode (UTF-8) 

3. ตรวจสอบเว็บเพจในการกำหนดค่าต่างๆ ที่ผ่านมา โดยให้สร้างไฟล์ใหม่ขึ้นมา

ซึ่งเราจะได้เพจว่างๆ ในตอนนี้เรายังไม่ต้องทำอะไรทั้งนั้น เราแค่ต้องการตรวจสอบเว็บเพจในการกำหนดค่าต่างๆ ที่ผ่านมาเท่านั้นนะ ซึ่งเราจะเลือก Page Properties... 

หลังจากนั้นให้เลือกรายการ Title Encoding และดูที่ Encoding เป็น Unicode (UTF-8) หรือเปล่า ถ้าใช่ก็แสดงว่าการทำงานถูกต้องแล้วครับ

สำหรับตอนแรก การกำหนดค่าเริ่มต้นเกี่ยวกับเว็บเพจให้รองรับภาษาไทย เป็นขั้นตอนการกำหนดค่าที่ง่ายๆ ครับ

โปรแกรมคิดเกรด A, B, C, D และ F โดยใช้คำสั่ง switch (ภาษาจาวา)

public class HW03_01 {


    public static void main(String[] args) {
        char grade = ' ';
        System.out.print("Input score: ");
        int score = new java.util.Scanner(System.in).nextInt();
        
        if ((score > 0) && (score < 101)) {
            switch (score / 10) {
                case 1:
                case 2:
                case 3:
                case 4: grade = 'F'; break;
                case 5: grade = 'D'; break;
                case 6: grade = 'C'; break;
                case 7: grade = 'B'; break;
                case 8:
                case 9:
                case 10: grade = 'A';
            }
            System.out.println("Grade: " + grade);
        } else
            System.out.println("Score over flow");
    }
}

โปรแกรมหาค่า z จากสมการที่กำหนด (ภาษาจาวา)

จงหาค่า Z จากสมการที่กำหนด ดังนี้
x > 0 : z = 2x^2
x < 0 : z = 2x + 4y
x = 0 : z = 1

public class HW03_08 {

    public static void main(String[] args) {
        int z;
        System.out.print("Input x: ");
        int x = new java.util.Scanner(System.in).nextInt();
        
        if (x > 0) {
            z = 2 * (x*x);
        } else if (x < 0) {
            System.out.print("Input y: ");
            int y = new java.util.Scanner(System.in).nextInt();
            z = (2 * x) + (4 * y);
        } else {
            z = 1;
        }
        
            System.out.println ("z = " + z);
    }
}

โปรแกรมการแสดงผลรูปสามเหลี่ยมติดกัน (ภาษาจาวา)

public class HW03_07 {

    public static void main(String[] args) {
       for (int r = 1; r <= 5; r++) {
            for (int c = 1; c <= r; c++) 
                System.out.print("*");
            for (int c = 1; c < (5*2)-(r*2); c++)
                System.out.print(" ");
            for (int c = 1; c <= r; c++)
                if (c != 5)
                    System.out.print("*");
            System.out.println();
        }
    }
}

โปรแกรมการถอนเลขจำนวนเงิน (ภาษาจาวา)

โปรแกรมการถอนเลขจำนวนเงิน

import javax.swing.JOptionPane;

public class HW02 {

    public static void main(String[] args) {
        int m1000 = 0;
        int m500 = 0;
        int m100=0;
        int m50=0;
        int m20=0;
        int m10=0;
        int m5=0;
        int m2=0;
        int m1=0;
        
        int m = Integer.parseInt(JOptionPane.showInputDialog(null, "ระบุจำนวนเงิน", "Information", JOptionPane.INFORMATION_MESSAGE));
        String mStr = "จำนวนเงินที่ต้องระบุ: " + m;
        if (m > 0) {
            if (m >= 1000){
                m1000 = m / 1000;
                m %= 1000;
            }
            if (m >= 500) {
                m500 = m / 500;
                m %= 500;
            }
            if (m >= 100) {
                m100 = m / 100;
                m %= 100;
            }
            if (m >= 50) {
                m50 = m / 50;
                m %= 50;
           }
            if (m >= 20) {
                m20 = m / 20;
                m %= 20;
            }
            if (m >= 10) {
                m10 = m / 10;
                m %= 10;
            }
            if (m >= 5) {
                m5 = m / 5;
                m %= 5;
            }
            if (m >= 2) {
                m2 = m / 2;
                m %= 2;
            }
            m1 = m;
            
            mStr += "\n1,000 = " + m1000 + "\n500 = " + m500;
            mStr += "\n100 = " + m100 + "\n50 = " + m50;
            mStr += "\n20 = " + m20 + "\n10 = " + m10;
            mStr += "\n5 = " + m5 + "\n2 = " + m2;
            mStr += "\n1 = " + m1;
            JOptionPane.showMessageDialog(null, mStr, "Information", JOptionPane.INFORMATION_MESSAGE);
        } else
            JOptionPane.showMessageDialog(null, "ต้องระบุจำนวนเงินมากกว่า 0", "Information", JOptionPane.INFORMATION_MESSAGE);
    }
}

การแสดงข้อมูลโดยใช้ JOptionPane (ภาษาจาวา)

การแสดงข้อมูลโดยใช้ JOptionPane โดยใช้เมธอด (method) showMessageDialog

import javax.swing.JOptionPane;

public class HW01 {

    public static void main(String[] args) {
        String name = "Warawut";
        String surname = "Khangkhan";
        String department = "Information";
        
        JOptionPane.showMessageDialog(null, "Name: " + name + "  " + surname + "\nDepartment: " + department, "Information", JOptionPane.INFORMATION_MESSAGE);
    }
}