DB接続の方法が全くわからないです

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
今Webアプリケーション制作でJSPとサーブレットを使いDBの接続を実施したいのですが、それぞれどう書いていけばいいのかさっぱりわからない状況です。いろんなサイトやテキストを読んでいるのですが前に進めません。ここからどうしていけば良いでしょうか❔どなたか教えてくれると幸いです。

■サーブレット
package seisan;

import java.beans.Statement;
import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import ryoukin.java.ryoukin_beans;

/**

Servlet implementation class SeisanServlet

*/
@WebServlet("/Seisan")
public class SeisanServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public SeisanServlet() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
@SuppressWarnings("unused")
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// TODO Auto-generated method stub
	response.getWriter().append("Served at: ").append(request.getContextPath());


}



/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// TODO Auto-generated method stub
	doGet(request, response);


}

}

■JSP
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%!

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>料金</title> </head> <body> <form action = "http://localhost:8080/WebApp/Seisan" metod="post"> <P>料金一覧</P> <table> <table border="1"> <tr>

 <th><input type="submit" value="コースA"></th>
 <th><input type="submit" value="コースB"></th>
 <th><input type="submit" value="コースC">
 </th><th><input type="submit" value="OPコースA"></th>

<thead> </tr>
<tbody>
<tr>
<td>データ１</td><td>データ１</td><td>データ１</td><td>データ１</td>
</tr>


</table>

</thead> <input type="submit" value="ログアウト">

<%
// データベースへのアクセス開始
Connection con = null;
Statement stmt = null;
ResultSet rs = null;
try {
// データベースに接続するConnectionオブジェクトの取得
con = DriverManager.getConnection("jdbc:mysql://localhost/WeApp", "root", "ryotennis");
// データベース操作を行うためのStatementオブジェクトの取得
stmt = con.createStatement();
// SQL()を実行して、結果を得る
rs = stmt.executeQuery("select * from seisan");

        // 得られた結果をレコードごとに表示
        while (rs.next()) {

<%
}

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // データベースとの接続をクローズ
        try { rs.close(); } catch (Exception e) {}
        try { stmt.close(); } catch (Exception e) {}
        try { con.close(); } catch (Exception e) {}
    }

    </table>
    </form>

</body> </html>

■データベース
reate table seisan(
-> courseID int(11) PRIMARY KEY AUTO_INCREMENT,
-> coursea_value int(11),
-> courseb_value int(11),
-> coursec_value int(11),
-> opcoursea_value int(11),
-> opcourseb_value int(11),
-> opcoursec_value int(11),
-> upd_username datetime,
-> upd_datetime datetime,);

+----------+---------------+---------------+---------------+-----------------+-----------------+-----------------+--------------+--------------+
| courseID | coursea_value | courseb_value | coursec_value | opcoursea_value | opcourseb_value | opcoursec_value | upd_username | upd_datetime |
+----------+---------------+---------------+---------------+-----------------+-----------------+-----------------+--------------+--------------+
| 1 | 1000 | 500 | 500 | 200 | 200 | 200 | NULL | NULL |
+----------+---------------+---------------+---------------+-----------------+-----------------+-----------------+--------------+--------------+