सर्व्हलेट्स आणि जेएसपी वापरून एक साधा वेब अॅप्लिकेशन तयार करणे (भाग 2)

सर्व्हलेट्स आणि JSPs वापरून एक साधा वेब अॅप्लिकेशन तयार करणे (भाग 1) लेख समजून घेण्यासाठी आवश्यक ज्ञान: तुम्ही जावा कोर आधीच शोधून काढला आहे आणि JavaEE तंत्रज्ञान आणि वेब प्रोग्रामिंग पाहू इच्छित आहात. तुमच्यासाठी सध्या जावा कलेक्शन क्वेस्टचा अभ्यास करणे सर्वात फायदेशीर ठरेल, जे लेखाच्या जवळच्या विषयांशी संबंधित आहे.

संस्था निर्माण करणे

संस्थांच्या पॅकेजमध्ये , आम्ही Userदोन खाजगी स्ट्रिंग व्हेरिएबल्स असणारा वर्ग तयार करू : नाव आणि पासवर्ड . कन्स्ट्रक्टर (डीफॉल्ट आणि दोन्ही मूल्ये घेणारे) आणि गेटर्स/सेटर्स तयार करा आणि पद्धती आणि पद्धतींसह toString(), फक्त बाबतीत ओव्हरराइड करा . दुसऱ्या शब्दांत, वर्ग तयार करताना आदरणीय Java विकासक जे काही करतो ते आम्ही करू. 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;
    }
}

आता आम्ही वापरकर्त्यांची यादी तयार करणे सुरू करू शकतो. आम्ही त्यात वापरकर्ते जोडू, आणि वापरकर्ते त्यांना प्रदर्शित करण्यासाठी त्यातून घेऊ. तथापि, आम्हाला एक समस्या आहे. आम्ही आमच्या सर्वलेट वस्तू तयार करत नाही. टॉमकॅट आमच्यासाठी हे करतो. आम्ही त्यात अधिलिखित केलेल्या पद्धती आमच्यासाठी आधीच परिभाषित केल्या आहेत आणि आम्ही पॅरामीटर्स करू शकत नाही. मग आम्ही एक सामायिक यादी कशी तयार करू जी आमच्या दोन्ही सर्व्हलेटमध्ये दृश्यमान असेल? आम्ही प्रत्येक सर्व्हलेटमध्ये फक्त एक सूची ऑब्जेक्ट तयार केल्यास, आम्ही एका सूचीमध्ये वापरकर्ते जोडू, परंतु सूचीसर्व्हलेटमध्ये दुसर्या वापरकर्त्यांना प्रदर्शित करू .. त्यामुळे आपल्याला दोन्ही सर्व्हलेट्सद्वारे सामायिक केलेल्या ऑब्जेक्टची आवश्यकता आहे. सर्वसाधारणपणे, आम्हाला आमच्या प्रोग्राममधील सर्व वर्गांद्वारे सामायिक केलेल्या ऑब्जेक्टची आवश्यकता आहे: संपूर्ण प्रोग्रामसाठी एक ऑब्जेक्ट. मला आशा आहे की तुम्ही डिझाइन नमुन्यांबद्दल काहीतरी ऐकले असेल. काही लोकांसाठी, त्यांच्या प्रोग्राममधील सिंगलटन पॅटर्नची ही पहिली खरी गरज असू शकते. तुम्ही दुहेरी तपासण्या आणि सिंक्रोनायझेशनसह काही गोड सिंगलटन शोधून काढू शकता (होय, आमचा अनुप्रयोग मल्टीथ्रेडेड आहे, कारण टॉमकॅट सर्व्हलेट्स वेगळ्या थ्रेडवर चालतात). पण मी लवकर इनिशिएलायझेशन तंत्र वापरणार आहे, कारण ते इथे आमच्या उद्देशांसाठी पूर्णपणे पुरेसे आहे.

एक मॉडेल तयार करणे

मॉडेल पॅकेजमध्ये वर्ग तयार करा (आणि सिंगलटन पॅटर्न लागू करा) आणि त्याला काहीतरी असामान्य म्हणा. उदाहरणार्थ, मॉडेल . आम्ही आमच्या वर्गातील वापरकर्त्यांची खाजगी सूची तयार करू, आणि दोन पद्धती लागू करू: एक वापरकर्ता जोडण्यासाठी आणि दुसरी स्ट्रिंगची सूची (वापरकर्ता नावे) परत करण्यासाठी. आमच्या वापरकर्ता ऑब्जेक्टमध्ये वापरकर्तानाव आणि पासवर्ड असल्याने आणि आम्ही वापरकर्ता संकेतशब्द प्रकट करू इच्छित नसल्यामुळे, आमच्याकडे फक्त नावांची सूची असेल.

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 तुमचा मित्र आहे! वापरकर्ता जोडण्यासाठी एक फॉर्म तयार करा. add.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 वर परत येऊ . मी तुम्हाला आठवण करून देतो की आमच्या सर्व्हलेटला GET विनंत्या "पकडण्यासाठी" परवानगी देण्यासाठी , आम्ही 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 फायलींमध्ये Java कोड चालवणे

list.jsp पाहण्याची वेळ आली आहे . जेव्हा ListServlet त्यावर नियंत्रण हस्तांतरित करेल तेव्हाच ते कार्यान्वित केले जाईल . याव्यतिरिक्त, आम्ही सर्व्हलेटमधील मॉडेलमधील वापरकर्तानावांची यादी आधीच तयार केली आहे आणि ती येथे विनंती ऑब्जेक्टमध्ये पास केली आहे. आमच्याकडे नावांची यादी असल्याने, आम्ही लूप वापरून त्यावर पुनरावृत्ती करू शकतो forआणि प्रत्येक नाव प्रदर्शित करू शकतो. मी आधी म्हटल्याप्रमाणे, जेएसपी फाइल्स जावा कोड कार्यान्वित करू शकतात (जे त्यांना स्थिर एचटीएमएल पृष्ठांपेक्षा वेगळे करते). काही कोड कार्यान्वित करण्यासाठी, आम्हाला फक्त खालील रचना योग्य ठिकाणी ठेवणे आवश्यक आहे:

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

या रचनामध्ये, आम्ही अनेक व्हेरिएबल्समध्ये प्रवेश मिळवतो:

• विनंती — आमची विनंती ऑब्जेक्ट, जी आम्ही सर्व्हलेटमधून पास केली, जिथे त्याला फक्त req असे म्हणतात ;
• प्रतिसाद - प्रतिसाद ऑब्जेक्ट (ज्याला सर्व्हलेटमध्ये resp म्हणतात);
• out — एक JspWriter ऑब्जेक्ट (ज्याला सामान्य लेखकाचा वारसा मिळतो), ज्याचा वापर आपण थेट HTML पृष्ठावर काहीतरी "लिहण्यासाठी" करू शकतो . out.println("Hello, World!") विधान System.out.println("Hello, World!") सारखेच आहे , परंतु त्यांना गोंधळात टाकू नका!
• out.println() HTML पृष्ठावर "लिहिते" , तर System.out.println सिस्टम आउटपुट प्रवाहावर लिहिते . तुम्ही Java कोडसह JSP विभागात System.out.println ( ) वर कॉल केल्यास, तुम्हाला Tomcat कन्सोलमध्ये परिणाम दिसतील , परंतु पृष्ठावर नाही.

तुम्ही येथे JSP मध्ये उपलब्ध असलेल्या इतर वस्तू शोधू शकता . सर्व्हलेटमधून पास केलेल्या नावांची यादी मिळवण्यासाठी आम्ही रिक्वेस्ट ऑब्जेक्ट वापरू शकतो (आम्ही या ऑब्जेक्टला संबंधित विशेषता जोडली आहे), आणि आम्हाला ही नावे प्रदर्शित करण्यासाठी आउट ऑब्जेक्ट वापरता येईल. चला ते प्रदर्शित करूया (सध्या, एक साधी 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;
• आणि तळाशी, मुख्यपृष्ठावर परत येण्यासाठी बटणासह तळटीप.

हे खूप जास्त 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>

आणि ते झाले. :) आपल्याकडे अद्याप कोणतेही प्रश्न किंवा टिप्पण्या असल्यास, किंवा काहीतरी कार्य करत नसल्यास, कृपया टिप्पणी द्या. आणि हे सर्व कसे घडले याचे काही स्क्रीनशॉट्स मी संलग्न करेन. आणि शेवटी , जर तुम्हाला या प्रकल्पासह सराव करायचा असेल, तर तुम्ही पुढील गोष्टी करून पाहू शकता:

• वापरकर्ता हटवण्यासाठी सर्व्हलेट आणि JSP बनवा आणि विद्यमान वापरकर्ता संपादित करण्यासाठी दुसरी जोडी जोडा. याचा परिणाम सर्व्हलेट्स वापरून तयार केलेला खरा CRUD वेब अनुप्रयोग असेल. ;)
• सूचीला डेटाबेससह बदला, जेणेकरून सर्व्हर रीस्टार्ट झाल्यानंतर जोडलेले वापरकर्ते अदृश्य होणार नाहीत. :)

शुभेच्छा!