How to create RESTful Web service with Netbeans – Create Front Web

หมวดหมู่ Programming

บทนำ (Overview)

จากบทความที่แล้ว (How to create RESTful Web service with Netbeans – FormParam) เราสามารถทดสอบ “RESTful Web Services” โดยใช้โปรแกรม “Burp” มาในบทความนี้เราจะลองเขียน “HTML” เพื่อส่งค่า “Username” และ “Password” ผ่าน “Method” แบบ “Post” ไปยัง “Web Services” ซึ่งก็จะให้ผลเช่นเดียวกัน

ขั้นตอน (Steps)

  1. จากบทความก่อนหน้าสามารถสรุป “Source-code” ของ “RESTful Web Services” ได้ดังนี้ 
    package helloworld;
 
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.FormParam;
 
@Path("Login")
public class LoginResource {
 
    @POST
        public String checkLogin(@FormParam("user") String tmpUser, @FormParam("pass") String tmpPass) {
        return "Username: " + tmpUser + "..." + "Password: " + tmpPass  ;
    }
     
    @GET
    @Path("/Forgot")
    public String forgotPassword() {
        return "E-mail sent already";
    }  
}
  2. ทดลองสร้างหน้า “HTML” โดยไปที่ “File > New Project…”
  3. เลือก “Java Web> Web Application” แล้วคลิก “Next”restservice-netbean18
  4. ตั้งชื่อ “Project Name” แล้วคลิก “Next” restservice-netbean19
  5. เลือก “Server” และคลิก “Next” restservice-netbean20
  6. ส่วน “Frameworks” ยังไม่ต้องเลือกก็ได้ แล้วคลิก “Finish”restservice-netbean22
  7. เราจะได้ไฟล์ “index.html” และให้เราใส่ “Source-code” ดังรูป restservice-netbean23
  8. “Source-code” จากรูป 
    <html>
    <head>
        <title>Test Front Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
<!--ได้มาจาก @Path("Login") ของ Server--> 

<form action="/Server/resources/Login" method="post">
             Username: <input name="user" type="text"> <!-- ได้มาจาก @FormParam("user")-->
             Password:<input name="pass" type="password"> <!-- ได้มาจาก @FormParam("pass")-->
            <input value="Login" type="submit">
        </form>


    </body>
</html>
  9. ให้ทดสอบ “Run” ส่วนของ “Web Services” ขึ้นมาก่อน โดยคลิกขวา “Project” ที่ชื่อ “Server” ที่เราสร้างขึ้นมาแล้วเลือก “Test RESTful Web Services” restservice-netbean27
  10. จากนั้น “Run” ส่วนของ “Front” ที่เราสร้างขึ้นมาใหม่ restservice-netbean24
  11. จะแสดงหน้า “Login” ขึ้นมาให้ลองกรอก “Username” และ “Password” จากนั้นคลิกปุ่ม “Login”restservice-netbean25
  12. พบว่ามีค่า “Return” จาก “RESTful Web Services” แสดงว่าหน้า Front สามารถติดต่อกับ “Web Services” ได้ restservice-netbean26

ใส่ความเห็น