إعداد و تحميل البيانات في ال (jTable ) بإستخدام السيرفلت (Servlets ) و ال (JSP)

Setup and Load Data in jTable using Servlets and JSP

إعداد و تحميل البيانات في ال (jTable ) بإستخدام السيرفلت (Servlets ) و ال (JSP)

يعتبر هذا الدرس من افضل الدروس فائدة كونه تطبيق عملي لنموذج ال (MVC) الذي قمنا بطرحه في سابق هذه الدروس (ستجد الدرس في هذا الرابط ( https://sunwaytech.blogspot.com/2018/06/mvc.html) ، ستكون هناك سلسلة من هذه الدروس ، كل درس يوضح فكرة معينة أتمنى ان تستفيدوا منها فقط تابعوا الدروس في المدونة ، الإضافة (jTable) تحقق لك الكثير من المزايا منها ان تعلمها يعتبر مكسب كبير و الشيء الآخر انها تقلل الجهد و الوقت في بناء الشاشات و النماذج المختلفة في النظام .

هذه المقالات عن ال jTable jQuery قد أدرجت ضمن المدونة (https://sunwaytech.blogspot.com/) .
يعتبر هذا الدرس الثاني بعد درس
مقدمة عن الإضافة (jQuery jTable Plugin) في تطبيقات الويب للجافا ستجدونه على الرابط التالي من هنا

jQuery jTable plugin in Java Web Applications - An Introduction (مقدمة عن الإضافة الدرس الأول)

Setup and Load Data in jTable using Servlets and JSP ) (المقالة التي تقرأها الآن

AJAX based CRUD Operations in Java Web Applications using jTable jQuery plugin (ستأتي ضمن الدروس لاحقاً)

Understanding User Interface Options (فهم خيارات الشاشة)

jTable Pagination in Java Web Applications (عمل صفحات في ال jTable)

Official jTable Documentation (التوثيق)

jTable Localization (الترجمة)

هذه المقالة جزء من سلسلة المقالات التي كتبت حول كيفية تَضمين الAJAX بإعتماد عمليات ال(CRUD) وميزات رائعة أخرى في ال jTable plugin في( Java Applications) و (باستخدام Servlets و JSP's و نموذج بسيط لل MVC). في هذا المنشور ، سأشرح كيفية إعداد مكتبات jTable والمكتبات التابعة في Java

أولاً :- اولاً و قبل كل شيء قم بتنزيل جميع المكتبات المطلوبة للإعداد وهي :-

jQuery

jQuery UI

jTable

Google Gson - Json Library

OpenCsv

ال (OpenCsv) (إختيارية – و انا استخدمتها هنا للتعامل مع الملف (csv file) كمصدر بيانات بدلاً عن قاعدة البيانات لجعل المسألة سهلة ) في الدروس القادمة سوف نستخدم قاعدة البيانات (mysql)

تقدم لك jTable عدة (theme) رائعة ويمكنك اختيار واحد منها ليناسب موقعك او ذوقك . يستخدم jTable مربع حوار ( jQuery UI ) الذي ينبثق عندما ينقر المستخدم على زر الإضافة (إضافة سجل جديد) او (Add New Record)

أو تحديث أزرار التسجيل. إذا اخترت استخدام أيٍّ من الثيمات الموجودة في مجلد (metro) التي كتبها jTable ، يمكنك استخدام jQuery UI لتخصيصها وفقًا من الجدول ومن ثم تنزيله. على سبيل المثال ، سأستخدم الثيم "Crimpson" metro او (blue) ، ولذلك قمت بتحرير وتنزيل الثيم "Blitzer" jquery UI.

ثيم (Crimpson)

2- الآن قم بإضافة الملفات اللازمة التي قمت بتحميلها كما هو موضح في هيكل المشروع أدناه ،

هنا توضيح لهيكل المجلد (WebContent) و ما تحته

هنا هيكل المشروع بالكامل

3 - إلى هنا انتهينا مع الإعداد. للبدء دعونا نحاول عرض جدول فارغ بدون بيانات. قم بإنشاء صفحة jsp ضمن مجلد WebContent وأضف التعليمة البرمجية أدناه إليه. (index.jsp) إذا كنت تستخدم الماي اكليبس سوف تتكون صفحة ال (jsp) بشكل تلقائي بمجرد إنشاء المشروع

(index.jsp)

<html>

<head>

<title>Setup and Load Data to jTable using Servlets and JSP</title>

$(document).ready(function () {

//initialize jTable

$('#PersonTableContainer').jtable({

title: 'Table of people',

actions: {

listAction: 'CRUDController?action=list',

createAction:'CRUDController?action=create',

updateAction: 'CRUDController?action=update',

deleteAction: 'CRUDController?action=delete'

fields: {

customerid: {

key: true,

list: false

customername: {

title: 'Customer Name',

width: '30%'

email: {

title: 'Email',

width: '30%'

phone: {

title: 'Phone',

width: '20%',

create: false,

edit: false

city: {

title: 'City',

width: '20%',

}

});

</script>

</head>

<body>

<h1>Setup and Load Data in jTable using Servlet and JSP</h1>

<h4>Demo by Priya Darshini, Tutorial at www.programming-free.com</h4>

</div>

</body>

</html>

عند تشغيل صفحة ال JSP ، سترى الآن جدولًا فارغًا مثل الجدول الموضح أدناه ، بما أننا لم نكتب الكود الخاص بجانب السيرفر(الخادم) لجلب البيانات حتى الآن. لاحظ ال الشفرة أعلاه لم نكتب أي ترميز خاص بال html وكل ما لدينا فقط هو div يعمل كعنصر نائب لجدول يتم إنشاؤه بواسطة المكون الإضافي jTable ، تم تخصيص خيارًا يسمى "actions " للميثود "jtable" ، لتقديم عناوين url للإجراءات السيرفر مثل إنشاء وحذف وتحديث وعرض . خيار اخر لتمييز أسماء الحقول التي تمثل الأعمدة في مصدر البيانات.

4- فلننتقل بعد ذلك إلى كتابة الكود لإحضار البيانات من ملف (customer.csv) حيث يتكون نموذج (customer.csv) الذي أستخدمه هنا من عشرات السجلات لهيكل ال (csv)، لذا سنقوم بإنشاء موديل كلاس (Customer.java) في الباكج المسمى (com.programmingfree.model) يقابل هذا الهيكل بنفس تقسيمات الحقول و أنواع البيانات ، والتي سيكون لديها (getters) و ال (setters) للحقول أعلاه ليتم تحضيرها من مصدر البيانات ،

Customer.java

package com.programmingfree.model;

public class Customers {

public Customers(String customerid,String customername,String email,String phone,String city){

this.customerid=customerid;

this.customername=customername;

this.email=email;

this.phone=phone;

this.city=city;

}

private String customerid;

private String customername;

private String email;

private String phone;

private String city;

public void setCustomerid(String customerid) {

this.customerid = customerid;

}

public String getCustomerid() {

return customerid;

}

public void setCustomername(String customername) {

this.customername = customername;

}

public String getCustomername() {

return customername;

}

public void setEmail(String email) {

this.email = email;

}

public String getEmail() {

return email;

}

public void setPhone(String phone) {

this.phone = phone;

}

public String getPhone() {

return phone;

}

public void setCity(String city) {

this.city = city;

}

public String getCity() {

return city;

}

5- لاحظ أنني استخدمت هنا مكتبة جافا سكريبت (OpenCsv) ، والتي تبسط مهمة قراءة المحتوى من المصدر (csv File). لقد وضعت المصدر (customer.csv) في المشروع في المجلد / src. يحتوي الكلاس CsvReader على مُنشئ (constructor) يأخذ الملف و المحددات (الحقول) كمدخل وإرجاع مصفوفة نصية.

6- الآن دعونا ننشئ Servlet يعمل بمثابة وحدة تحكم (Controller) ويرسل طلب من العرض (view) إلى الكلاس (Dao) ومن ثم يرسل الرد (sends back response) مرة أخرى إلى العرض (view).وهو ما نسميه بالأكشن أيضاً.

CRUDController.java

package com.programmingfree.controller;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import com.google.gson.JsonArray;

import com.google.gson.JsonElement;

import com.google.gson.reflect.TypeToken;

import com.programmingfree.dao.DataManipulation;

import com.programmingfree.model.Customers;

@WebServlet("/CRUDController")

public class CRUDController extends HttpServlet {

private static final long serialVersionUID = 1L;

public CRUDController() {

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

if(request.getParameter("action")!=null){

String action=(String)request.getParameter("action");

if(action.equals("list")){

try{

List<Customers> lstCustomer=new ArrayList<Customers>();

//Fetch Data from CSV file

lstCustomer=DataManipulation.getAllCustomers();

//Convert Java Object to Json

Gson gson = new Gson();

JsonElement element = gson.toJsonTree(lstCustomer, new TypeToken<List<Customers>>() {}.getType());

JsonArray jsonArray = element.getAsJsonArray();

String listData=jsonArray.toString();

//Return Json in the format required by jTable plugin

listData="{\"Result\":\"OK\",\"Records\":"+listData+"}";

response.setContentType("application/json");

response.setHeader("Cache-control", "no-cache, no-store");

response.setHeader("Pragma", "no-cache");

response.setHeader("Expires", "-1");

response.getWriter().print(listData);

System.out.println(listData);

}catch(Exception ex){

String error="{\"Result\":\"ERROR\",\"Message\":"+ex.getStackTrace()+"}";

response.getWriter().print(error);

System.out.println(error);

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request,response);

}

في ال servlet ، نقوم بملء قائمة من نوع الموديل (Model) الذي تم انشاؤه سابقاً "العملاء" (Customers) باستخدام الميثود (getAllCustomers () ) الثابتة التي قمنا بتخصيصها مسبقًا في ( DataManipulation)

ثم نقوم بتحويل هذه القائمة (كائن جافا) إلى تنسيق ( Json ) ترميز كائن جافا اسكربت Javascript object Notation) )باستخدام مكتبة (Google json. ) لاحظ أن jTable يقبل البيانات فقط في صيغة Json ,

جميع الإجراءات التي يستخدمها jTable يجب ان تُعاد بشكل (json) كما في النموذج التالي ،

{

"Result":"OK",

"Records":[

{"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/"},

{"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"},

{"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"},

{"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"}

]

}

يمكن أن تكون نتيجة الخاصية "OK" أو "ERROR" فإذا كانت "OK" ، يجب أن تكون الخاصية Records عبارة عن مصفوفة من السجلات التي تم احضارها من المصدر . أما إذا كان "ERROR" ، فستظهر رسالة توضح سبب الخطأ للمستخدم .

7 - قم بفتح ملف ( web.xml ) لإنشاء مخطط للسيرفلت (servlet mapping) الخاص بـ( servlet controller ) الخاص بنا للعمل مع نمط (url) (CRUDController/) و عادة بمجرد انشاء السيرفلت يتم تعريفها مباشرة في ملف ال (web.xml)

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.su

<display-name>jTableJavaExample</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

<servlet-name>CRUDController</servlet-name>

<servlet-class>com.programmingfree.controller.CRUDController</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>CRUDController</servlet-name>

<url-pattern>/CRUDController</url-pattern>

</servlet-mapping>

</web-app>

8- في النهاية ، يجب علينا استدعاء الميثود " load" في صفحة (jsp) التي أنشأناها من قبل. نحن فقط قمنا بتهيئتها من قبل.

بالنسبة لـ JSP لأجل إطلاق ال AJAX للميثود الخاصة بقائمة إجراءات (action) جانب السيرفر ،يجب استدعاء طريقة " load" بعد رمز تهيئة الجدول كما هو موضح أدناه ،

Index.jsp

<html>

<head>

<title>Setup and Load Data to jTable using Servlets and JSP</title>

$(document).ready(function () {

//initialize jTable

$('#PersonTableContainer').jtable({

title: 'Table of people',

actions: {

listAction: 'CRUDController?action=list',

createAction:'CRUDController?action=create',

updateAction: 'CRUDController?action=update',

deleteAction: 'CRUDController?action=delete'

fields: {

customerid: {

key: true,

list: false

customername: {

title: 'Customer Name',

width: '30%'

email: {

title: 'Email',

width: '30%'

phone: {

title: 'Phone',

width: '20%',

create: false,

edit: false

city: {

title: 'City',

width: '20%',

}

});

</script>

</head>

<body>

<h1>Setup and Load Data in jTable using Servlet and JSP</h1>

<h4>Demo by Mohammed Sinwi , Tutorial at <a href="https://sunwaytech.blogspot.com/">sunwaytech.blogspot.com</a></h4>

</body>

</html>

لاحظ أننا قمنا بتنفيذ منطق جانب الخادم (server side logic) فقط لتحميل الجدول بالبيانات ولم نتناول بعد عمليات الإنشاء (create) والتحديث (update) والحذف (delete) و العرض (display). سوف أقوم بتحديث العمليات التي تعتمد على AJAX في المقالة التالية.

هذا كل شيء! نحن جاهزون لتشغيل التطبيق لمشاهدة البيانات المحملة من ملف CSV كما هو موضح أدناه ،

الدروس التالية ستكون عن
1- تقنية الإستروتس (Struts)
2 - تقنية الهيبر نت (Hibernate)
و بعدها سيتم طرح موضوع عن كيفية إعداد و تحميل البيانات في ال (jTable ) بإستخدام ال (Struts) و ال (Hibernate).

Setting up jQuery jTable plugin in Struts 2 framework and Hibernate

و ذلك حتى تكتمل الفكرة و تكتمل الفائدة .

تحميل المشروع من هنا

فضلاً إترك تعليقك و استفساراتك حول هذا الموضوع في جزء التعليقات اسفل كي أحسن انا من مهاراتي في الكتابة و التدوين و إظهار التدوين بشكل جيد و مفيد ، انشر المقال وانفع به غيرك . شكراً لمرورك و قراءتك للمقال .

مدونة (https://sunwaytech.blogspot.com)

ۚ فَأَمَّا الزَّبَدُ فَيَذْهَبُ جُفَاءً ۖ وَأَمَّا مَا يَنفَعُ النَّاسَ فَيَمْكُثُ فِي الْأَرْضِ ۚ

شارك المقال و انفع به غيرك

المرجع /

http://www.jtable.org/

http://www.programming-free.com/2013/07/setup-load-data-jtable-jsp-servlet.html

الصفحات

اعلان منتصف المقال

الجمعة، 22 يونيو 2018

إعداد و تحميل البيانات في ال (jTable ) بإستخدام السيرفلت (Servlets ) و ال (JSP)

ليست هناك تعليقات

المشاركات الشائعة

أرشيف المدونة الإلكترونية

تابعنا على اليوتيوب

مساحة إعلانية

عن الموقع

التسميات

الأكثر قراءة