servlets اور JSPs کا استعمال کرتے ہوئے ایک سادہ ویب ایپلیکیشن بنانا (حصہ 2)

servlets اور JSPs کا استعمال کرتے ہوئے ایک سادہ ویب ایپلیکیشن بنانا (حصہ 1) مضمون کو سمجھنے کے لیے ضروری علم: آپ نے پہلے ہی کم و بیش جاوا کور کا پتہ لگا لیا ہے اور آپ JavaEE ٹیکنالوجیز اور ویب پروگرامنگ کو دیکھنا چاہیں گے۔ آپ کے لیے فی الحال جاوا کلیکشن کی تلاش کا مطالعہ کرنا سب سے زیادہ معنی خیز ہوگا، جو مضمون کے قریب کے موضوعات سے متعلق ہے۔

ہستیوں کی تخلیق

entities پیکیج میں ، ہم ایک Userکلاس بنائیں گے جس میں دو پرائیویٹ سٹرنگ متغیرات ہوں گے: name اور password ۔ کنسٹرکٹرز (پہلے سے طے شدہ اور ایک جو دونوں قدروں کو لیتا ہے) اور حاصل کرنے والے/سیٹرز بنائیں، اور طریقہ کو اور طریقوں 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 میں دوسرے سے صارفین کو ڈسپلے کریں گے ۔ لہذا ہمیں ایک ایسی چیز کی ضرورت ہے جو دونوں سرولیٹ کے ذریعہ مشترکہ ہو۔ عام طور پر، ہمیں ایک ایسی چیز کی ضرورت ہے جو ہمارے پروگرام میں تمام کلاسوں کے ذریعہ شیئر کی گئی ہو: پورے پروگرام کے لیے ایک آبجیکٹ۔ مجھے امید ہے کہ آپ نے ڈیزائن کے نمونوں کے بارے میں کچھ سنا ہوگا۔ کچھ لوگوں کے لیے، یہ ان کے پروگرام میں سنگلٹن پیٹرن کی پہلی حقیقی ضرورت ہو سکتی ہے ۔ آپ wacko جا سکتے ہیں اور ڈبل چیک اور مطابقت پذیری کے ساتھ کچھ میٹھے سنگلٹن کو کرینک کر سکتے ہیں (جی ہاں، ہماری ایپلیکیشن ملٹی تھریڈڈ ہے، کیونکہ ٹامکیٹ سرولیٹ الگ الگ تھریڈز پر چلتے ہیں)۔ لیکن میں ابتدائی ابتدائی تکنیک کا استعمال کرنے جا رہا ہوں، کیونکہ یہ ہمارے یہاں کے مقاصد کے لیے مکمل طور پر کافی ہے۔

ایک ماڈل بنانا

ماڈل پیکیج میں ایک کلاس بنائیں (اور سنگلٹن پیٹرن کو لاگو کریں) اور اسے کچھ غیر معمولی کہیں۔ مثال کے طور پر، ماڈل ۔ ہم اپنی کلاس میں صارفین کی ایک نجی فہرست بنائیں گے، اور دو طریقے نافذ کریں گے: ایک صارف کو شامل کرنے کے لیے، اور دوسرا تاروں کی فہرست (صارف ناموں) کو واپس کرنے کے لیے۔ چونکہ ہمارا صارف آبجیکٹ صارف نام اور پاس ورڈ پر مشتمل ہے، اور ہم صارف کے پاس ورڈ ظاہر نہیں کرنا چاہتے، اس لیے ہمارے پاس صرف ناموں کی فہرست ہوگی۔

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 صفحات ہیں ۔ یہی وجہ ہے کہ میں نے انہیں ایک فولڈر میں رکھا جس کا نام ہے views ۔ ماڈل وہ ڈیٹا ہے جس کے ساتھ پروگرام دراصل کام کرتا ہے۔ ہمارے معاملے میں، یہ صارفین (صارفین کی فہرست) ہے۔ اور کنٹرولرز ان کے درمیان کڑی ہیں۔ وہ ماڈل سے ڈیٹا لیتے ہیں اور اسے آراء میں منتقل کرتے ہیں (یا Tomcat سے کچھ ڈیٹا حاصل کرتے ہیں ، اس پر کارروائی کرتے ہیں، اور اسے ماڈل میں منتقل کرتے ہیں)۔ آپ ان میں اپنی کاروباری منطق (پروگرام کو کیا کرنا چاہئے) کی وضاحت کرتے ہیں، ماڈل یا منظر میں نہیں۔ اس طرح، ہر حصہ اپنے کاروبار کو سنبھالتا ہے:

• ماڈل ڈیٹا ذخیرہ کرتا ہے؛
• نظارے ڈیٹا کی خوبصورت نمائندگی کرتے ہیں۔
• کنٹرولرز ڈیٹا پروسیسنگ کو سنبھالتے ہیں۔

اس سے پروگرام کو ایک کلاس میں تمام کوڈوں کے خوفناک ڈھیر کے بجائے کافی آسان اور برقرار رکھنے کے قابل بناتا ہے۔ MVC نہ صرف ویب پروگرامنگ کے لیے موزوں ہے، بلکہ یہ خاص طور پر اکثر اس علاقے میں استعمال ہوتا ہے (تقریباً ہمیشہ)۔ ہمارے معاملے میں، سرولیٹس کنٹرولرز کے طور پر کام کریں گے۔ یہ پیٹرن کی ایک انتہائی سطحی اور مختصر تفصیل ہے، لیکن MVC اس مضمون کا مرکزی موضوع نہیں ہے۔ اگر کوئی مزید جاننا چاہتا ہے تو گوگل آپ کا دوست ہے! صارف کو شامل کرنے کے لیے ایک فارم بنائیں۔ 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()

POST درخواستوں کی سرولیٹ ہینڈلنگ

آئیے AddServlet پر واپس آتے ہیں ۔ میں آپ کو یاد دلاتا ہوں کہ ہمارے سرولیٹ کو GET درخواستوں کو "کیچ" کرنے کی اجازت دینے کے لیے ، ہم نے HttpServlet کلاس doGet()میں طریقہ کو ختم کر دیا ہے۔ اپنے سرولیٹ کو 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لوپ کا استعمال کرکے اعادہ کر سکتے ہیں اور ہر نام کو ظاہر کر سکتے ہیں۔ جیسا کہ میں نے پہلے کہا، جے ایس پی فائلیں جاوا کوڈ پر عمل کر سکتی ہیں (جو انہیں جامد HTML صفحات سے مختلف بناتی ہے)۔ کچھ کوڈ پر عمل کرنے کے لئے، ہمیں صرف مندرجہ ذیل تعمیر کو مناسب جگہ پر رکھنا ہے:

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

اس تعمیر کے اندر، ہم کئی متغیرات تک رسائی حاصل کرتے ہیں:

• درخواست - ہماری درخواست آبجیکٹ، جسے ہم نے سرولیٹ سے پاس کیا، جہاں اسے صرف req کہا جاتا تھا ۔
• رسپانس - رسپانس آبجیکٹ (جسے سرولیٹ میں ریسپ کہا جاتا ہے)؛
• out — ایک JspWriter آبجیکٹ (جو ایک عام Writer کو وراثت میں ملتا ہے )، جسے ہم براہ راست 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؛
• اور نیچے، ہوم پیج پر واپس جانے کے لیے بٹن کے ساتھ ایک فوٹر۔

یہ بہت زیادہ divs کی طرح لگ سکتا ہے، لیکن ہم انہیں بعد میں استعمال کریں گے جب ہم اسٹائلز شامل کریں گے۔ یہاں 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 فریم ورک کا استعمال کرنے کی تجویز کرتا ہوں۔ اس میں پہلے سے ہی اسٹائل کے ساتھ استعمال کے لیے تیار کلاسز موجود ہیں۔ ہمیں صرف سی ایس ایس کی کلاسز کو ترتیب دینے کی ضرورت ہے جنہیں ہم صحیح جگہوں پر استعمال کرنا چاہتے ہیں۔ انہیں اپنے صفحات میں شامل کرنے کے لیے، ہم پہلے اسٹائل فائل کو جوڑتے ہیں۔ ایسا کرنے کے دو طریقے ہیں:

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 ویب ایپلیکیشن ہوگا جو سرولیٹس کا استعمال کرتے ہوئے بنایا گیا ہے۔ ;)
• فہرست کو ڈیٹا بیس سے تبدیل کریں، تاکہ سرور کے دوبارہ شروع ہونے کے بعد شامل کردہ صارفین غائب نہ ہوں۔ :)

اچھی قسمت!