servlets மற்றும் JSPகளைப் பயன்படுத்தி எளிய இணைய பயன்பாட்டை உருவாக்குதல் (பகுதி 2)

servlets மற்றும் JSPகளைப் பயன்படுத்தி எளிய வலைப் பயன்பாட்டை உருவாக்குதல் (பகுதி 1) கட்டுரையைப் புரிந்து கொள்ள தேவையான அறிவு: நீங்கள் ஏற்கனவே ஜாவா கோர் பற்றி அதிகமாகவோ அல்லது குறைவாகவோ கண்டுபிடித்துள்ளீர்கள், மேலும் JavaEE தொழில்நுட்பங்கள் மற்றும் வலை நிரலாக்கத்தைப் பார்க்க விரும்புகிறீர்கள். கட்டுரைக்கு நெருக்கமான தலைப்புகளைக் கையாளும் ஜாவா சேகரிப்புத் தேடலை நீங்கள் தற்போது படிப்பது மிகவும் அர்த்தமுள்ளதாக இருக்கும்.

நிறுவனங்களை உருவாக்குதல்

நிறுவனங்களின் தொகுப்பில் , Userஇரண்டு தனிப்பட்ட சரம் மாறிகளைக் கொண்ட ஒரு வகுப்பை உருவாக்குவோம் : பெயர் மற்றும் கடவுச்சொல் . கன்ஸ்ட்ரக்டர்களை (இயல்புநிலை மற்றும் இரண்டு மதிப்புகளையும் எடுக்கும் ஒன்று) மற்றும் பெறுபவர்கள்/செட்டர்களை உருவாக்கவும், மேலும் முறைகள் மற்றும் முறைகளுடன் toString(), ஒரு சந்தர்ப்பத்தில் முறையை மேலெழுதவும் . வேறு வார்த்தைகளில் கூறுவதானால், ஒரு வகுப்பை உருவாக்கும் போது மரியாதைக்குரிய ஜாவா டெவலப்பர் செய்யும் அனைத்தையும் நாங்கள் செய்வோம். equals()hashCode()

public class User {
    private String name;
    private String password;

    public User() {
    }

    public User(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;

        User user = (User) o;

        if (name != null ? !name.equals(user.name) : user.name != null) return false;
        return password != null ? password.equals(user.password) : user.password == null;

    }

    @Override
    public int hashCode() {
        int result = name != null ? name.hashCode() : 0;
        result = 31 * result + (password != null ? password.hashCode() : 0);
        return result;
    }
}

இப்போது நாம் பயனர்களின் பட்டியலை உருவாக்க ஆரம்பிக்கலாம். நாங்கள் அதில் பயனர்களைச் சேர்ப்போம், மேலும் அதிலிருந்து பயனர்களைக் காண்பிப்போம். இருப்பினும், எங்களுக்கு ஒரு பிரச்சனை உள்ளது. நாங்கள் எங்கள் சர்வ்லெட் பொருட்களை உருவாக்கவில்லை. டாம்கேட் எங்களுக்காக இதைச் செய்கிறது. அவற்றில் நாம் மீறும் முறைகள் ஏற்கனவே எங்களுக்காக வரையறுக்கப்பட்டுள்ளன, மேலும் எங்களால் அளவுருக்கள் செய்ய முடியாது. எங்கள் இரண்டு சர்வ்லெட்டுகளிலும் காணக்கூடிய பகிரப்பட்ட பட்டியலை எவ்வாறு உருவாக்குவது? ஒவ்வொரு சர்வ்லெட்டிலும் ஒரு பட்டியல் பொருளை உருவாக்கினால், ஒரு பட்டியலில் பயனர்களைச் சேர்ப்போம், ஆனால் ListServlet இல் மற்றொரு பயனர்களைக் காண்பிப்போம் .. எனவே இரண்டு சர்வ்லெட்டுகளாலும் பகிரப்படும் ஒரு பொருள் நமக்குத் தேவை. பொதுவாக, எங்கள் நிரலில் உள்ள அனைத்து வகுப்புகளாலும் பகிரப்படும் ஒரு பொருள் நமக்குத் தேவை: முழு நிரலுக்கும் ஒரு பொருள். வடிவமைப்பு வடிவங்களைப் பற்றி நீங்கள் கேள்விப்பட்டிருப்பீர்கள் என்று நம்புகிறேன். சிலருக்கு, இது அவர்களின் திட்டத்தில் சிங்கிள்டன் வடிவத்திற்கான முதல் உண்மையான தேவையாக இருக்கலாம். நீங்கள் அசத்தலாம் மற்றும் இரட்டை காசோலைகள் மற்றும் ஒத்திசைவு மூலம் சில இனிமையான சிங்கிள்டனை க்ராங்க் செய்யலாம் . ஆனால் நான் ஆரம்பகால துவக்க நுட்பத்தைப் பயன்படுத்தப் போகிறேன், ஏனென்றால் இது எங்கள் நோக்கங்களுக்கு முற்றிலும் போதுமானது.

ஒரு மாதிரியை உருவாக்குதல்

மாதிரி தொகுப்பில் ஒரு வகுப்பை உருவாக்கவும் (மற்றும் சிங்கிள்டன் வடிவத்தை செயல்படுத்தவும்) மற்றும் அதை அசாதாரணமான ஒன்றை அழைக்கவும். உதாரணமாக, மாதிரி . எங்கள் வகுப்பில் உள்ள பயனர்களின் தனிப்பட்ட பட்டியலை உருவாக்கி, இரண்டு முறைகளைச் செயல்படுத்துவோம்: ஒன்று பயனரைச் சேர்ப்பது, மற்றொன்று சரங்களின் பட்டியலை (பயனர்பெயர்கள்) வழங்குவது. எங்கள் பயனர் பொருள் பயனர்பெயர் மற்றும் கடவுச்சொல்லைக் கொண்டிருப்பதால், பயனர் கடவுச்சொற்களை நாங்கள் வெளியிட விரும்பவில்லை, எங்களிடம் பெயர்களின் பட்டியல் மட்டுமே இருக்கும்.

public class Model {
    private static Model instance = new Model();

    private List<User> model;

    public static Model getInstance() {
        return instance;
    }

    private Model() {
        model = new ArrayList<>();
    }

    public void add(User user) {
        model.add(user);
    }

    public List<String> list() {
        return model.stream()
                .map(User::getName)
                .collect(Collectors.toList());
    }
}

MVC பற்றி கொஞ்சம்

நீங்கள் ஏற்கனவே சிங்கிள்டன் பற்றி கேள்விப்பட்டிருப்பதால் , மற்றொரு வடிவமைப்பு மாதிரி-பார்வை-கட்டுப்படுத்தி (MVC) பற்றி நீங்கள் கேள்விப்பட்டிருக்கலாம் . வணிக தர்க்கத்தை பார்வையில் இருந்து பிரிப்பதே இதன் நோக்கம். அதாவது, பொருட்களை எப்படிக் காட்டுவது என்பதைத் தீர்மானிக்கும் குறியீட்டிலிருந்து என்ன செய்ய வேண்டும் என்பதைத் தீர்மானிக்கும் குறியீட்டைப் பிரிப்பது. தரவு எவ்வாறு வழங்கப்படுகிறது என்பதற்கு காட்சி பொறுப்பாகும் . எங்கள் விஷயத்தில், பார்வைகள் எங்கள் JSP பக்கங்கள் . அதனால்தான் நான் அவற்றை காட்சிகள் என்ற கோப்புறையில் வைத்தேன் . மாதிரி என்பது நிரல் உண்மையில் வேலை செய்யும் தரவு. எங்கள் விஷயத்தில், இது பயனர்கள் (பயனர்களின் பட்டியல்). மற்றும் கட்டுப்படுத்திகள் அவற்றுக்கிடையேயான இணைப்பு. அவர்கள் மாதிரியிலிருந்து தரவை எடுத்து காட்சிகளுக்கு அனுப்புகிறார்கள் (அல்லது டாம்கேட்டிலிருந்து சில தரவைப் பெறுங்கள், அதைச் செயலாக்கி, மாதிரிக்கு அனுப்பவும்). அவற்றில் உங்கள் வணிக தர்க்கத்தை (நிரல் என்ன செய்ய வேண்டும்) என்பதை நீங்கள் வரையறுக்கிறீர்கள், மாதிரி அல்லது பார்வையில் அல்ல. இவ்வாறு, ஒவ்வொரு பகுதியும் அதன் சொந்த வியாபாரத்தை கையாளுகிறது:

• மாதிரி தரவுகளை சேமிக்கிறது;
• பார்வைகள் தரவின் அழகான பிரதிநிதித்துவங்களை வழங்குகின்றன;
• கட்டுப்படுத்திகள் தரவு செயலாக்கத்தைக் கையாளுகின்றன.

ஒரு வகுப்பில் உள்ள அனைத்து குறியீடுகளின் கொடூரமான குவியலாக இல்லாமல், நிரல் மிகவும் எளிமையானதாகவும் பராமரிக்கக்கூடியதாகவும் இருக்க இது அனுமதிக்கிறது. MVC ஆனது வலை நிரலாக்கத்திற்கு மட்டும் பொருத்தமானது அல்ல, ஆனால் இது இந்த பகுதியில் குறிப்பாக அடிக்கடி பயன்படுத்தப்படுகிறது (கிட்டத்தட்ட எப்போதும்). எங்கள் விஷயத்தில், சர்வ்லெட்டுகள் கட்டுப்படுத்திகளாக செயல்படும். இது மாதிரியின் மிக மேலோட்டமான மற்றும் சுருக்கமான விளக்கமாகும், ஆனால் MVC இந்த கட்டுரையின் முக்கிய தலைப்பு அல்ல. யாராவது மேலும் அறிய விரும்பினால், Google உங்கள் நண்பர்! பயனரைச் சேர்ப்பதற்கான படிவத்தை உருவாக்கவும். சேர்க்க படிவத்தைச் சேர்க்கவும் .jsp . இது இரண்டு உரை உள்ளீட்டு புலங்களைக் கொண்டிருக்க வேண்டும் (ஒன்று சாதாரணமானது, மற்றொன்று - கடவுச்சொல் புலம்) மற்றும் தரவை சேவையகத்திற்கு அனுப்புவதற்கான பொத்தான்.

<form method="post">
    <label>Name:
        <input type="text" name="name"><br />
    </label>

    <label>Password:
        <input type="password" name="pass"><br />
    </label>
    <button type="submit">Submit</button>
</form>

இங்கே படிவம் மதிப்பு இடுகையுடன் ஒரு முறை பண்புக்கூறைக் கொண்டுள்ளது . இந்த படிவத்தில் உள்ள தரவு POST கோரிக்கையாக சேவையகத்திற்கு செல்லும் என்பதை இது குறிக்கிறது . செயல் பண்புக்கூறு குறிப்பிடப்படவில்லை, அதாவது (/add ) இலிருந்து இந்தப் பக்கத்திற்கு வந்த அதே முகவரிக்கே கோரிக்கை அனுப்பப்படும் . எனவே, ஒரு GET கோரிக்கையைப் பெற்றவுடன் , இந்த முகவரிக்குக் கட்டுப்பட்ட எங்கள் சர்வ்லெட், ஆட்-யூசர் படிவத்துடன் JSPயை வழங்குகிறது. அது ஒரு POST கோரிக்கையைப் பெற்றால் , படிவம் அதன் தரவை இங்கு அனுப்பியது எங்களுக்குத் தெரியும் (இது கோரிக்கை பொருளில் இருந்து பிரித்தெடுக்கப்படும்doPost()முறை, செயலாக்கம் மற்றும் சேமிப்பதற்கான மாதிரிக்கு அனுப்புதல்). உள்ளீட்டு புலங்களில் பெயர் (பயனர் பெயர்கள் அல்லது கடவுச்சொற்களுக்கான பாஸ் ) எனப்படும் அளவுரு உள்ளது என்பது குறிப்பிடத்தக்கது . இது ஒரு மிக முக்கியமான புள்ளி. எனவே, கோரிக்கையிலிருந்து (சர்வ்லெட்டின் உள்ளே) இந்தத் தரவைப் (உள்ளிடப்படும் பயனர்பெயர் மற்றும் கடவுச்சொல்) பெற, இந்தப் பெயர் மற்றும் பாஸ் புலங்களைப் பயன்படுத்துவோம். ஆனால் பின்னர் அதைப் பற்றி மேலும். தரவை அனுப்புவதற்கான எனது பொத்தான் மீண்டும் ஒரு பொத்தானாக உருவாக்கப்பட்டது , வழக்கப்படி வெளியீட்டு புலமாக அல்ல. இந்த அணுகுமுறை எவ்வளவு பரவலாக ஏற்றுக்கொள்ளப்பட்டது என்று எனக்குத் தெரியவில்லை, ஆனால் இது எனக்கு வேலை செய்கிறது (Chrome உலாவி).

POST கோரிக்கைகளை சர்வ்லெட் கையாளுதல்

AddServlet க்கு திரும்புவோம் . கோரிக்கைகளைப் பெற எங்கள் சர்வ்லெட்டை அனுமதிக்க , நாங்கள் HttpServletdoGet() வகுப்பில் உள்ள முறையை மீறிவிட்டோம் என்பதை நினைவூட்டுகிறேன் . POST கோரிக்கைகளைப் பிடிக்க எங்கள் சர்வ்லெட்டைக் கற்பிக்க , நாங்கள் முறையை மீற வேண்டும் . Tomcat நாங்கள் வேலை செய்யும் அதே கோரிக்கை மற்றும் பதில் பொருள்களை அனுப்புகிறது. தொடங்க, கோரிக்கையின் பெயரைப் பிரித்தெடுத்து, படிவத்தால் அனுப்பப்பட்ட அளவுருக்களை அனுப்பவும் (நீங்கள் படிவத்தில் வெவ்வேறு பெயர்களைக் குறிப்பிட்டிருந்தால், அந்த பெயர்களைப் பயன்படுத்தவும்). அதன் பிறகு, பெறப்பட்ட தரவைப் பயன்படுத்தி ஒரு பயனர் பொருளை உருவாக்கவும். பின்னர் நாம் மாதிரி பொருளைப் பெற்று, உருவாக்கப்பட்ட பயனரை மாதிரியில் சேர்க்கிறோம். doPost()

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    String password = req.getParameter("pass");
    User user = new User(name, password);
    Model model = Model.getInstance();
    model.add(user);
}

பார்வைக்கு தரவை அனுப்புகிறது

ListServlet க்கு செல்லலாம் . முறை doGet()ஏற்கனவே செயல்படுத்தப்பட்டுள்ளது. இது வெறுமனே கட்டுப்பாட்டை பார்வைக்கு மாற்றுகிறது ( list.jsp ). உங்களிடம் இது இன்னும் இல்லையென்றால், AddServlet இல் உள்ள முறையுடன் ஒப்பிட்டு உருவாக்கவும் . இப்போது மாதிரியிலிருந்து பயனர்பெயர்களின் பட்டியலைப் பெற்று அவற்றை பார்வைக்கு அனுப்புவது நன்றாக இருக்கும், அது அவற்றைப் பெற்று அழகாகக் காண்பிக்கும். இதைச் செய்ய, Tomcat இலிருந்து பெற்ற கோரிக்கைப் பொருளை மீண்டும் பயன்படுத்துவோம் . இந்தப் பொருளுக்கு ஒருவிதமான பெயரைக் கொடுத்து ஒரு பண்புக்கூறு சேர்க்கலாம். உண்மையில், நாம் அனுப்ப விரும்பும் பொருளை பார்வைக்கு சேர்க்கலாம். சர்வ்லெட்டிலிருந்து பார்வைக்கு கட்டுப்பாட்டை மாற்றும் போது, ​​சர்வ்லெட் பெற்ற அதே கோரிக்கை மற்றும் மறுமொழி பொருள்களைப் பார்க்கிறோம் என்ற உண்மையின் காரணமாக, கோரிக்கைப் பொருளில் எங்கள் பெயர்களின் பட்டியலைச் சேர்த்து, கோரிக்கையிலிருந்து பயனர்பெயர்களின் பட்டியலைப் பெறலாம். பார்வையில் உள்ள பொருள். நாங்கள் ListServlet வகுப்பை முடித்துவிட்டோம் , எனவே முழு வகுப்பின் குறியீட்டையும் இங்கே வழங்குகிறேன்:

package app.servlets;

import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class ListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Model model = Model.getInstance();
        List<String> names = model.list();
        req.setAttribute("userNames", names);

        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp");
        requestDispatcher.forward(req, resp);
    }
}

JSP கோப்புகளில் ஜாவா குறியீட்டை இயக்குகிறது

list.jsp ஐப் பார்க்க வேண்டிய நேரம் இது . ListServlet கட்டுப்பாட்டை அதற்கு மாற்றும் போது மட்டுமே இது செயல்படுத்தப்படும் . கூடுதலாக, சர்வ்லெட்டில் உள்ள மாதிரியிலிருந்து பயனர்பெயர்களின் பட்டியலை நாங்கள் ஏற்கனவே தயார் செய்து, கோரிக்கைப் பொருளில் அனுப்பியுள்ளோம். எங்களிடம் பெயர்களின் பட்டியல் இருப்பதால், ஒரு forலூப்பைப் பயன்படுத்தி அதை மீண்டும் மீண்டும் செய்து ஒவ்வொரு பெயரையும் காட்டலாம். நான் முன்பு கூறியது போல், JSP கோப்புகள் ஜாவா குறியீட்டை இயக்க முடியும் (இது நிலையான HTML பக்கங்களிலிருந்து வேறுபடுகிறது). சில குறியீட்டை இயக்க, நாம் செய்ய வேண்டியது பின்வரும் கட்டமைப்பை பொருத்தமான இடத்தில் வைக்க வேண்டும்:

<!-- html code -->
<%
    // Java code
%>
<!-- html code -->

இந்த கட்டமைப்பிற்குள், பல மாறிகளுக்கான அணுகலைப் பெறுகிறோம்:

• கோரிக்கை - எங்கள் கோரிக்கை பொருள், நாங்கள் சர்வ்லெட்டிலிருந்து கடந்து சென்றோம், அங்கு அது வெறுமனே req என்று அழைக்கப்படுகிறது ;
• பதில் - பதில் பொருள் ( சர்வ்லெட்டில் ரெஸ்ப் என்று அழைக்கப்படுகிறது);
• வெளியே — ஒரு JspWriter பொருள் (இது ஒரு சாதாரண எழுத்தாளரைப் பெறுகிறது ), இதை நாம் நேரடியாக HTML பக்கத்திலேயே "எழுத" பயன்படுத்தலாம் . out.println("Hello, World!") என்ற அறிக்கை System.out.println("Hello, World!") உடன் மிகவும் ஒத்திருக்கிறது , ஆனால் அவற்றைக் குழப்ப வேண்டாம்!
• out.println() ஒரு HTML பக்கத்திற்கு "எழுதுகிறது" , அதே நேரத்தில் System.out.println கணினி வெளியீட்டு ஸ்ட்ரீமில் எழுதுகிறது . Java குறியீட்டைக் கொண்ட JSP பிரிவில் System.out.println() ஐ அழைத்தால் , டாம்கேட் கன்சோலில் முடிவுகளைப் பார்ப்பீர்கள் , ஆனால் பக்கத்தில் இல்லை.

JSP க்குள் கிடைக்கும் பிற பொருட்களை நீங்கள் இங்கே தேடலாம் . servlet இலிருந்து அனுப்பப்பட்ட பெயர்களின் பட்டியலைப் பெற கோரிக்கைப் பொருளைப் பயன்படுத்தலாம் (இந்தப் பொருளுடன் தொடர்புடைய பண்புக்கூறை நாங்கள் இணைத்துள்ளோம்), மேலும் இந்தப் பெயர்களைக் காண்பிக்க அவுட் பொருளைப் பயன்படுத்துவோம் . அவற்றைக் காண்பிப்போம் (தற்போதைக்கு, எளிய HTML பட்டியலாக):

<ul>
    <%
        List<String> names = (List<String>) request.getAttribute("userNames");

        if (names != null && !names.isEmpty()) {
            for (String s : names) {
                out.println("<li>" + s + "</li>");
            }
        }
    %>
</ul>

பயனர்கள் இருந்தால் மட்டுமே பட்டியலைக் காட்ட வேண்டும், இல்லையெனில் இன்னும் பயனர்கள் இல்லை என்ற எச்சரிக்கையைக் காட்ட வேண்டும் என்றால், இந்த பகுதியை சிறிது மீண்டும் எழுதலாம்:

<%
    List<String> names = (List<String>) request.getAttribute("userNames");

    if (names != null && !names.isEmpty()) {
        out.println("<ui>");
        for (String s : names) {
            out.println("<li>" + s + "</li>");
        }
        out.println("</ui>");
    } else out.println("<p>There are no users yet!</p>");
%>

சர்வ்லெட்டுகளில் இருந்து பார்வைகளுக்கு தரவை எவ்வாறு அனுப்புவது என்பது இப்போது எங்களுக்குத் தெரியும், நாங்கள் எங்கள் AddServlet ஐ மேம்படுத்தலாம், இதன் மூலம் பயனரை வெற்றிகரமாகச் சேர்ப்பது பற்றிய அறிவிப்பைக் காண்பிக்கும். இதைச் செய்ய, இந்த முறையில் doPost(), மாதிரியில் ஒரு புதிய பயனரைச் சேர்த்த பிறகு, இந்த பயனர்பெயரை req ஆப்ஜெக்ட்டின் பண்புக்கூறுகளில் சேர்க்கலாம் மற்றும் கட்டுப்பாட்டை மீண்டும் பார்வைக்கு அனுப்பலாம் ( add.jsp ) . இப்போது நாம் அதில் ஜாவா குறியீட்டைக் கொண்ட ஒரு பகுதியைச் சேர்ப்போம், கோரிக்கையில் அத்தகைய பண்பு உள்ளதா என்பதைச் சரிபார்ப்போம், அது இருந்தால் - பயனர் வெற்றிகரமாக சேர்க்கப்பட்ட செய்தியைக் காண்பிப்போம். இந்த மாற்றங்களுக்குப் பிறகு, AddServlet இன் முழு குறியீடும் இப்படி இருக்கும்:

package app.servlets;

import app.entities.User;
import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
        requestDispatcher.forward(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String password = req.getParameter("pass");
        User user = new User(name, password);
        Model model = Model.getInstance();
        model.add(user);

        req.setAttribute("userName", name);
        doGet(req, resp);
    }
}

இங்கே, முறையின் முடிவில், doPost()மாதிரியில் சேர்க்கப்பட்ட பயனரின் பெயருடன் ஒரு பண்புக்கூறை உருவாக்குகிறோம், பின்னர் doGet()தற்போதைய கோரிக்கை மற்றும் பதிலை அனுப்பும் முறையை அழைக்கிறோம். இந்த doGet()முறை இப்போது கட்டுப்பாட்டை பார்வைக்கு மாற்றுகிறது, இது ஒரு பண்புக்கூறாக இணைக்கப்பட்ட சேர்க்கப்பட்ட பயனரின் பெயருடன் கோரிக்கை பொருளையும் பெறுகிறது. நாம் செய்ய வேண்டியது add.jsp ஐ சரிசெய்வதுதான் , அப்படியான பண்புக்கூறு எதுவும் இல்லை என்றால் அது அறிவிப்பைக் காண்பிக்கும். add.jsp இன் இறுதிப் பதிப்பு இதோ :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<p>User '" + request.getAttribute("userName") + "' added!</p>");
                }
            %>
            <div>
                <div>
                    <h2>Add user</h2>
                </div>

                <form method="post">
                    <label>Name:
                        <input type="text" name="name"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass"><br />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

பக்கத்தின் உள்ளடக்கம் பின்வருவனவற்றைக் கொண்டுள்ளது:

• ஒரு தலைப்புடன் ஒரு div;
• உள்ளடக்கத்திற்கான ஒரு div கண்டெய்னர், இதில் பயனர்பெயருடன் ஒரு பண்பு உள்ளதா என்பதை சரிபார்ப்பதும் அடங்கும்;
• கூடுதல் பயனர் படிவத்துடன் ஒரு div;
• மற்றும் கீழே, முகப்புப் பக்கத்திற்குத் திரும்புவதற்கான பொத்தானுடன் அடிக்குறிப்பு.

இது பல பிரிவுகளாகத் தோன்றலாம், ஆனால் பாணிகளைச் சேர்க்கும்போது அவற்றைப் பயன்படுத்துவோம். list.jsp இன் இறுதிப் பதிப்பு இதோ :

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <div>
                <div>
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ui>");
                        for (String s : names) {
                            out.println("<li>" + s + "</li>");
                        }
                        out.println("</ui>");
                    } else out.println("<p>There are no users yet!</p>");
                %>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

எனவே, எங்களிடம் முழுமையாகச் செயல்படும் இணையப் பயன்பாடு உள்ளது, அது பயனர்களைச் சேமித்து சேர்க்கும், மேலும் அவர்களின் பெயர்களின் பட்டியலைக் காண்பிக்கும். இப்போது நாம் அதை அழகாக செய்ய வேண்டும்... :)

பாணிகளைச் சேர்த்தல். W3.CSS கட்டமைப்பைப் பயன்படுத்துவோம்

இந்த நேரத்தில், எங்கள் பயன்பாடு செயல்படுகிறது, ஆனால் அது முற்றிலும் மூர்க்கத்தனமாக தெரிகிறது. எனவே, பின்னணியைச் சேர்ப்போம், உரை மற்றும் பொத்தான்களை வண்ணமாக்குவோம், பட்டியல்களுக்கு நடையைச் சேர்ப்போம், உறுப்புகளைச் சீரமைப்போம், உள்தள்ளல்களைச் சேர்ப்போம், மற்றும் பல. கைமுறையாக எழுதும் பாணிகள் நிறைய நேரம் எடுக்கும் மற்றும் நம் நரம்புகளுக்கு வரி விதிக்கலாம். எனவே நான் W3.CSS கட்டமைப்பை பயன்படுத்தி முன்மொழிகிறேன் . இது ஏற்கனவே பாணிகளுடன் பயன்படுத்த தயாராக உள்ள வகுப்புகளைக் கொண்டுள்ளது. நாம் பயன்படுத்த விரும்பும் CSS வகுப்புகளை சரியான இடங்களில் ஏற்பாடு செய்ய வேண்டும். அவற்றை எங்கள் பக்கங்களில் சேர்க்க, முதலில் ஸ்டைல் ​​கோப்பை இணைக்கிறோம். இதைச் செய்ய இரண்டு வழிகள் உள்ளன:

1. எங்கள் பக்கங்களைச் சென்று, தலைப் பிரிவில் உள்ள நடை கோப்பிற்கு பின்வரும் நேரடி இணைப்பைச் செருகவும்

   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

   நிரந்தர இணைய இணைப்பு இருந்தால் இந்த விருப்பம் பொருத்தமானது. உள்ளூர் சேவையகத்தில் உங்கள் பக்கங்களைத் திறக்கும் போது, ​​இணையத்திலிருந்து ஸ்டைல்கள் இழுக்கப்படும்.

2. ஆனால் நீங்கள் அனைத்து ஸ்டைல்களையும் உள்நாட்டில் வைத்திருக்க விரும்பினால் மற்றும் இணைய இணைப்பைச் சார்ந்திருக்காமல் இருக்க விரும்பினால், ஸ்டைல் ​​கோப்பைப் பதிவிறக்கி, வலை கோப்புறையில் எங்காவது வைக்கவும் (எ.கா. web/styles/w3.css ). பின்னர் எங்கள் எல்லா பக்கங்களையும் ( index.html, add.jsp, list.jsp ) சென்று , தலைப் பிரிவில் உள்ள நடை கோப்பில் பின்வரும் இணைப்பைச் சேர்க்கவும் :

   <link rel="stylesheet" href="styles/w3.css">

   அதன் பிறகு, குறிச்சொற்கள் வழியாகச் சென்று நீங்கள் விரும்பும் பாணிகளைச் சேர்க்கவும். நான் இதைப் பற்றி விரிவாகப் பேச மாட்டேன். அதற்குப் பதிலாக, ராஸ்டர்-பாணி வகுப்புகளுடன் எனது மூன்று கோப்புகளின் பயன்பாட்டிற்குத் தயாராக இருக்கும் பதிப்புகளை வழங்குவேன்.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Super app!</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center">
            <div class="w3-bar w3-padding-large w3-padding-24">
                <button class="w3-btn w3-hover-light-blue w3-round-large" onclick="location.href='/list'">List users</button>
                <button class="w3-btn w3-hover-green w3-round-large" onclick="location.href='/add'">Add user</button>
            </div>
        </div>
    </body>
</html>

add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-padding">
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<div class=\"w3-panel w3-green w3-display-container w3-card-4 w3-round\">\n" +
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-green w3-border w3-border-green w3-hover-border-grey\">×</span>\n" +
                            "   <h5>User '" + request.getAttribute("userName") + "' added!</h5>\n" +
                            "</div>");
                }
            %>
            <div class="w3-card-4">
                <div class="w3-container w3-center w3-green">
                    <h2>Add user</h2>
                </div>
                <form method="post" class="w3-selection w3-light-grey w3-padding">
                    <label>Name:
                        <input type="text" name="name" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <button type="submit" class="w3-btn w3-green w3-round-large w3-margin-bottom">Submit</button>
                </form>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

list.jsp

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users list</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center w3-margin-bottom w3-padding">
            <div class="w3-card-4">
                <div class="w3-container w3-light-blue">
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ul class=\"w3-ul\">");
                        for (String s : names) {
                            out.println("<li class=\"w3-hover-sand\">" + s + "</li>");
                        }
                        out.println("</ul>");

                    } else out.println("<div class=\"w3-panel w3-red w3-display-container w3-card-4 w3-round\">\n"
+
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-red w3-border w3-border-red w3-hover-border-grey\">×</span>\n" +
                            "   <h5>There are no users yet!</h5>\n" +
                            "</div>");
                %>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

அவ்வளவுதான். :) உங்களிடம் இன்னும் ஏதேனும் கேள்விகள் அல்லது கருத்துகள் இருந்தால், அல்லது ஏதாவது வேலை செய்யவில்லை என்றால், தயவுசெய்து கருத்துத் தெரிவிக்கவும். அது எப்படி முடிந்தது என்பதற்கான ஓரிரு ஸ்கிரீன் ஷாட்களை இணைக்கிறேன். இறுதியாக , இந்த திட்டத்துடன் நீங்கள் பயிற்சி செய்ய விரும்பினால், பின்வருவனவற்றை நீங்கள் முயற்சி செய்யலாம்:

• ஒரு பயனரை நீக்க ஒரு servlet மற்றும் JSP ஐ உருவாக்கவும், ஏற்கனவே இருக்கும் பயனரைத் திருத்த மற்றொரு ஜோடியைச் சேர்க்கவும். இதன் விளைவாக, சர்வ்லெட்டுகளைப் பயன்படுத்தி உருவாக்கப்பட்ட உண்மையான CRUD வலைப் பயன்பாடு இருக்கும். ;)
• பட்டியலை ஒரு தரவுத்தளத்துடன் மாற்றவும், இதனால் சேவையகம் மறுதொடக்கம் செய்யப்பட்ட பிறகு சேர்க்கப்பட்ட பயனர்கள் மறைந்துவிட மாட்டார்கள். :)

நல்ல அதிர்ஷ்டம்!