الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

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

بدأه JavaPorgrammer في 20 يناير 2011 · 12 رد · 2,564 مشاهدة · في JavaEE
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

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

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

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

أولا ننشئ جدول في قاعدة البيانات ونسميه مثلا : 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

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

المرفقات
new1.gifnew2.gifn3.gifn4.gifresult.gif
1

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#2

يعطيك العافية اخي 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
#3

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

وبـ 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 في 20 يناير 2011 في 20:54

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#4

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

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

#5

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

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

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

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

و cn تصبح getConnection ..

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

#6

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

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

تحية عطرة

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#7

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

لدي مشكل .... احتاج الى استخدام اسم من اسماء المدن في 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 مع حصولي على الاسم المختار من القائمة

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

#8

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

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

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

#9
العيافـي كتب:

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

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

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

#10

شكرا اخي ...

قمت بذلك ..ولكن بعد تنظيم الكودات في اوراق 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>

شكرا مسبقا

تم تعديل هذه المشاركة بواسطة مروان مورو في 27 أغسطس 2012 في 21:14

#11

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

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

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

Include

بدلا منه

#12

شكرا اخي

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

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
#13

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

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

:cool:

مواضيع مشابهة