[SPRING] มาใช้จัด Layout ให้กับ UI (Thymeleaf) ครับ

จาก Blog ตอนที่ที่ได้สร้างเว็บที่มี CRUD ต่อกับฐานข้อมูลแล้ว แต่ยังพบปัญหาว่ามันยังมี Code ที่ซ้ำซ้อนในส่วนของ UI เช่น

  • ไฟล์  index.html ครับ
  • และไฟล์  editPerson.html  เป็นต้น

พระเอกที่จะมาช่วยเราในครั้งนี้ คือ thymeleaf-layout-dialect

  • ถ้าใครเคยเรียน Design Pattern มาสิ่งที่ thymeleaf ทำ คือ View แต่ละอันทำหน้าที่ของตัวเองพอ แสดง Content ในส่วนที่รับผิดชอบ ส่วนการจัดการพวกเมนู และอื่นๆ จะถูกเพิ่มความสามารถ(Declorate) เข้าไปจากตัว Layout ครับ
  • ตัว Design Pattern ที่ผมหมายถึง คือ Decorator pattern ครับ

มาดูโจทย์กันก่อน

  • เว็บจาก Blog ตอนที่แล้วครับ ที่ผมชี้จุดไปว่าเห้ยมันมี Code ซ้ำ
  • ผมแยก 2 ส่วนนะครับ Header, Content และเพิ่ม Footer ตามรูปครับ

สิ่งที่ต้องมี

  • เว็บตัวอย่างแหละ ปกติผมจะอ้างอิงจาก Blog ตอนก่อน แต่จะสร้างใหม่ก็ได้นะ
  • ตรวจสอบ Dependency ให้ดีต้องมี
    • thymeleaf
    • thymeleaf-layout-dialect

Let’s Refactoring

  • สร้างโพลเดอร์ layouts ใน ก่อนครับ วางโครงสร้างไว้ก่อน เช่น แยก Layout ของหน้าจอ User กับ Admin ครับ
  • สร้างไฟล์ในโพลเดอร์ layouts ชื่อ  mainLayout.html  ครับ

    • สังเกตุดีๆครับ ว่าในแท๊ก  <html>  ต้องมีการอ้างถึง  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"  ครับ เพื่อให้ Engine ของ Thymeleaf รู้ครับ
    • ตรงแท๊ก  <head>  มีกำหนด header ไว้ครับ โดยจะอ้างอิงไฟล์ใน  fragments/header  ครับ
    • ส่วนแท๊ก <div layout:fragment="content"> เป็นช่องว่างๆครับ เอาไว้นำ html จากหน้าจออื่นๆ เช่น มาเสียบแทนครับ
    • ตรงแท๊ก  <div>  มีกำหนด footer ไว้ครับ โดยจะอ้างอิงไฟล์ใน  fragments/footer  ครับ
  • โครงสร้าง ณ ตอนนี้ครับ
  • มาแก้ไขไฟล์อื่นๆครับ ยกตัวอย่างเฉพาะของ
    • header อันนี้มีการเพิ่ม  th:fragment="header"  เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์  mainLayout.html ครับ ในส่วน header
    • footer อันนี้มีการเพิ่ม  th:fragment="footer"  เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์  mainLayout.html ครับ ในส่วน footer
    • editPerson มีการเพิ่ม  layout:fragment="content"  เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์  mainLayout.html ครับ ในส่วน content

ไฟล์ที่ทำเสร็จแล้วครับ

  • สามารถ Download ไปทดสองได้เลย ^__^

 

[SPRING] ลองต่อฐานข้อมูลกันหน่อย

จาก Blog ที่แล้วไปลองใช้ Thymeleaf ไปแล้วกับการแสดงผลให้สวยงานครับ แต่อันนั้นข้อมูลที่ได้เกิดจากการ Mock จากชั้น Service ครับ สำหรับ Blog ตอนนี้มีเป้าหมาย

  • CRUD ได้
  • ต่อ Database ได้ โดยในที่นี้ผมใช้ MySQL ครับ

สิ่งที่ต้องเตรียม

  • ต่อ Database ต้องมีการเพิ่ม Dependency เพิ่มครับ
    • JPA / Hibernate
    • MySQL – เรื่อง Version ยังไงต้องตรวจดูด้วยนะครับ

มาลุยกันเลยครับ

  • ถ้าเพิ่มข้อมูลเกี่ยวกับ Person ก็ต้องมีหน้าจอ 2 จอ
    • หน้าจอ Main
    • หน้าจอสำหรับ List รายการ
    • หน้าจอสำหรับจัดการข้อมูล Person ครับ
    • หน้าจอดู Owner ครับ (เอามาจาก Blog ตอนก่อน 55)
  • แก้ไขไฟล์  application.properties  สำหรับการเชื่อมต่อฐานข้อมูล persondb ครับ

    • spring.datasource.driverClassName อันนี้ก็ใช้ของ MySQL ครับ
    • spring.jpa.database-platform  ก็เช่นกันครับ กำหนดให้ถูกนะครับ ถ้าลืม อาจจะเจอ Exception แบบนี้

      org.hibernate.HibernateException: Access to DialectResolutionInfo cannot be null when ‘hibernate.dialect’ not set

    • createDatabaseIfNotExist=true  สำหรับ เอาไว้กำหนดว่า ถ้าไม่เจอ Database ก็ให้สร้างใหม่เลยครับ
    • ตอน Run อย่าลืม เปิด Service ของ MySQL ตาม Config ที่กำหนดไว้นะครับ ไม่งั้นจะเจอ Error

      com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

  • อย่าลืมไปเอา  exclude = {DataSourceAutoConfiguration.class}  ออกจาก  @SpringBootApplication  ที่ไฟล์ [ชื่อ Project]Application.java  ด้วยนะครับ เดี๋ยวจะต่อ DB ไม่ได้เอา บางที่ Spring Intializer มัน Generate มาให้ครับ
  • แก้ไข Entity ครับ ให้เหมาะกับ Table ครับ โดยผมเพิ่ม Column Id เข้าไปครับ และใส่ Annotation ของ Hibernate เข้าไป ซึ่งมีทั้งพวก Validate ข้อมูล และระบุ Column ครับ
  • เพิ่มชั้น Repositories เข้ามาครับ โดยตัวนี้จะช่วยให้การติดต่อฐานข้อมูลง่ายขึ้นครับ
    • สร้าง Folder Repositories ครับ
    • สร้างไฟล์  PersonRepository.java  ครับ โดยผมใช้ JPARepository ครับ เนื่องจาก Feature เยอะว่าครับ ถ้าลอง Search หลายๆเว็บจะใช้ CrudRepository ครับ JPARepository  มาจาก CrudRepository, PagingAndSortingRepository, QueryByExampleExecutor และ Repository ครับ
    • มาดูไฟล์  PersonRepository.java  สมบูรณ์ครับ เนื่องจากไม่มี Cusotmize อะไรเลย ยุ่งกับ Table 1 ต่อ 1 ครับ
  • แก้ไข Service  โดยหลักจะเป็นการเตรียม Method สำหรับ List รายการ / เพิ่ม / ลบ / แก้ไข / เรียกดูข้อมูล ครับ แต่ในส่วนของ Service อันนี้ผมจะแยกเป็น Interface กับ Implement ครับ
    • Interface กำหนด Spec ที่ไฟล์  PersonService.java ครับ
    • Implement ใส่การทำงานจริงครับ ที่ไฟล์  PersonServiceImpl.java ครับ
  • แก้ไข Controller โดยต้องเพิ่ม 2 ไฟล์
    • ไฟล์  IndexController.java  เอาไว้จัดการกับทุก Request ที่เข้ามาครับ โดยใช้งานคู่กับ ไฟล์  index.html  ครับ
    • ไฟล์  PersonController.java เอาไว้จัดการกับทุก Request ที่เกี่ยวกับ [basepath]/persons (หน้า List) และ  [basepath]/person  ครับ
  • หลังจากได้ Controller แล้วมาดูหน้าจอ View ครับ (อันนี้สำหรับผมแล้วเสียเวลาไปวันเต็มๆเลย)
    • สำหรับ Default Path ของ Thymeleaf จะถูก Map พวกไฟล์ View และผองเพื่อน (พวก CSS – ผมใช้ Bootstrap 4, /JS/ Image) ไว้ที่  [CLASS PATH]/resources/static/ ครับ โดยมีโครงสร้างคร่าวๆ ดังนี้
    • สำหรับ View มีข้อควรระวังของ Thymeleaf
      • การอ้างอิงไฟล์  CSS ใน Tag  <link>  ให้มีการระบุ Path ผ่าน  th:href="@{/css/bootstrap.min.css}"  ครับ โดยมันจะไปอ้างอิงตาม Default Path ของ Thymeleaf ครับ
      • การอ้างอิงไฟล์ JS ใน Tag  <script>  ให้มีการระบุ Path ผ่าน  th:src="@{/js/bootstrap.min.js}"  ครับ โดยมันจะไปอ้างอิงตาม Default Path ของ Thymeleaf ครับ
      • สำหรับการ Include ไฟล์อื่นเข้าไป อย่างเช่น ผมต้องการ Include ไฟล์  header.html  เข้าไปครับ โดยใช้  <th:block th:include=  ครับ
    • ตัวอย่าง Code ของแต่ละไฟล์ เอาแค่บางส่วนนะครับ เดี๋ยว Blog จะยาวไป
      • ไฟล์  index.html  ครับ
      • ไฟล์ persons.html ครับ แสดงรายการของ Person ทั้งหมดครับ
      • ไฟล์  editPerson.html  ครับ สำหรับ New / Edit Person ครับ

ทดสอบกันครับ

  • เข้าเว็บเล่นกันครับ ผ่าน  http://localhost:8080  ครับ
  • ลองสร้าง Person
  • เข้ามาดูหน้า List Person
  • View รายการ 1 รายการ

Code ที่เสร็จแล้ว

  • Download ไปลองเล่นกันได้ครับ

สำหรับ Blog ตอนแรกคิดว่าใช้เวลาทำ 2 ชั่วโมง แต่ติดปัญหาด้าน UI จนยาวมาวันครึ่งแทนครับ ใน Blog ตอนนี้ ผมคง Focus เรื่องขา Views (UI) เพราะยังได้กลิ่นของ Code ที่ซ้ำอยู่ครับ และยังขาดในส่วนของการ Validate ข้อมูลครับ

[SPRING] ทำความรู้จักกับ Thymeleaf

จาก Blog ตอนที่แล้วที่ได้ทดสอบ สวัสดีชาวโลก บน Spring Framework กันไปแล้วครับ แต่เว็บของเรามันไม่ได้มีหน้าตาอะไรเลย มีแต่ข้อความอย่างเดียวครับ วันนี้ผมจะมาเพิ่มหน้าจอในส่วนของ View นะครับ

สิ่งที่ต้องเตรียม

  • งานจาก Blog ตอนก่อนครับ
  • ถ้าไม่มีสามารถเพิ่ม Dependency ลงในไฟล์  pom.xml ได้ครับ
  • หรือจะใช้ Spring Initializr ก็ได้ครับ

รู้จักกับ Thymeleaf กันก่อนครับ

  • เป็น Template Engine โดยหลักเราเขียน View ด้วย HTML แหละครับ แต่มี Tag บาง Tag ช่วยให้จัดการกับข้อมูลได้ง่ายขึ้นครับ
  • ถ้าลองเปิดไฟล์ของ Thymeleaf โดยไม่ผ่าน Sping มันจะแสดงผลเหมือน HTML ทั่วๆไปครับ

มาทำกันเลย

  • มาดูที่โครงสร้างกันก่อนครับ
  • ตอนนี้เรามายุ่งกับไฟล์ application.properties ครับ เพื่อให้ Spring รู้จักว่า Thymeleaf เราอยู่ที่ไหนครับ
  • จากนั้นสร้างโพลเดอร์
    • controller – เอาไว้จัดการกับ Flow ที่ได้มาจากหน้าจอ และเรียก Service ที่เกี่ยวข้องครับ
    • service – จัดการกับ Busines Logic
    • ต่อ Database – จัดการกับพวกข้อมูล Data Source ทั้งหลายครับ (ตอนนี้ยังไม่ได้ใช้ครับ) มี 2 Pattern ที่เป็นไปได้ครับ DAO / Repository ครับ
    • entity – พวก Data Class จะทำเป็น POJO Class ครับ
  • ตอนนี้มาเพิ่ม Java Class กันครับ
    • สร้าง Person.java ในโพลเดอร์ Entity ครับ
    • สร้าง PersonService.java ในโพลเดอร์ Service ครับ
    • สร้าง PersonController.java ในโพลเดอร์ Controller ครับ
  • ในส่วนของ UI ต้องสร้างให้ล้อกับที่ Method index ใน กำหนดไว้ด้วยครับ  คือ
    • นั้นหมายความว่าต้องสร้าง View ที่ basePath  src/main/resource/templates/  ต่อด้วยค่าที่ค่าที่ Return Method index  person/index.html ในClass  PersonController.java  ครับ
  • มาดู Structure ได้ครับ
  • หลังจากเข้าใจ Path ที่ต้องสร้าง View แล้ว มาสร้าง View ดีกว่า
    • ไฟล์ view   index.html  ใน  templates/person/ ครับ
    • ไฟล์ css  person.css  ใน  static/css/ ครับ
  • มา Run ด้วยคำสั่ง  ./mvnw spring-boot:run  เพื่อดูผลลัพธ์ผ่าน url http://localhost:8080/person/ ครับ
  • สำหรับ Source Code สามารถ Download ได้จากที่นี่ครับ ปล. ชื่อ package อาจจะตั้งแปลกนะ ตอนแรกตั้งใจว่าจะทำไปเลย แต่ไปๆมาๆของฝึกก่อนดีกว่า ^__^

Blog ตอนต่อไป ผมทำ CRUD แล้วครับ โดยมีการเล่นกับส่วนของ Data Source / Database ครับ

 

[SPRING] สวัสดีชาวโลก

หลังจาก Blog ตอนที่แล้ว ผมได้เขียนเกี่ยวกับเขียน Spring โดยใช้ VSCode ครับ ซึ่งจาก Blog ตอนก่อน ยังติดปัญหาอยู่ที่ว่าเว็บทำงานแล้ว แต่ไม่มีการแสดงผลอะไรทั้งนั้นเลย ซึ่งใน Blog ตอนนี้ผมจะมาทำ Hello world ครับ

สิ่งที่ต้องเตรียม

  • งานที่ทำจาก Blog ตอนก่อนหน้าครับ
  • ถ้าไม่ได้เริ่มมาจาก Blog ผม ก็สามารถเพิ่ม Dependency ไปที่ไฟล์  pom.xml  ดังนี้

ลุยยเลยครับ

  • มาดูโครงสร้างของ Project กันก่อนครับ
  • สิ่งที่ผมเพิ่มเข้าไป คือ โพลเดอร์ hello ทั้งใน main และส่วนของ test ครับ
  • เพิ่มไฟล์  HelloController.java  เข้าไปที่ Path  /java/main/com/cu/thesis/WeMuBPMN/hello/  ครับ
  • เริ่ม Code กันเลยครับ โดยผมต้องการว่า ถ้ามี Request เข้ามาที่ url  http://localhost:8080/hello  ให้ระบบแสดงคำว่า

    สวัสดีชาวโลก

  • มาดูที่ Code กันครับ ซึ่งมีสิ่งที่ต้องสนใจ ดังนี้

    • @RestController  เป็นสิ่งที่ทำใหเ Class helloController  เป็น WebService แล้วครับ
    • จากนั้นลองมาดูที่ Method Index ครับ สิ่งที่ผมทำ คือ ถ้ามี Request  /hello  มา ตัว  @RequestMapping  จะดักไว้ครับ เอาง่ายๆ ถ้ามีอะไร /hello เข้ามา Method Index ทำงานครับ
  • มาทดสอบผ่านหน้าเว็บกันครับ
  • บอกไปว่ามันเป็น WebService งั้นลองผ่าน Postman กันดีกว่า
  • และสุดท้าย ถ้าต้องการให้มันดูมีมูลค่า เรามาทำ Unit Test กันครับ
    • สร้างไฟล์  HelloControllerTest.java  ตาม Path /java/main/com/cu/thesis/WeMuBPMN/hello/ เลยครับ
    • จากนั้นเขียน Code ตามนี้เลยครับ โดยใช้ SpingMVCTest สำหรับช่วย Test ครับ

      • @SpringBootTest  เป็นตัวที่บอกว่าเราใช้ Framework การ Test ของ SpringBoot
      • @AutoConfigureMockMvc  เป็นตัวบอกว่า MockMVC ใช้ค่าตั้งต้นครับ ไม่ต้องอ่าน Config จาก xml ที่ไหนอีก และตัวแปร mvc จะถูกยิง MockMVC Class เข้าไป เพราะได้กำหนด  @Autowired  ไว้ครับ
      • @Test  เป็นตัวบอกว่า Method เป็น Test Case อันหนึ่งของเราครับ โดยใช้ตัว MVCMock เข้ามาช่วยในการดีงค่า และทดสอบผลลัพธ์ที่ได้ครับ โดยทำการดึงค่า
        • Status = isOK (Http Response Code 200)
        • Content มีค่าเท่ากับ “สวัสดีชาวโลก” ครับ
    • ลองมารัน Test ครับ สังเกตุดีว่าจะมีเครื่องหมายถูกสีเขียวด้วย
    • ถ้ามือบอนทำ Fail หละ ผลที่ได้จะเป็นไปตามนี้ครับ

Blog ตอนต่อไปจะเป็น สวัสดีชาวโลก แบบที่มี View แล้ว จะได้มีความสวยงาม ^__^

 

 

[SPRING] ใช้ VSCode ในการเขียน Spring Boot กัน

มาลองใช้งาน Spring Boot โดยใช้ VSCode กันครับ สำหรับ Blog นี้ เนื่องจากหลายๆงานในปัจจุบันหันมาใช้ VSCode กันติดแล้ว เพราะมันเร็ว ง่าย และไม่ซับซ้อนครับ โดยวันนี้ผมลองมาฟื้นฟูทักษะ Java ด้วย หายไปกับ .Net Framework กับ Power Shell หลายปีครับ

สิ่งที่ต้องเตรียม

ลุยกันเลย

  • มาที่ VSCode เปิดมาแล้ว ให้ทำการติดตั้ง Java Extension Pack สำหรับ Extension นี้พัฒนาโดย Microsoft ครับ ซึ่ง Extension นี้ช่วยสำหรับ

    • Java Code HintIntegrated Terminal
    • Debugger
    • Test Runner
    • MAVEN Project
  • ลองสร้าง Project เริ่มต้นจากเว็บ Spring Initializr กันก่อนครับ

    • ตัว Tools ตัวช่วยสร้างโครงสร้าง Project ให้เหมาะกับ MAVEN หรือ Grail ผมเลือก MAVEN ไปครับ
    • ภาษาที่ใช้ ผมใช้ Java
    • เลือกเวอร์ชันของ Sping Boot
    • กำหนด Dependency ที่จำเป็น พิมพ์ได้เลยครับ ในที่นี้ผมเลือก Web / JPA (พวกจัดการ DB) ครับ
    • กำหนดชื่อ Package ครับ
    • ** ถ้ายังเห็นว่า Config ไม่เพียงพอ อยากกำหนดเองทั้งหมด สามารถกดที่ Swithch to the full version ได้ครับ
  • มาดูโครงสร้างข้างในกันครับ
  • เนื่องจากผมยังไม่ได้ Config พวก DataSource ที่ Class WeMuBpmnApplication ต้องแก้ไขก่อนครับ ไม่งั้นตอน Run ไปจะเกิด Error

    Failed to auto-configure a DataSource: ….

    • แก้ไขส่วนของ Anotation จาก  @SpringBootApplication  ครับ
    • ไปเป็น  @SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})  ครับ ถ้าเติมแล้วจะเจอขีดแดงๆ มันจะให้ Reference ครับ
    • สังเกตุดีๆครับ VSCode ช่วย Hint แล้วครับ ^__^
    • เสร็จแล้วครับ
  • เข้าที่ VSCode ครับ ลอง Run ครับ ด้วยคำสั่ง  ./mvnw spring-boot:run  โดย Run จาก Integrated Terminal ถ้าไม่เจอ ให้ไปที่เมนู View > Integrated Terminal ครับ
  • ลองเข้า localhost:8080 ดูครับ
  • เจอแล้วอย่าตกใจครับ เพราะ เราเพิ่งเริ่มต้นเอง ยังไม่มีหน้าจอ หรือสั่งให้มัน Map Request อะไรเลย

Blog ตอนต่อไปจะลองพวก HelloWorld แล้วครับ ^__^

[JAVA] Install MAVAN

วันนี้มาเขียน Blog สรุปชั้นตอน การ Install MAVEN ครับ สำหรับ Windows โดยมีชั้นตอน ดังนี้

เตรียมตัว

  • ติดตั้ง Java Development Kit(JDK)
  • ทำการกำหนด  JAVA_HOME  เรียบร้อยแล้ว
  • ซึ่งสามารถทดสอบโดยใช้คำสั่ง  java -version  ซึ่งควรได้ผลลัพธ์
  • Download ตัวติดตั้ง Maven จาก http://maven.apache.org/download.cgi#Installation โดยเลือกไฟล์  apache-maven-X.X.X-bin.zip  ดังรูป

ขั้นตอนการติดตั้ง

  • แตก zip ไฟล์ตัวติดตั้ง MAVEN  จากนั้นนำว่าไปใน Path  C:\Program Files\apache-maven  โดยใช้ Path นี้ไปใช้กับ Enviroment Variable ในขั้นตอนถัดไป
  • กำหนด Enviroment Variable โดยไปคลิกขวาที่ This PC >> Properties >> Advanced System Settings  มาที่ Tab Advance >> Enviroment Variable
  • เพิ่ม System Variable 2 ตัว (ที่เพิ่มทั้ง 2 ตัว เพราะกันไว้ดีกว่าแก้ครับ)
    • M2_HOME  โดยใส่ค่า  C:\Program Files\apache-maven  ดังรูป
    • MAVEN_HOME  โดยใส่ค่า  C:\Program Files\apache-maven  ดังรูป
  • กำหนดตัวแปร  PATH  โดยใส่ค่า  %M2_HOME%\bin ดังรูป

ทดสอบใช้งาน

  • ทดสอบด้วยคำสั่ง  mvn version  โดยมีผลลัพธืที่ได้ดังนี้

 

[JAVA] illegal escape character

หลังจากให้ Tools ตัวนึงปรากฏว่าได้ Code ในลักษณะแบบนี้

ซึ้งพอใช้คำสั่ง maven install แล้วเนี่ย ได้ Error มาเพียบเลยยย

โดย illegal escape character มีสาเหตุเกิดจากการใช้ \ คู่กับ String บางตัว แล้วดันไปเข้ากับคำสั่งพิเศษใน String ของภาษา Java อาทิ เช่น

  • \t = tab
  • \n = newline
  • และตัวอื่นๆ อาทิ เช่น \U, \J, \D, \N, \x

สำหรับหาการแก้ไข – หลืกเลี่ยงสิ ไม่ใช่ \ ไปใช้สัญลักษณ์อื่นแทน ซึ่งมี 2 แบบ ได้แก่

  • โดยใช้ \\ แทน \ เช่น
  • หรือใช้ / แทน \ เช่น

[Java] ติดตั้ง Apache Tomcat / Java Web Server

Reference: http://maxpixel.freegreatpicture.com/Tomcat-Charming-Kitten-Animals-Cat-Fur-Animal-1199937

หลังจากตบตีกับ Java -version สำเร็จไป คราวนี้มาถึงตัว Tomcat บาง ขึ้น Web Server ทั้งทีจะขาดเจ้าแมวน้อยตัวนี้ไปได้อย่างไร โดยขั้นตอนการ Setup บน Windows ง่ายมากครับ โดยมีขั้นตอน ดังนี้

Step 1 : เตรียมตัว

  • ตรวจสอบก่อนเลย ว่าติดตั้ง Java หรือยัง ถ้าไม่มีก็จัดการลงเลยครับ สำหรับสาย Dev แนะนำลงตัว JDK (Java Development Kit) เลยครับ
  • Download ตัว Tomcat จาก มารอเลยครับ โดยตอนนี้ผมขอใช้ Tomcat Version 8 ก่อนนะครับ Version 9 ยัง Beta อยู่ ไม่อยากเสี่ยง โดยเลือกเป็นแบบ .zip ครับ

Step 2 : ตั้งค่าที่จำเป็น

  • หลังจากลง Java เสร็จแล้ว อย่าลืม Set Enviroment Variable ดังนี้

    • JAVA_HOMEC:\Program Files\Java\jdk1.8.0_152
    • JRE_HOMEC:\Program Files\Java\jre1.8.0_152
  • ค่าของ JAVA_HOME และ JRE_HOME ปรับตาม Default Path ที่ได้ลง Java ไว้ในเครื่องนะครับ (ถ้าลงใน Path ที่ไม่เหมือนจากนั้น ก็ปรับให้ถูกต้องด้วย)

Step 3 : ติดตั้ง Tomcat

    • แตกไฟล์ Zip ของ Tomcat ไว้ยัง Path ที่ต้องการ
    • เข้าไปที่ [TOMCAT_FOLDER] >> bin>> Startup.bat
    • ทดสอบ Run ไฟล์ Startup.bat เมื่อเข้าไปที่ url  http://localhost:8080 พบกับหน้าจอต้อนรับ ดังรูป
    • หมายเหตุ: ถ้า Firewall มี Prompt ถามให้ Allow ก็ Allow ให้มันด้วยนะครับ เดี๋ยวจะเข้าเว็บไม่ได้กัน

Step 4 : Hello World

  • ลองเขียน Code JSP ดังนี้
  • จากนั้น Save ไฟล์ ในชื่อ index.jsp
  • นำไฟล์ที่เขียนไป deploy ไว้ที่ webapps โดยเข้าทาง Path [TOMCAT_FOLDER] >> webapps จากนั้นเอาไฟล์ที่เพิ่งสร้างใส่ไว้ในโพลเดอรฺ์ helloworld ดังรูป
  • ทดสอบผลลัพธ์ที่ได้ โดยเข้าผ่าน url http://localhost:8080/helloworld/

Step 5 : ทดสอบจิปาถะอื่นๆ

  • เปลี่ยน Port จาก 8080 ไปเป็น Port อื่นๆ โดยแก้ไขที่ไฟล์ server.xml ซึ่งอยู่ใน Path [TOMCAT_FOLDER] >> conf โดยแก้ไขในส่วน Connector Port จากเดิม 8080 มาเป็น 5555 โดยแก้ไขเสร็จแล้ว อย่าลืม Save ไฟลฺ์ จากนั้น Stop Server และ Start Server ใหม่ด้วย
  • เพิ่ม User & Role เพื่อให้เราเข้าไปจัดการกับ Tomcat ได้ โดยปกติแล้ว ถ้าใน Tomcat มี Default User ขึ้นมา และในภายหลัง Tomcate 7, 8 และ 9 ถูกต้องออกครับ โดยเป็นเหตุผลด้านความปลอดภัย ใส่ Defaul User & Role โดยแก้ไขที่ไฟล์ tomcat-users.xml ซึ่งอยู่ใน Path [TOMCAT_FOLDER] >> conf

    • จากนั้นก็ลอง Login ดูครับ เห็น Helloworld ที่เพิ่งสร้างไปด้วย

      This slideshow requires JavaScript.

 

 

[JAVA] Eclipse exit code 13

บางครั้งวลาเราไปอบรมข้างนอก ลงเครื่องใหม่ หรืออ่า่นๆก็แล้วที่ ที่จำเป็นต้องลง Java ตามที่มีคนให้มา หรือ download มาลงเองแหละ แล้วพอไปจะไปเปิดมัน ดันเจอ Message แบบนี้เข้า

2015-04-21_130135

สำหรับเจ้า Error มีสาเหตุ และวิธีการแก้ไข ดังนี้ครับ

  • สาเหตุ: เกิดจากตัว Eclipse ไม่พบ Java ที่เรา Required ครับ
  • การแก้ไข: มีวิธีการแก้ที่เป็นไปได้ ดังนี้ครับ
    • วิธีแรก: ลง JDK ให้ตรงตามที่ Eclipse ต้องการ อย่างในรูป คือ JDK 1.6 ครับ แล้ว Set ตัวแปร Path ใน Environment ด้วยครับ หลายอาจจะสงสัยว่า Error ไหนมันบอกให้ดูจาก Message ครับ ตัดมาจากภาพด้านบน
      Dosgi.requiredJavaVersion=1.6
    • วิธีที่สอง: Set ค่าใน Eclipse.ini ให้ไปหา JDK ที่เราต้องการครับ กรณีที่เรามีลงไว้หลาย Version เช่น Java 7 กับ 8 ครับ โดยเพิ่มคำสั่ง -vm ที่ล่างสุดของไฟล์ครับ โดยมีรูปแบบคำสั่งเป็น -vm Path ของ javaw.exe ตัวอย่าง เช่น
      -vm C:\Program Files (x86)\Java\jdk1.7.0_75\bin\javaw.exe