7 従業員レコードの更新

hradminには、従業員レコードを更新する権限があります。hrstaffユーザーにこの権限はありません。

まず、レコード内の従業員を検索する必要があります。従業員に関連する情報を取得すると、従業員に関連する詳細を変更するための「編集」および「削除」オプションが表示されます。

この章では、作成する必要があるクラスと、従業員IDによる検索機能を作成するために追加する必要があるコードについて説明します。

この章では、次の方法について学習します。

1. EmployeeBean.javaでの新しいメソッドgetEmployeeByFn(String)の宣言

2. EmployeeBean.javaでの新しいメソッドupdateEmployee(int)の宣言

3. EmployeeBeanImpl.javaでの新しいメソッドgetEmployeeByFn(String)の実装

4. EmployeeBeanImpl.javaでの新しいメソッドupdateEmployee(int)の実装

5. リクエストおよびレスポンスを処理するコードのWebController.javaへの追加

6. 結果を表示するHTMLページ(listByName.html)の作成

クラス名:

src/main/java/com/oracle/jdbc/samples/entity/Employee.java

この例で作成したEmployee.javaファイルを使用します。

EmployeeBean.javaでの新しいメソッドgetEmployeeByFn(String)の宣言

クラス名: src/main/java/com/oracle/jdbc/samples/bean/EmployeeBean.java

Githubの場所: EmployeeBean.java

説明: メソッドgetEmployeeByFn(String)は、名に基づいて従業員を検索するのに役立ちます。

従業員の詳細を変更するには、hradminは最初に名で従業員を検索する必要があります。

実行する手順:

手順1: メソッドgetEmployeeByFn(String)の宣言

手順1: getEmployeeByFn(String)メソッドを宣言する手順

1. 演習の1日目で作成したクラスEmployeeBeanを使用します。各機能に新しいメソッドを追加できます。

2. パラメータとして名を使用するメソッドgetEmployeeByFn(String)メソッドを宣言します。

public List<Employee> getEmployeeByFn(String fn)throws SQLException;

新しいメソッドupdateEmployee(Employee)の宣言

クラス名: src/main/java/com/oracle/jdbc/samples/bean/EmployeeBean.java

Githubの場所: EmployeeBean.java

説明: この方法で、名、姓、給与、job_idなどの従業員の属性を更新できます。

実行する手順:

手順2: メソッドupdateEmployee(Employee)の宣言

updateEmployee(Employee)メソッドを宣言する手順

1. 'ListAll'機能に対して1日目からの演習で作成したEmployeeBeanファイルを使用します。同じクラスを使用して新しい機能に新しいメソッドを追加できます。

2. パラメータとしてEmployeeオブジェクトを使用するメソッドupdateEmployee(Employee)を宣言します。

public String updateEmployee(Employee employee) throws SQLException;

従業員名による検索のための新しいメソッドgetEmployeebyFn()の実装

クラス名:

src/main/java/com/oracle/jdbc/samples/bean/JdbcBeanImpl.java

Githubの場所: EmployeeBeanImpl.java

説明: 従業員IDで検索するための新しいメソッドgetEmployeeByFn(String)を実装します。このメソッドは、従業員IDを入力パラメータとして使用し、Employee型のオブジェクトを返します。

実行する手順: メソッドgetEmployeeByFn(String)の実装

getEmployeeByFn(String)メソッドを実装する手順:

1. Employeeオブジェクトを返すgetEmployeeByFn(String)を宣言します。

public List<Employee> getEmployeeByFn(String fn) throws SQLException {

2. List<Employee>型の戻り値の変数を宣言します。

List<Employee> returnValue = new ArrayList<>();

3. tryブロックを作成します。tryブロックを使用すると、getConnectionメソッドを呼び出してデータベース接続を作成できます。

try (Connection connection = getConnection()) {

4. PreparedStatementを作成する別のtryブロックを作成します。従業員IDに基づいて従業員を選択するために実行される問合せを追加します。

try (PreparedStatement preparedStatement = connection.prepareStatement("SELECT Employee_Id, First_Name, Last_Name, Email, Phone_Number, Job_Id, Salary FROM EMPLOYEES WHERE First_Name LIKE ?")) {
5. 入力パラメータ(従業員の名)を設定します。メソッドの入力パラメータは、PreparedStatementのINパラメータとして設定されます。

preparedStatement.setString(1, fn + '%');

6. ResultSetのために別のtryブロックを作成します。実行する必要がある問合せを含めます。

try (ResultSet resultSet = preparedStatement.executeQuery()) {

7. 結果をループするwhile文を含めます。レコードが見つかった場合は、returnValueに追加します。

while(resultSet.next()) {
    returnValue.add(new Employee(resultSet));
  } 
8. すべてのtryブロックのカッコを閉じます。

9. SQLExceptionを捕捉し、ロガーにメッセージを記録します。

catch (SQLException ex) {
  logger.log(Level.SEVERE, null, ex);
  throw ex;
}
10. メソッドgetEmployee(int)から従業員のリストを返します

return returnValue;

新しいメソッドupdateEmployee(Employee)の実装

クラス名: src/main/java/com/oracle/jdbc/samples/bean/EmployeeBeanImpl.java。

Githubの場所: EmployeeBeanImpl.java

説明: メソッドupdateEmployee(Employee)を使用すると、従業員レコードにあるfirst_name、last_nameなどの従業員の詳細を更新できます。

実行する手順: メソッドupdateEmployee(Employee)の実装

UpdateEmployee(Employee)メソッドを実装する手順:

1. メソッドupdateEmployee(Employee)を宣言します。

public String updateEmployee(Employee employee) throws SQLException {

2. 更新されたレコード数を取得するための変数を宣言して初期化します。

int updateCount = 0;

3. getConnection()メソッドを呼び出してデータベース接続を確立するtryブロックを作成します。

try (Connection connection = getConnection()) {

4. PreparedStatementを作成する別のtryブロックを作成します。従業員IDに基づいて従業員を選択するために実行する必要がある問合せを含めます。

try (PreparedStatement preparedStatement = connection.prepareStatement("UPDATE employees SET FIRST_NAME = ?, LAST_NAME = ?, EMAIL = ?, PHONE_NUMBER = ?, SALARY = ? WHERE EMPLOYEE_ID = ?")) {
5. ユーザーが属性ごとに入力した新しい値を設定し、prepapredStatementを実行します。
preparedStatement.setString(1, employee.getFirst_Name());
preparedStatement.setString(2, employee.getLast_Name());
preparedStatement.setString(3, employee.getEmail());
preparedStatement.setString(4, employee.getPhone_Number());
preparedStatement.setInt(5, employee.getSalary());
   preparedStatement.setInt(6, employee.getEmployee_Id());
updateCount = preparedStatement.executeUpdate();
6. すべてのtryブロックのカッコを閉じます。

7. SQLExceptionを捕捉し、次に示すようにロガーにメッセージを記録します。

catch (SQLException ex) {
  logger.log(Level.SEVERE, "Unable to update record", ex);
  throw new SQLException("Alert! Record could not be updated, "
    +ex.getMessage(), ex);}
8. 更新されたレコードの数とともにメッセージをロガーに記録します。

logger.fine("Update count: " +updateCount);

9. 更新されたレコードがない場合は、次のようにメッセージを入力します。

if (updateCount != 1) {
  logger.severe("Unable to update record");
  throw new SQLException("Alert! Record could not be updated");
}
10. レコードが更新された場合は、成功メッセージを返します。
return "Success: Record updated";

サーブレット(WebController.java)へのコードの追加

ここから項目が開始します。

クラス名: src/main/java/com/oracle/jdbc/samples/web/WebController.java

Githubの場所: WebController.java

説明: サーブレットは1日目の演習で作成しました。この項では、すべての従業員に昇給を与えるための関連コードを追加します。

手順6: ユーザーが入力パーセントを入力した後に、給与予算を計算するコードを追加します。これはdoPost()メソッドで処理されます。

コードをdoPost(req,res)に追加する手順:

1. このメソッドは「従業員レコードの更新」の項ですでに作成されています。

2. 入力に基づいて呼び出される機能を確認する別のifブロックを作成します。
if ("incrementSalary".equals(value)) {
  if ((value = request.getParameter(INCREMENT_PCT)) != null)   {
       try {
   System.out.println("increment% = " +value);
   response.setContentType("application/json");
List<Employee> employeeList =   employeeBean.incrementSalary(Integer.valueOf(value));
   System.out.println("incrementSalary, employeeList: " +employeeList.toString());
   gson.toJson(employeeList,
new TypeToken<ArrayList<Employee>>(){}.getType(),
response.getWriter());
  }catch (Exception ea) {         response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
   }
} else {           
response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
      }
}

3. すべてのカッコが正しく閉じていることを確認します。

新しいHTML(incrementSalary.html)の作成

クラス名: src/main/webapp/incrementSalary.html。

Githubの場所: incrementSalary.html

説明: このHTMLには、給与予算を計算するためのパーセントを入力する入力ボックスが表示されます。

手順7: HTMLページのtitle、headおよびstylesheetの作成

手順8: 入力フィールド(従業員名など)を送信する関数の作成

手順9: JSONレスポンスを処理して結果をHTMLページに表示するメソッドprocessResponse()を作成します。

手順7: HTMLページのtitle、stylesheetおよびbodyを作成する手順:

1. HTMLページのtitle、stylesheetおよびbodyを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Increment Salary</title>
<link rel="stylesheet" type="text/css" href="css/app.css" >
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

手順8: 入力フィールドを処理する手順

1. 昇給率を取得するための<body>タグと<input>タグを開始します。

<body>
<div> Enter the percentage increase in salary<inputid='incrementField' type="number" max="100" min="3">%
</div>
<div id="UpdateButton"> <button type="button" class="btn btn-info btn-lg" onclick='javascipt:confirmUpdate()'> Increment Salaries</button> <button type="button" class="btn btn-default btn-lg" onclick='javascipt:cancelUpdate()'>Cancel</button></div>
<div id="status" class="none"></div>
<div id="id-emp"></div>
<script>
function showStatus(c, message) {
     $('#status').text(message);
     $('#status').attr('class', c);
       }

function confirmUpdate() {
  var increment = $('#incrementField').val();
  var res = confirm("Do you really want to Increment Salary by " +increment +"%?");
  if(res == true) {
    console.log("Salary record");
    $('#UpdateButton').hide();
    showStatus("alert alert-info", "Updating records, processing request");
    var xmlhttp = new XMLHttpRequest();
    var url = "WebController?op=incrementSalary&incrementPct=" +increment;
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        processResponse(xmlhttp.responseText);
        showStatus("alert alert-success", "Updating records, successfully updated");
      }
      else {
        showStatus("alert alert-danger", "Updating records, failure, could not update records");
      }
    }
    xmlhttp.open("POST", url, true);
    xmlhttp.send();
    showStatus("alert alert-info", "Updating records, request sent");

  }
  else {
    console.log("Salary not updated");
    showStatus("alert alert-warning", "Updating records, attempt cancelled");

  }
}

</script>

手順9: processResponse()メソッドを作成する手順:

1. HTMLページにJSON結果を表示するprocessRequest()関数を作成します。

unction processResponse(response) {
  var arr = JSON.parse(response);
  var i;
  var out = "<table>";
keys = Object.keys(arr[0]);

  // Print headers
  out += "<tr>"
for(i = 0; i < keys.length; ++i) {
    out += "<th>"+keys[i]+"</th>"
}
out += "</tr>";

// Print values
for(j = 0; j < arr.length; j++) {
out += "<tr>"
for(i = 0; i < keys.length; ++i) {
out += "<td>"+arr[j][keys[i]]+"</td>"
}
out += "</tr>"
}
out += "</table>";
document.getElementById("id-emp").innerHTML = out;
}

Tomcatでのログイン・ユーザーの作成

HR Webアプリケーションには2人のユーザー(hradminhrstaff)があります。

資格証明を使用してホーム画面にログインすると、ランディング・ページがWebアプリケーションの詳細とともに表示されます。hradminおよびhrstaffには、異なる権限と異なる機能へのアクセス権があります。

この章では、作成する必要がある必要なクラスと、Tomcatでログイン機能を構築する方法を示します。

  • ログイン機能用のXMLファイル(tomcat-users.xml)を作成します

  • ユーザーをログインするHTMLページ(login.html)の作成

  • エラー・メッセージを表示するHTMLページ(login-failed.html)の作成

  • ログイン中にユーザーを認証するweb.xmlの作成

  • アプリケーションの詳細を表示するHTMLページ(about.html)の作成

  • ランディング・ページ(index.html)の作成と、リダイレクト用のhtmlページの定義

  • ログアウトを処理するコードのサーブレット(WebController.java)への追加

ログイン機能用のXMLファイル(tomcat-users.xml)の作成

クラス名: /java/HRWebApp/tomcat-users.java

Githubの場所: tomcat-users.xml

説明: XMLファイルtomcat-users.xmlを作成し、アクセスを許可するログイン・ユーザーをリストします。ユーザーごとにユーザー名とパスワードの両方を指定します。

手順1: 新しいファイルtomcat-user.xmlの作成

tomcat-users.xmlを作成する手順:

1. ファイルtomcat-users.xmlを作成します。このファイルをTOMCAT_HOME/conf /tomcat-users.xmlの下に配置します。

<?xml version='1.0' encoding='utf-8'?> z
<tomcat-users xmlns="http://tomcat.apache.org/xml"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://tomcat.apache.org/xml tomcat-users.xsd" version="1.0">
<role rolename="manager"/>
<role rolename="staff"/>
<user username="hradmin" password="welcome" roles="manager,staff"/>
<user username="hrstaff" password="welcome" roles="staff"/>
</tomcat-users>

新しいHTML (login.html)の作成

クラス名: src/main/webapp/login.html

Githubの場所: login.html

説明: ログイン・ページは、Webアプリケーションのメイン・ページを起動すると表示されます。ログイン・ページには、ユーザー名とパスワードを取得するフィールドが表示されます。

手順2: login.htmlのtitle、headおよびstylesheetの作成

手順3: 入力フィールドを取得してフォームを送信する<body>の作成

手順2: login.htmlのtitle、headおよびstylesheetを作成する手順:

1. ファイルtomcat-users.xmlを作成します。このファイルTOMCAT_HOME/conf/tomcat-users.xmlを配置します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login to Jdbc Web Sample application</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#cent {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px; /* this is half the height of your div*/
    margin-left:-100px; /*this is half of width of your div*/
  }
   td {
     height: 30px;
   }

</style>
</head>

手順3: <body>を作成してフォームを送信する手順:

1. ユーザーが入力したログイン資格証明を発行する<body>および<form>を作成します。

<body>
<div id="cent">
<form method="POST" action="j_security_check">
<table>
<tr>
<td colspan="2">Login to the Jdbc Web Sample application:</td>
</tr>
<td>Name:</td>
<td><input type="text" name="j_username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="j_password"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Go" /></td>
</tr>
</table>
</form>
</div>
</body>

新しいHTML (login-failed.html)の作成

クラス名: src/main/webapp/login-failed.html

Githubの場所: login-failed.html

説明: これは、ログインが失敗した場合に表示されるhtmlページです。

手順4: ログインしようとして失敗したときにメッセージを表示する新しいページlogin-failed.htmlの作成

新しいHTMLページlogin-failed.htmlを作成する手順

1.次に示すようにlogin-failed.htmlを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Failed</title>
</head>
<body>
<p>
Sorry, login failed!
</p>
</body>
</html>

ログイン中にユーザーを認証するweb.xmlの作成

クラス名: src/main/webapp/WEB-INF/web.xml

Githubの場所: web.xml

説明: web.xmlファイルは、ログイン・ページがユーザーに表示されるときにユーザーを認証する記述子で構成されます。

手順: 次に示すように、web.xmlファイルを作成します。

web.xmlを作成する手順

1. web.xmlファイル管理者を作成するには、次の手順を使用します。

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>Jdbc Web Sample</display-name>
<security-role>
<role-name>manager</role-name>
</security-role>
<security-role>
<role-name>staff</role-name>
</security-role>
<security-constraint>
<web-resource-collection>
<web-resource-name>Wildcard means whole app requires 
authentication</web-resource-name>
<url-pattern>/*</url-pattern>
<http-method>GET</http-method>
<http-method>POST</http-method>
</web-resource-collection>
<auth-constraint>
<role-name>manager</role-name>
</auth-constraint>
<user-data-constraint>
<transport-guarantee>NONE</transport-guarantee>
</user-data-constraint>
</security-constraint>
<security-constraint>
<web-resource-collection>
<web-resource-name>Wildcard means whole app requires 
authentication</web-resource-name>
<url-pattern>/*</url-pattern>
<http-method>GET</http-method>
</web-resource-collection>
<auth-constraint>
<role-name>staff</role-name>
</auth-constraint>
<user-data-constraint>
<transport-guarantee>NONE</transport-guarantee>
</user-data-constraint>
  </security-constraint>
<login-config>
<auth-method>FORM</auth-method>
<form-login-config>
<form-login-page>/login.html</form-login-page>
<form-error-page>/login-failed.html</form-error-page>
</form-login-config>
</login-config>
</web-app>

Webアプリケーションを記述するHTMLページ(about.html)の作成

クラス名: src/main/webapp/about.html

Githubの場所: about.html

説明: about.htmlファイルには、HRアプリケーション、ユーザーおよび機能に関する情報が表示されます。

手順6: about.htmlをダウンロードして、アプリケーションで使用します。

ランディング・ページ(index.html)の作成と、リダイレクト用のページの定義

クラス名: src/main/webapp/index.html

Githubの場所: index.html

説明: index.htmlファイルは、HR Webアプリケーションに関するすべての詳細で構成されます。ユーザーおよび機能の詳細を説明します。

手順7: index.htmlのtitle、headおよびstylesheetの作成

手順8: リクエストをリダイレクトするHTMLページを呼び出す<body> の作成

7.index.htmlのtitle、headおよびstylesheetを作成する手順:

1. index.htmlファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Employee table listing</title>
<link rel="stylesheet" type="text/css" href="css/app.css" >
<style>
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
</style>
</head>
<body>

手順8: ボタンに対する<body>、リダイレクトおよびアクションを作成する手順:

1. ナビゲーション・リンクとログアウトを使用して、機能のアクションと<body>を作成します。
<body>
<div id="sideNav" class="sidenav">

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()" class="staff">×</a>
<a href="javascript:switchSrc('listAll.html')" class="staff">List All</a>
<a href="javascript:switchSrc('listById.html')" class="staff">Search By Id</a>

<a href="javascript:switchSrc('listByName.html')" class="manager">Update Employee Record</a>
<a href="javascript:switchSrc('incrementSalary.html')" class="manager">Increment Salary</a>
<a href="javascript:switchSrc('about.html')">About</a>
</div>
<div id="main">
<div align="right">
<div
id="myrole"
        style="display:inline; color:#393318; display: block; background-color:#eff0f1;position: absolute; top: 20px; right: 8%;"
    >myrole</div>
<a href="javascript:void(0)"
       onclick="logout()"
       class="staff"
       style="display: block; position: absolute; top: 20px; right: 1%">Logout</a>
</div>
<div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"> Java 2 Days HR Web Application		</span>
</div>
<div>
<iframe id="content"
src="about.html"
frameborder="0"
style="overflow:hidden; height:100%; width:100%"
height="100%"
width="100%"></iframe>
</div>
</div>
<script>
function openNav() {
  document.getElementById("sideNav").style.width = "256px";
  document.getElementById("main").style.marginLeft = "256px";
}

function closeNav() {
  document.getElementById("sideNav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

function switchSrc(src) {
  document.getElementById('content').src = src;
}

function logout() {

  var xmllogout = new XMLHttpRequest();
  xmllogout.open("GET", "WebController?logout=true", true, "_", "_");
  xmllogout.withCredentials = true;
  // Invlalid credentials to fake logout
  xmllogout.setRequestHeader("Authorization", "Basic 00001");
  xmllogout.send();

  xmllogout.onreadystatechange = function() {
    window.location.replace("index.html");
  }

 return true;
}

var xmlhttp = new XMLHttpRequest();
var url = "getrole";

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    role = xmlhttp.responseText;
    console.log("role: " +role);
    if (role == "staff") {
      console.log ("disabling manager");
      var x = document.getElementsByClassName('manager');
      for(i = 0; i < x.length; ++i) {
        x[i].style.display = 'none';
      }
    }
    document.getElementById('myrole').innerHTML = ' '+role+' ';
  }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
</body>

ログアウトを処理するコードのサーブレット(WebController.java)への追加

クラス名: src/main/java/com/oracle/jdbc/samples/web/WebController.java

Githubの場所: WebController.java

説明: このサーブレットは1日目の演習で作成しました。この手順では、ログアウトおよびログインを実装する関連コードを追加します。

手順9: ログ・アウト機能に対するメソッドprocessRequest(req, res) の更新

メソッド processRequest (req, res)を更新する手順:

1. これまでの手順で"ListAll"機能にメソッドを作成しました。この手順では、logout機能のコードを追加します。

2. 入力に基づいて呼び出す機能を検証するifブロックを作成します。入力値が'LOGOUT'であるかどうかを確認します。次に、関連するメソッドを呼び出してユーザーをログ・アウトします。

if ((value = request.getParameter(LOGOUT)) != null) {
/* Getting session and then invalidating it */

 HttpSession session = request.getSession(false);
if (request.isRequestedSessionIdValid() && session != null)   {
  session.invalidate();
}
handleLogOutResponse(request,response);
   response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
return;
} 

private void handleLogOutResponse(HttpServletRequest request,
HttpServletResponse response) {
    Cookie[] cookies = request.getCookies();
    for (Cookie cookie : cookies) {
      cookie.setMaxAge(0);
      cookie.setValue(null);
      cookie.setPath("/");
      response.addCookie(cookie);

    }
  }
3. すべてのカッコが正しく閉じられていることを確認します。