title: Migrating from JSP Scriptlets to Servlets
body: <p>So I'm trying to do some basic stuff with databases and graphs. I've gotten my JSP code working, but I want to move it over to a servlet/other resources because I've heard that doing everything in a jsp is a very bad idea. I've done some research on servlets but I'm very confused by how they work/link up with jsps and other files.</p>
  
  <p>I know that I'm going to want to keep the d3.js code in the .jsp (probably), but I'm mainly concerned about the database connectivity code.</p>
  
  <p>Here is my JSP:</p>
  
  <pre><code>    &lt;%@ page language="java" import="java.sql.*, java.util.*"%&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;D3 Test&lt;/title&gt;
          &lt;script type="text/javascript" src="d3/d3.v2.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;%
      Class.forName("com.mysql.jdbc.Driver");
  
  
  
  Connection con=null;
  ResultSet rst=null;
  Statement stmt=null;
  try{
  String url="jdbc:mysql://localhost:3306/testdb?user=root&amp;password=password";
  
  int i=1;
  con=DriverManager.getConnection(url);
  stmt=con.createStatement();
  rst=stmt.executeQuery("select * from test ");
  
  %&gt;
          &lt;script type="text/javascript"&gt;
  
              var dataset = [ 
      &lt;% while (rst !=null &amp;&amp; rst.next()) { %&gt;
         &lt;%=rst.getInt("ID")%&gt;, 
      &lt;% }%&gt;
      ]; 
  
              var w = 500;
              var h = 340;
              var barPadding = 1;
              /*var xScale = d3.scale.linear()
                                   .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                                   .range([padding, w - padding * 2]);
  
              var yScale = d3.scale.linear()
                                   .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                                   .range([h - padding, padding]);*/
              var svg = d3.select("body")
                          .append("svg")
                          .attr("width", w)
                          .attr("height", h);
              svg.selectAll("rect")
                  .data(dataset)
                  .enter()
                  .append("rect")
                  .attr("id", "rect1")
                  .attr("x", function(d, i) {
                          return i * (w / dataset.length);
                      })
                  .attr("y", function(d) {
                      return h - d*4;
                  })
                  .attr("width", w/ dataset.length - barPadding)
                  .attr("height", function(d) {
                      return d * 4;
                  })
                  .attr("fill", function(d) {
                      return "rgb(0, 0, " + (d * 10) + ")";
                  });
  
              svg.selectAll("text")
                  .data(dataset)
                  .enter()
                  .append("text")
                  .text(function(d) { 
                      return d;
                  })
                  .attr("x", function(d, i) {
                      return i * (w / dataset.length)+ (75 / dataset.length);
                  })
                  .attr("y", function(d) { 
                      return h - (d * 4) + 15;
                  })
                  .attr("font-family", "sans-serif")
                  .attr("font-size", "11px")
                  .attr("fill", "white");
                  &lt;%   
      } finally {
          if (stmt != null) { stmt.close(); }
      }%&gt;
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>