🌊
【初心者向け/ITスクール52日】4日間の掲示板プロジェクト
はじめに
今日は、ITスクールに通った52日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。
52日目は、ログインした会員が投稿をし、直接DBと連携する練習をしました。
大ピンチ
プロジェクトをもう一度復習したいと考え、複製したのですが、なぜか以前のプロジェクトが使えなくなりました。
今日は、先生にコードをもらうことにし、復旧に全力を注ぎました。くやしい！！！
レイアウト
レイアウトの割合
先生から、要求されたことはLogin画面もしくは結果がつねにindexページにincludeされることでした。しかし、gridでfrにサイズを決め、inputのitemが崩れてしまうため、まだその問題はしっかり解決できなかったです！
こちらもしっかり勉強してみたいです！flexboxの場合、このように崩れることをコントロールすることがとても難しいと考えました。
まずはmin-width, min-lengthを使ってみて、ログイン画面が崩れることは防ぎましたが、それに力を入れすぎ、機能の具象ができなかった！
gridにリンク挿入
最初はgridの仕組みを理解できず、小要素のgrid-itemに<a>タグを入れた結果、レイアウトが崩れました。そのため、考えた結果、JSを活用し、grid-containerをクリックすえば、Controllerを呼び出すように設定しました。
<script type="text/javascript" src="js/go.js"></script>
<title>홈페이지</title>
</head>
<body>
<div class="grid-container">
<header class="grid-header" onclick="goHome()">
<h1 class="index-header__title">제리캣과 공부하는 CRUD😸</h1>
</header>
<nav class="grid-nav">
게시판
</nav>
<main class="grid-main">
<jsp:include page="${cp}"></jsp:include>
</main>
<aside class="grid-aside">
<div class="login-container">
<jsp:include page="${lp}"></jsp:include>
</div>
</aside>
<section>
</section>
</div>
${r }
</body>
function goHome(){
location.href="HomeController";
}
会員登録
Validation Check
誤字とかもなかったのですが、なぜかずっとalertまでは入り、値を渡せない場合がとても多かったので、こちらを注意したいと思います。先生をコードを見た結果、まず、一つのメッソドを呼び出す際に違うフォームの名前から値を得ること、変数もロカールにすること、** if else if で一つのメソッドを繋ぐこと**が大事だと考えました。
昨日は、なぜか原因を把握することはできませんが、js内にlet、constを宣言し、まだ使ってないメソッドに全域変数が入ってから何かを衝突があったのでかなと思いますので、こちらは
先生の通りコードを組み、無駄を減らしたいです。
2時間もったいない！！
Template
//0,NaN,Null,Undefined,""
function isEmpty(input) {
return (!input.value);
}
//韓国語/特殊文字があれば true, なければfalse
function containsAnother(input) {
let pass = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@_.";
let iv = input.value;
for (let i = 0; i < iv.length; i++) {
if (pass.indexOf(iv[i]) == -1) {
return true;
}
}
return false;
}
function atLeastLetter(input, len) {
return (input.value.length < len);
}
function notEqualPw(input1, input2) {
return (input1.value != input2.value);
}
指定した文字列がなければtrue、あればfalse
function notContain(input, passSet) {
let iv = input.value;
for (let i = 0; i < passSet.length; i++) {
if (iv.indexOf(passSet[i]) != -1) {
return false;
}
}
return true;
}
function isNotNumber(input) {
return isNaN(input.value);
}
function isNotType(input, type) {
// .gif, .png ...
type = "." + type;
return (input.value.indexOf(type) == -1);
}
function checkSignUpValid() {
let m_id = document.signUpForm.m_id;
let m_pw = document.signUpForm.m_pw;
let m_pw2 = document.signUpForm.m_pw2;
let m_name = document.signUpForm.m_name;
let m_phone = document.signUpForm.m_phone;
let m_photo = document.signUpForm.m_photo;
if (isEmpty(m_id) || containsAnother(m_id)) {
alert("Please Fill in ID Properly.");
m_id.value = "";
m_id.focus();
return false;
} else if (isEmpty(m_pw) || notEqualPw(m_pw, m_pw2)) {
alert("Please Fill in Password Properly.");
m_pw.value = "";
m_pw2.value = "";
m_pw.focus();
return false;
} else if(isEmpty(m_name)) {
alert("Please Fill in Name Properly.");
m_name.value = "";
m_name.focus();
return false;
} else if (isEmpty(m_phone) || isNotNumber(m_phone)) {
alert("Please Fill in Phone Number Properly.");
m_phone.value = "";
m_phone.focus();
return false;
} else if (isEmpty(m_photo) || (isNotType(m_photo, "png")
&& isNotType(m_photo, "gif") && isNotType(m_photo, "webp")
&& isNotType(m_photo, "png") && isNotType(m_photo, "jpeg"))) {
alert("Please Fill in Photo Properly.");
m_photo.value = "";
m_photo.focus();
return false;
}
return true;
}
会員情報登録
単純に機能の具象のみ考えたのですが、先生はDBにある写真の処理まで視野に入れたので、
相当長いコードでした。
要するにエンコーディングとデコーディングの時点が大事でした。
DBに入れたり、POSTで送る際にはファイル名をUTF-8に変更して保存し、Fileを削除したり、Readしたり、Sessionに登録する際には、パソコンにある人間の言語になっているファイル名を
Decodeします。正確には変数を最初にEncodeして呼び出すので、わざわざデコーディングすることが本当に難しいかったです！
以前Fileクラスとリフレクションについて勉強した記憶があるので、もう一度時間があれば、Javaも勉強したいです。
public static void update(HttpServletRequest req) {
String path = null;
MultipartRequest mr = null;
Member m = (Member)req.getSession().getAttribute("img");
String old_m_photo = m.getM_photo();
String new_m_photo = null;
try {
path=req.getServletContext().getRealPath("img");
System.out.println(path);
mr= new MultipartRequest(req, path,1024*1024*10,"UTF-8",
new DefaultFileRenamePolicy());
new_m_photo = mr.getFilesystemName("m_photo");
if(new_m_photo != null) {
new_m_photo = URLEncoder.encode(new_m_photo, "UTF-8");
}else {
new_m_photo = old_m_photo;
}
}catch(Exception e) {
e.printStackTrace(); // NullPointer는 여기서 뜨는게 아님!!!!
System.out.println("파일용량...");
return;
}
Connection con = null;
PreparedStatement pstmt = null;
try {
con = MemberDBManager.connect("hyonPool");
String m_id = mr.getParameter("m_id");
String m_pw = mr.getParameter("m_pw");
String m_name = mr.getParameter("m_name");
String m_phone = mr.getParameter("m_phone");
String y = mr.getParameter("m_birthYear");
int m_m = Integer.parseInt(mr.getParameter("m_birthMonth"));
int d = Integer.parseInt(mr.getParameter("m_birthDay"));
String m_birthday = String.format("%s%02d%02d", y,m_m,d);
String sql = "update sns_member set m_pw=?, m_name=?, m_phone=?, "
+ "m_birthday=to_date(?, 'YYYYMMDD'), m_photo=? where m_id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, m_pw);
pstmt.setString(2, m_name);
pstmt.setString(3, m_phone);
pstmt.setString(4, m_birthday);
pstmt.setString(5, new_m_photo);
pstmt.setString(6, m_id);
if (pstmt.executeUpdate() == 1) {
req.setAttribute("r", "<script>alert('정보가 수정 되었습니다.');</script>");
if (!new_m_photo.equals(old_m_photo)) {
// 프사를 바꿨으면 기존 사진파일 지우기
new File(path + "/" + URLDecoder.decode(old_m_photo, "UTF-8")).delete();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
m = new Member(m_id, m_pw, m_name, m_phone, sdf.parse(m_birthday),
URLDecoder.decode(new_m_photo, "UTF-8"));
req.getSession().setAttribute("loginMember", m);
}else {
req.setAttribute("r", "<script>alert('정보 수정에 실패했습니다.');</script>");
if (!new_m_photo.equals(old_m_photo)) {
new File(path + "/" + URLDecoder.decode(new_m_photo, "UTF-8")).delete();
}
}
}catch(Exception e) {
e.printStackTrace();
req.setAttribute("r", "<script>alert('다시 시도해주세요.');</script>");
if(!new_m_photo.equals(old_m_photo)){
try {
new File(path + "/" + URLEncoder.encode(new_m_photo,"UTF-8")).delete();
}catch (UnsupportedEncodingException e1) {
e1.printStackTrace();
}
}
}
finally {
MemberDBManager.close(con, pstmt, null);
}
}//Update()
Discussion