java web development 4 කොටස - simple java web project

J Sparrow

Well-known member
  • Jan 8, 2012
    1,603
    698
    113
    127.0.0.1
    ඔන්න අපි අපේ 4 වෙනි lesson එක පටන් ගන්නවා.

    මම මුලින්ම බොලාට කියලා දෙන්න යන්නේ basic.
    මොකද, මහ ලොකු framework දන්නව අරක දන්නවා, මේක දන්නවා කියන dial වලට, frameworks මොනවත් නැතුව simpleම simple java web project එකක් කරලා පෙන්නන්න කිව්වාට කරගන්න බෑ. :no:
    මම interview වලදී අනන්තවත් දැකලා තියෙනවා එහෙම පොරවල්.
    ඉතිං විලි ලැජ්ජාවේ සන්තෝසේ බෑ එහෙම වෙලාවට. :rofl:

    අහ්! කලින් 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 එකක් පටන් ගන්න ඕනේ.

    OoLKS4U.png


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

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

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

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

    fyLpohk.png


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

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

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

    VJmXZ1K.png


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

    අනිත් හුයන්නවල් ගැන දැන්ම හිතන්න එපා, ඒවට අත නොතිය Finish ඔබාපියව්.

    AtTGNYY.png


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

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


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

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

    rzHSacs.png


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

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


    t313oB0.png


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

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


    **මේක හැම පාරම කරන්න ඕනේ නෑ බොලව්!

    Window --> Show view --> Other..

    WfLSUM8.png


    ඔය තියෙන්නේ!

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

    r1CWP0o.png


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

    මේ....

    pnEJ8Ot.png


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

    (මම ලොකු scene දානවා නෙමෙයි කොල්ලනේ! :no: උඹලට තවම IDE එක හුරු නැති හින්දයි මෙච්චර කට්ට කාගෙන දාන්නේ!)

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

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

    BqgjJXa.png


    ඔව් බොලව් ඒක තමයි!

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

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

    rkqXzkc.png


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

    4iFXIGz.png


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

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

    1w4sq5n.png


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

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

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

    OqAw3xX.png


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

    QDK7TRf.png


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

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

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

    tZCR8eG.png


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

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

    package com.hello;

    import javax.servlet.http.HttpServlet;

    public class ServletDemo{

    }

    ඔය තියෙන්නේ දැනට අපේ class එක පේන විදිය.

    මම code එකෙන් code එක explain කරන්නේ නෑ ...
    .
    .
    .
    .
    නෙමෙයි කරනවා බොලව්! මම තොපිට servlet පොවනවා යකුනේ! :growl:

    අපි දැන් මේකට 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 එක!

    cfZSF9g.png


    බෑ! තොපිට codes copy කරන්න බෑ! තොපි මෙව්වා copy, paste කරන හින්දා තමයි images විදියට දැම්මේ! :P:rofl::rofl:

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

    IA5fPT9.png


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

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

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

    5EIUbmu.png



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

    5 - Deployment descriptor එක හදමු!


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


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

    kNXhiHC.png


    ඔව් ඔව් බොලව් ඔය තියෙන්නේ?

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

    qQ6ah6A.png


    හරි!
    දැං ඕකට web.xml කියලා නම දීපල්ලා! වෙන වෙන හුයන්නවල් දෙන්නනම් එපා හුකෑස් තමයි ඕං!


    eXkqtfQ.png


    Okay! now click on finish button බොලව්!

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


    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <servlet>
    <servlet-name>hello</servlet-name>
    <servlet-class>com.hello.ServletDemo</servlet-class>
    </servlet>

    <servlet-mapping>
    <servlet-name>hello</servlet-name>
    <url-pattern>/hello</url-pattern>
    </servlet-mapping>
    </web-app>


    8csoe5I.png


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

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

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

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

    1JegcAk.png


    6 - Project එක deploy කරමු!

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

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

    EAH7QqQ.png


    එන screen එකේ බොලාට අපේ project එක පේන්න ඕනේ! ඔව් ඔව් ඔය තියෙන්නේ!

    38hSmMy.png


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

    c29UP2v.png


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


    GCxinfA.png


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

    දැන් ඔය server ඉලව්ව start කරපියව්!

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

    GBAaYsH.png


    7 - Test in the browser

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

    vqlsWew.png


    ඔය 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 ඔබා ගන්නේ කියන එක.
    මේක pure classic java Servlet එකක්! :cool:
    නිකන් code copy paste කරන එක නෙමෙයි වැදගත්, අවබෝධයෙන් ඉගෙන ගන්න එකයි වැදගත්! :nerd:

    මේකට උඹලගේ කැපවීම අනිවාර්යයි! මට පුලුවන් බොලාට මඟ පෙන්නන්න විතරයි! :yes:

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

     

    J Sparrow

    Well-known member
  • Jan 8, 2012
    1,603
    698
    113
    127.0.0.1
    godak mahansi wela thread danawa neda uba...:):):):)

    good luck brother....
    11.gif


    digatama karapan...... matath thiyenawa podi podi problem tika.....​

    Ela machan. thank you.
    You must spread some Reputation around before giving it to J Sparrow again.


    Good job lokka, mata puluwan unoth welawak thibboth meka umba jsp walin karana wede jsf walin karanna help ekak dennam


    adow sirawata uba me karana wade nm pattayi ban

    appreciate your effort bro :cool::cool:
    bump


    Elaaazz! Thanks machanla! umbala hamoma mata sup eka denawa! :):):) and yes! Sharing is caring! :yes:
     

    kolavari

    Well-known member
  • Aug 11, 2012
    33,746
    1
    25,655
    113
    කැළෑ පොජ්ජේ
    thanks a lot macho :) uba sahenna mahansi wela karala thiyenawa..rep deela madi machan :D :D keep it up!! +5

    edit: You must spread some Reputation around before giving it to J Sparrow again.
     
    Last edited: