• 0
JavaPorgrammer

إنشاء قائمة منسدلة ديناميكية

سؤال

بسم الله الرحمن الرحيم

أسعد الله أوقات الجميع بكل خير..

مستوى الدرس : مبتدأ .

لنفترض أننا نريد عرض اسم المدن المتوفرة في قائمة منسدلة من خلال جدول في قاعدة البيانات، بحيث لو أضيفت مدينة جديدة تتم إضافتها إلى الجدول فقط.. عموما دعونا نبدأ :)

أولا ننشئ جدول في قاعدة البيانات ونسميه مثلا : cities


create table cities(
id int not null auto_increment primary key,
name varchar(30) not null);

ومن ثم نضيف إليه البيانات التالية:


insert into cities (name) values('Ryadh');
insert into cities (name) values('Jeddah');
insert into cities (name) values('Makkah');

نقوم الآن بالانتقال إلى netbeans وننشئ مشروع جديد :

post-231827-098869300 1295532414_thumb.g

ومن ثم :

post-231827-070463200 1295532496_thumb.g

بعد ذلك اسم المشروع و next :)

ننشئ الآن فئة نسميها "city" تمثل كل مدينة :

post-231827-076690200 1295532681_thumb.g

post-231827-090119400 1295532783_thumb.g

فئة city:


public class city {
private int id;
private String name;

/**
* @return the id
*/
public int getId() {
return id;
}

/**
* @param id the id to set
*/
public void setId(int id) {
this.id = id;
}

/**
* @return the name
*/
public String getName() {
return name;
}

/**
* @param name the name to set
*/
public void setName(String name) {
this.name = name;
}

}

الآن ننشئ فئة تأمن لنا الاتصال بقاعدة البيانات ، وإجراء العمليات عليها ، ولنسمها مثلا : dbclass


public class dbclass {
private final String dbUrl = "jdbc:mysql://localhost:3306/tut";
private final String dbUserName = "root";
private final String dbPassword = "root";

private Connection cn() {
Connection con = null;
try {

Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
System.out.println(e.toString());
}
try {

con = DriverManager.getConnection(this.dbUrl, this.dbUserName, this.dbPassword);

} catch (Exception e) {
e.printStackTrace();
}
return con;
}

نضيف للفئة السابقة دالة جلب البيانات من الجدول :


public ArrayList getCities() {

ArrayList cities = new ArrayList();
try {

Connection con = cn();

String sql = "select *from cities ";
Statement s = con.createStatement();
ResultSet result = s.executeQuery(sql);
while (result.next()) {
city c = new city();
c.setId(result.getInt(1));
c.setName(result.getString(2));
cities.add(c);
}
result.close();
s.close();
con.close();
} catch (SQLException e) {
System.out.println(e.toString());
}
return cities;
}

دالة تعود بمصفوفة من القوائم ArrayList ، في كل مرة يوجد بيان في الـ resultset يقوم بإنشاء كائن "city" ويسند إليه القيم : اسم المدينة ورقمها (id,name) ثم بعد ذلك يضيفها إلى ArrayList

نرجع الآن إلى صفحة "index.jsp" .. في بداية الصفحة نقوم بإضافة المكتبات الآتية :


<%@page import="java.util.Iterator"%>
<%@page import="java.util.ArrayList"%>
<%@page import="mine.city" %>

نقوم أيضا بإضافة "dbclass" لنتمكن من استدعاء دالة جلب اسماء المدن من الجدول :

<jsp:useBean id="db" scope="page" class="mine.dbclass" />

في داخل وسم <body> نضيف :


<h1>Hello World!</h1>
<% ArrayList c = db.getCities();
Iterator t = c.iterator();
city _city = new city();
%>
Select your city: <select name="select">
<% while(t.hasNext()){
_city = (city) t.next();
%>
<option value="<%= _city.getId() %>"><%= _city.getName() %></option>
<% } %>
</select>

قمنا بإنشاء متغير من نوع ArrayList وأسندنا إليه نتائج الاستعلام من جدول المدن عن طريق الدالة :getCities ، بعد ذلك جمعنا القيم داخل Iterator

داخل الـ loop في كل مرة يقوم بإنشاء كائن جديد وإسناد القيم من الـ Iterator إليه.. وهكذا

لاحظ أن الـ loop بين وسمي <option> :)

نقوم بنشر الصفحة الآن على السيرفر لنرى النتيجة :

post-231827-081518100 1295534596_thumb.g

أرجو أن أكون وفقت في الشرح .. وأي سؤال انا حاضر :)

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

12 إجابة على هذا السؤال .

  • 0

يعطيك العافية اخي JavaPorgrammer

لماذا لا تستخدم JSTL على الاقل في عرض select

بالتحديد اقصد هذا الكود


<% ArrayList c = db.getCities();
Iterator t = c.iterator();
city _city = new city();
%>
Select your city: <select name="select">
<% while(t.hasNext()){
_city = (city) t.next();
%>
<option value="<%= _city.getId() %>"><%= _city.getName() %></option>
<% } %>
</select>

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أخي العيافي شاكر لك تفاعلك .. :)

وبـ JSTL احلى وأكثر اختصار :


<select name="select">
<c:forEach var="tc" items="${requestScope.list}">

<option><c:out value="${tc.name}"/></option>
</c:forEach></select>

وقبله :


<%ArrayList<city> sc = db.getCities();
request.setAttribute("list", sc);%>

تحية عطرة للجميع

تم تعديل بواسطه JavaPorgrammer
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

بارك الله فيك JavaPorgrammer

ونحتاج منك المزيد ان شاء الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جميل ماشاء الله ..

لكن لي تعليق صغير...

لم لا تستخدم ال naming convention الخاصه بالجافا..

فمثلا city تصبح : City

و cn تصبح getConnection ..

بذلك الكود سيكون أكثر مقروئيه لمبرمجين الجافا..

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

حياك اخي هويدي ..

شاكر لك ملاحظتك .. وشاكر لك تفاعلك أيضا.

تحية عطرة

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم و رحمة الله و بركاته

لدي مشكل .... احتاج الى استخدام اسم من اسماء المدن في JSP اخرى

قم ببحث في النت ... و لكن لم افلح ابدا في الحصول على حل


document.getElementById('selc').value;


<%
ArrayList<String> liste = (ArrayList) request.getAttribute("data");
%>
<select name="ActionSelect" onChange="change()" id="selc" >
<option value="-1">Select</option>
<%
for (int i=0; i<liste.size(); i++)
{
String item= (String) liste.get(i) ;
%>
<option value="<%=item%>"><%=item%></option>
<%
}
%>

</select>

ما احتاجه هو عندما اضغط على الزر افتح الورقة الثانية JSP مع حصولي على الاسم المختار من القائمة

مع الشكر مسبقا

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

تستطيع الحصول على القيمة في الورقة التالية بواسطة الكود التالي


<%
String ActionSelect =
request.getParameter("ActionSelect");
%>

بشرط ان يكون " الزر افتح الورقة الثانية" زر ارسال للنموذج (Form)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

تستطيع الحصول على القيمة في الورقة التالية بواسطة الكود التالي


<%
String ActionSelect =
request.getParameter("ActionSelect");
%>

بشرط ان يكون " الزر افتح الورقة الثانية" زر ارسال للنموذج (Form)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا اخي ...

قمت بذلك ..ولكن بعد تنظيم الكودات في اوراق JSP التي عملتها قبلا ...

بعد الضغط على الزر و الحصول على الاسم من القائمة و ظهور page2.jsp ارغب في الحصول على graphe

سابقا استعمل page2.jsp لمناداة chartex.jsp مستعملا هذا الكود


<img class="bloc6" src="chartex.jsp" />

كود chartex.jsp كالتالي


<%@page import="org.jfree.data.category.DefaultCategoryDataset"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="Utilitaire.MaConn"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="org.jfree.chart.ChartFactory"%>
<%@ page import="org.jfree.chart.ChartUtilities"%>
<%@ page import="org.jfree.chart.JFreeChart"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="org.jfree.data.*"%>
<%@ page import="org.jfree.data.jdbc.JDBCCategoryDataset"%>
<%@ page import="org.jfree.chart.renderer.category.CategoryItemRenderer"%>
<%@ page import="org.jfree.chart.plot.CategoryPlot"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="java.awt.Color"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
Valeur formulaire: <%=request.getParameter("ActionSelect")%>
<%
DefaultCategoryDataset dataset = new DefaultCategoryDataset();

String v ="Door Rear SX";//هنا استعمل الاسم المختار من القائمة
String query = "select * from fe where f ='"+v+"'";
MaConn mc;

mc=new MaConn();
mc.connecter("jdbc:mysql://localhost:3306/fiat_panda", "root", "admin");
ResultSet rs=mc.selection(query);
while(rs.next())
{
rs.getString("seg");
String sql ="select SUM(quantite) as nb from te where seg like '%"+ rs.getString("seg")+"%'";

ResultSet rs2=mc.selection(sql);
rs2.next();
{

rs2.getInt("nb");


dataset.setValue(rs2.getInt("nb"), "Quantite", rs.getString("seg"));
}

}
JFreeChart chart = ChartFactory.createBarChart(" Stock Update", // title
"seg", // x-axis label
"quantite" , // y-axis label
dataset,
PlotOrientation.VERTICAL,
true, // legend displayed
true, // tooltips displayed
false ); // no URLs

chart.setBackgroundPaint(Color.yellow);
chart.getTitle().setPaint(Color.blue);
CategoryPlot p = chart.getCategoryPlot();
p.setRangeGridlinePaint(Color.red);
try {
OutputStream so = response.getOutputStream();
ServletOutputStream sos = response.getOutputStream();
ChartUtilities.writeChartAsPNG(so, chart, 400, 400);

} catch (IOException e) {
System.out.println("Problem in creating chart.");
}
%>
</body>
</html>

شكرا مسبقا

تم تعديل بواسطه مروان مورو
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

هل انت متاكد من استخدام الكود التالي

<img class="bloc6" src="chartex.jsp" />

المفروض تستخدم الكود الخاص ب

Include

بدلا منه

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا اخي

لقد وجدت هذه الطريقة في النت

http://www.roseindia.net/chartgraphs/areachart-jsppage.shtml

في الورقة الاولي page1.jsp :


<form action="areachart.jsp" >

و في الورقة areachart.jsp اتحصل على الاسم المختار من القائمة و اتحصل على الكراف المطلوب في ملف و لكن ليس في jsp :


<%
String df =request.getParameter("ActionSelect");
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
String query = "select * from fe where f ='"+df+"'";
MaConn mc;

mc=new MaConn();
mc.connecter("jdbc:mysql://localhost:3306/fiat_panda", "root", "admin");
ResultSet rs=mc.selection(query);
while(rs.next())
{
rs.getString("seg");
String sql ="select SUM(quantite) as nb from te where seg like '%"+ rs.getString("seg")+"%'";

ResultSet rs2=mc.selection(sql);
rs2.next();
{
rs2.getInt("nb");
dataset.setValue(rs2.getInt("nb"), "Quantite", rs.getString("seg"));
}

}
JFreeChart chart = ChartFactory.createBarChart(" Stock Update", // title
"seg", // x-axis label
"quantite" , // y-axis label
dataset,
PlotOrientation.VERTICAL,
true, // legend displayed
true, // tooltips displayed
false ); // no URLs

chart.setBackgroundPaint(Color.yellow);
chart.getTitle().setPaint(Color.blue);
CategoryPlot p = chart.getCategoryPlot();
p.setRangeGridlinePaint(Color.red);
try {
final ChartRenderingInfo info = new ChartRenderingInfo
(new StandardEntityCollection());

final File file1 = new File("C:/Users/user/Documents/loginStruts/areachart.png");

ChartUtilities.saveChartAsPNG(file1, chart, 400, 400, info);

} catch (Exception e) {
out.println(e);
}
%>
<IMG SRC="C:/Users/user/Documents/loginStruts/areachart.png" WIDTH="400" HEIGHT="400" BORDER="0" USEMAP="#chart">



1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرآ على هذا المجهود الرائع،

بالتوفيق انشاء و الى الأمام ...

:cool:

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .