Home / JAVA / JAVA - Develop Web Application - සරලව සිංහලෙන් - 04
post_banner_java_web_application_ep_04_in_sinhala

JAVA - Develop Web Application - සරලව සිංහලෙන් - 04

ඔන්න අපි අපේ 4 වෙනි lesson එක පටන් ගන්නවා.

මම මුලින්ම ඔයාලට කියලා දෙන්න යන්නේ basic.

අහ්! කලින් lessons දැක්කේ නැති කට්ටිය ඒවා go-through කරලාම එන්න

java web development පළමු කොටස
java web development දෙවෙනි කොටස – Application server එක configure කරමු.
java web development 3 කොටස – IDE එක configure කරමු

මේ simpleම simple java web project එක කරන්න ඔයාලට IDE එක නැතුව උනත් පුළුවන්.
ඒත් අපි මේක STS එක use කරලාම කරමු.

1 – මුලින්ම අපි අලුත්ම අලුත් project එකක් පටන් ගන්න ඕනේ.

View post on imgur.com

ඔය උඩ, වම් පැත්තේ තියෙන Package explorer කියන panel එක මැද right click කරන්න.
හරි ! දැං, New–>Other

ඔය මම කොළ පාටින් box කරලා තියෙනවා වගේ Dynamic Web Project කියලා option එකක් තියෙනවානම් ඒක click කලත් හරි! එක පාරින්ම වැඩේ ගොඩ.
ඒත් IDE එක අළුත්පිට හින්දා සහ ඔයාලා දෙයියනේ කියල ඒ වගේ project එකක් start කරන පළවෙනි පාර හින්දා එහෙම option එකක් පේන්නේ නැතිවෙන්න බොහෝ දුරට ඉඩ කඩ තියෙනවා.

එහෙම නැත්තන්, ctrl + n (ඔයාලාට මම හරි පාරවලුයි, හොර පාරවලුයි ඔක්කෝම පෙන්නගෙන යන්නේ)

එහෙමත් නැත්තන් File–> New –> Other ගියත් හරි!

View post on imgur.com

ඔය wizard එකේ පහලට scroll කරන් ගියාම , Web කියලා Option එකක් හම්බෙනවා.
අන්න expand ඒක කලාම පෙනෙයි ඔයාලාට Dynamic Web Project කියලා sub option එකක්. අන්න ඒක select කරලා next click කරන්න.

එහෙම නැත්තන් ඔය උඩ මම කොළ පාටින් box කරලා තියෙන text box එකේ web කියලා type කරලා එන options වලිනුත් select කරන්න පුළුවන්.

හරි! දැන් කලානේ?

View post on imgur.com

දැන්, Project name කියන තැනට තමන්ට කැමති name එකක් දෙන්න ඔයාලාට නිදහස තියෙනවා.
ඊට පහළින් තියෙන Project location කියන තැන, Use default location කියන tick එක වැටිලා නැත්තන් ඒ tick එක දාන්න.

අනිත් ඒවා ගැන දැන්ම හිතන්න එපා, ඒවට අත නොතිය Finish click කරන්න.

View post on imgur.com

ඔහොම එකක් එයි! tick එක දාලා Yes දුන්නාම හරි!

එක එක project වර්ගයට අදාලව තමන්ට ඕනේ විදියට, IDE එක customize (perspective change) කරගන්න පුළුවන්.
මෙයා මේ කරලා දෙන්න හදන්නේ.., අපි හදන්නේ java web project එකක් හින්දා ඒකට ගැළපෙන විදියට IDE එකේ tool kit හදලා දෙන එක.

ඒක Yes කලානම් ඔයාලාට, IDE එකේ එකේ පොඩි වෙනසක් පේන්න ඕනේ! අනම් මනම් අයින් වෙලා IDE එක ටිකක් clean වෙලා පෙනේවි.

කොහොම පෙනුනත් අව්ලක් නෑ! ඔයාලා ඔක්කෝටම එකම විදියට නොපෙනෙන්නත් පුළුවන්!
මගේ IDE perspective ඔයාලාට වඩා ටිකක් වෙනස් වෙන්න පුළුවං. මගේ IDE එකේ තියෙන ඒවා ඔයාලාගේ IDE එකේ පෙන්නන්නේ නෑ කියල නිකන් කලබල වෙන්න එපා.

View post on imgur.com

ඔය තියෙන්නේ අපේ අළුත් Dynamic Web Project එක.

ඔන්න අපි දැං පළවෙනි step එක සාර්ථකව ඉවර කලා!

View post on imgur.com

අපේ project එක full expand කලාම පේන්නේ ඔය වගේ තමයි!
දැන් හාස් හූස් ගාන්න එපා මේ මොනවද මේ කියලා! තඹ සතේකට ගණන් ගන්න එපා! අපි මෙයාව අපිට ඕනේ විදියට හදලා ගමු!

අපි දැං මෙයාව අපිට ආං බාං කරන්න පුළුවන් simple view එකකට ගමු!

මේක හැම පාරම කරන්න ඕනේ නෑ!

Window –> Show view –> Other..

View post on imgur.com

ඔය තියෙන්නේ!

දැං එන wizard එකේ java option එක expand කරලා, Package Explorer කියන sub option එක select කරන්න!
හා! දැං OK click කරන්න.

View post on imgur.com

දැන් ඕක කොහෙන් හරි මතු වෙයි! මගේනම් දකුණු පැත්තෙන් මතු උනා. දැන් අපිට තියෙන්නේ එච්චර දරුණු නැති project view එකක්!

මේ….

View post on imgur.com

ඔය අනම් මනං view ඔයාලාට ඕනේ විදියට එහෙට මෙහෙට කරලා හදා ගන්න පුළුවං.
මම මීට පස්සේ අර view එක ගන්න, මේ view එක ගන්න කිව්වාම දැං ඔයාලා දන්නවනේ ගන්න ඕනේ විදිය?

2 – අපි දැන් package එකක් හදමු

මේ දැන් කරන ඒවා කරන්නේ අර උඩම තියෙන “src” folder එක ඇතුලේ හොඳේ?

View post on imgur.com

ඔව්! ඒක තමයි!

හරි! දැන් ඒක උඩ right click කරා –> New –> Package

එහෙම option එකක් පේන්නේ නැත්තං ඉතින් ආයෙත් සුපුරුදු ලෙස New Wizard එකට යන්න! (src folder එක උඩ right click කලා –> New –> Other..)

View post on imgur.com

දැං, උඩ search textbox එකේ package කියලා type කරලා, එන option වලින් package කියන option එක select කරලා Next select කරන්න!

View post on imgur.com

රායිට්! ඊළඟට, package එකට නමක් දෙන්න ඕනේ.. ඒක ඔයාලාගේ කැමැත්ත! මම දෙන්නේ com.hello කියලා.
නම දීලා Finish කරන්න!

ඔන්න ඒකත් හරි
මේ….

View post on imgur.com

මම ආයෙත් switch වෙනවා Project Explorer කියන view එකට! ඒක අපිට ලේසියි මීට වඩා!

3 – Servlet class එකක් හදමු!

දැං අපි හදපු package එක උඩ right click කලා –> New –> Class

View post on imgur.com

දැක්කනේ කරන විදිය?

View post on imgur.com

දැං මම ඒකට නමක් දෙනවා ServletDemo කියලා! Name එක දුන්නට පස්සේ Finish කරන්න.

Package කියන තැන පේනවා ඇති ඔයාලාට අපේ package එකේ name එක appear වෙනවා.

ඒකත් හරි!
මේ..?

View post on imgur.com

ඔයාලා දැන් බයවෙන්න එපා මගේ Folder structure එක පේන්නේ අමුතු විදියකටනේ කියලා. මතකයිනේ මම switch උනා Project Explorer view එකට? වැඩි ලේසියට? ඔය පැත්තකින් පේන්නේ අපි කලින් හිටිය Package explorer view එක.
ඕනේ නම් ඒකටයි මේකටයි දෙකටම switch වෙවී ඉන්න පුළුවන් අදාල වෙන වෙලාවට!

4 – අපි Servlet class එක code කරමු!

package com.hello;

import javax.servlet.http.HttpServlet;

public class ServletDemo{

}

අපි දැන් මේකට HttpServlet කියන class එක extend කරගන්නවා.
class එකක් extend කලාම වෙන්නේ මොනවාද කියලා ඔයාලාට අමුතුවෙන් කියන්න ඕනේ නෑනේ?

මේ HttpServlet කියන class එකේ තියෙනවා අපිට ඕනේ වෙන methods ටිකක්.
අන්න ඒ ටික අපේ ServletDemo class එකටත් apply කරගන්න ඕනේ හින්දයි මේක extend කරන්නේ.

මේ තියෙන්නේ ගොඩාක්ම වැදගත් වෙන methods දෙකක්!

1 – protected void doGet(HttpServletRequest req, HttpServletResponse res)
2 – protected void doPost(HttpServletRequest req, HttpServletResponse res)

අනිත් ඒවත් වැදගත්! ඒත් ඔයාලා දැනට මේ දෙක දැන ගත්තාම ඇති.

ඕනේ අය මෙතනින් බලාගන්න!!
http://www.javatpoint.com/HttpServlet-class

හරි ඔය තියෙන්නේ අපි HttpServlet කියන class එක extend කරගත්තට පස්සේ අපේ ServletDemo class එක!

View post on imgur.com

බෑ! ඔයාලාට codes copy කරන්න බෑ! ඔයාලා මෙව්වා copy, paste කරන හින්දා තමයි images විදියට දැම්මේ! 😛

හරි! අපි දැන් අර කලින් කිව්ව methods දෙකෙන් එකක් අපේ ServletDemo class එකේ implement කරන්න යන්නේ .
මුලින්ම doGet method එක implement කරමු!

View post on imgur.com

Highlight කරලා තියෙන්නේ අළුතෙන් use කරපු imports ටික.

ඕවා අතින් hard-code කරන්න ඕනේ නෑ! Automatically generate කරන්න පුළුවං!
මම ඔය method එකත් automatically generate කළේ! ඔයාලා පොඩි search පාරක් දාල ඒ ක්‍රම හොයා ගන්නවානම් හොඳයි!

හරි! දැන් ඔය පේන්න තියෙන ටික code කරගන්න!

View post on imgur.com

Simply, PrintWriter එක අපි මෙතන use කරලා තියෙන්නේ response එකක් යවන්න.

5 – Deployment descriptor එක හදමු!

මේක ගොඩාක් important file එකක් අපේ project එකේ! කොටින්ම කිව්වොත් මෙයා තමයි describe කරන්නේ, කොහොමද අපේ project එක deploy වෙන්න ඕනේ කියලා.
මේ file එක නැතුව අපිට මේ වැඩේ කරන්න ටිකක් අමාරුයි!
මේකෙන් කරන්න පුළුවං වැඩ ගොඩායි! ඉස්සරහට බලමු අපි!

අපේ project එකේ folder structure එකේ තියෙනවා WebContent කියලා folder එකක්. අන්න ඒක ඇතුලේ තියෙනවා WEB-INF කියලා තව folder එකක්!

View post on imgur.com

ඔව් ඔව්!! ඔය තියෙන්නේ?

දැං WEB-INF එක උඩ right click කලා –> New –> File

View post on imgur.com

හරි!
දැං ඕකට web.xml කියලා නම දෙන්න!
වෙන වෙන names දෙන්නනම් එපා!

View post on imgur.com

Okay! now click on finish button!

දැං ඔය පහල තියෙන ටික copy කරලා දාන්න ! ඕවා type කරන්න ගියොත් එපා වෙයි!


hello
com.hello.ServletDemo
hello
/hello

View post on imgur.com

එක define කරලා තියෙන එකට කැමති value එකක් දෙන්න පුළුවන්.
මතක තියාගන්න ඕනේ ඒ දීපු servlet-name එකම තමයි එකේ එකටත් දෙන්න ඕනේ!
එතකොට තමයි Deployment descriptor එක දැන ගන්නේ, මේ එක map වෙන්න ඕනේ මොන එකටද කියලා.

එකේ එකටත් කැමති name එකක් දෙන්න පුළුවන්.
ඒක තමයි අපි browser එකේ ගහලා අපේ servlet එක (ServletDemo class එක) access කරන්නේ.

(තෙරුනාද මන්දා )

හරි ! දැන් අමාරුම ටික කරගෙන ඉවරයි!
දැන් තියෙන්නේ අපේ project එක tomcat ඇතුලට deploy කරන එක!
මේ තියෙන්නේ final folder structure එක.

View post on imgur.com

6 – Project එක deploy කරමු!

දැන් Server panel view එක ගන්න!
ඒක පේන්න නැත්තන් , කලින් කලා වගේ Window –> Show view –> Other.. ගිහිල්ලා Server කියලා type කරලා OK කරන්න.

හරි! ඊට පස්සේ tomcat උඩ right click කරලා, Add and remove option එක select කරන්න.

View post on imgur.com

එන screen එකේ ඔයාලට අපේ project එක පේන්න ඕනේ!

ඔව් ඔව් ඔය තියෙන්නේ!

View post on imgur.com

දැන් project එක select කරලා, Add button එක click කරන්න!

View post on imgur.com

ඔන්න add උනා කියලා පෙන්නනවා! දැන් finish button එක click කරන්න!

View post on imgur.com

අපේ project එක server එකට උනා!
Console එකත් පේන්න නැත්තන්, ඒකත් අර view වලට ගිහිල්ලා හොයා ගනිව්!

දැන් ඔය server එක start කරන්න!

විවිධාකරවූ දේවල් ගොඩාක් ගිහිල්ලා අන්තිමට server එක start උනා කියන message එක console එක through පෙනෙයි!
හරියට බැලුවොතින් ඔය තියෙන ඒවා කියවලා ගොඩක් දේවල් හොයාගන්න පුළුවන්!

View post on imgur.com

7 – Test in the browser

http://localhost:8080/HelloWorld/hello කියලා browser එකේ ගහපුවාම අපිට මේ විදියට output එකක් එන්න ඕනේ!

View post on imgur.com

ඔය url එකේ http://localhost:8080/ වලට පස්සේ මුලින්ම තියෙන්නේ අපේ project එකේ නම, ඊට පස්සේ තියෙන්නේ අපි අර Deployment descriptor එකේ අපේ Servlet එක map කරලා දුන්න url-pattern එක. මතකයිනේ?

හරි!

දැන් ඔයාලා ServletDemo class එකේ, (ඒ කියන්නේ Servlet එකේ) content එක වෙනස් කර කර බලන්න!
මතක තියා ගන්න Servlet එකේ මොන change එකක් කලත්, tomcatව restart කරන්න ඕනේ! නැත්තන් කරපු changes apply වෙන්නේ නෑ!

ඔන්න අපි, ලොකු පිම්මක් පැන්නා!
දැන් ඔයාලා basics දන්නවා! මේකේ JSP pages නැති එක ගැන worry වෙන්න එපා! ඊළඟ lesson එක තමයි අපි කොහොමද මේක අස්සට JSP pages insert කරගන්නේ කියන එක.
මේක pure classic java Servlet එකක්!
නිකන් code copy paste කරන එක නෙමෙයි වැදගත්, අවබෝධයෙන් ඉගෙන ගන්න එකයි වැදගත්!

එහෙනම් හැමෝටම ජය!

About Hasun Rathnayake

Hasun Rathnayake
A java engineer from Colombo, Sri Lanka who loves coding. Join with the c2k community to share your knowledge. Like and share...

Leave a Reply