Computer/공부정리

230314_include 폴더, 로그인 화면(입력, 확인), DB 준비

이르리의 공부일지 2023. 3. 14. 14:59

 

 

 

메모
1 포함시킨다 개념 2가지

-include: 소스 자체가 include한 부분에 포함되는 것
-import: 갔다 오는 개념, 페이지로 가서 실행한 결과만 웹 화면에 보여준다.


* include
: 코드 포함시키기
- 쓰는 이유: 페이지 수정요소 무한~

- 공통된 영역을 따로 관리(html 파일 따로 include 폴더에 저장)
- 유지보수성이 뛰어남(→개발 효율성)

>include 폴더<
html 파일 생성 후 그 안에 

<h3></h3>
<p></p>
<pre></pre>
같이 text 계열

혹은 

<a href=""></a>
link 계열
2 클래스
-특정 기능 X 특정 형태 O(자세한 형태X, 자세한 data는 사용자가 입력해서 씀)

-함수처럼 기능성, 유지보수성, 재사용성, 편의성 뿐 아니라
 전역변수로 쓸 수 있는 외부참조성 때문
 한 군데에서 데이터 관리하고 원하는 부분을 바꿔쓰도록 공유성 좋음

-멤버변수, 멤버함수
3 index 화면 링크
/
: 도메인까지 입력하겠다.
/index
:도메인
4 입력값 전송방식 2가지(get, post) 
- get : 외부 전송, 보안 프로그램 따로 돈다
- post : 내부 전송, 보안상 필요한 게 있음, python 에서 제공하는 보안옵션 CSRF 검증 키워드 넣어야 함, 안 넣을 시 에러
5 보안 관련

서버영역 저장-세션

개인 저장공간에 저장-쿠키

*쿠키는 함부로 ok 하지 말기, 내 개인공간에 변조 data를 심을 수도

 

 

 

 

 

로그인 화면 웹 서버에 구현
1 index html파일 생성
  >templates\firstapp 하위
1)index.html 생성
2)include 폴더 생성
  >include 폴더 하위
1)<h3></h3> 혹은 <p></p> 혹은 <a href=''></a>
안에 들어갈 내용 
html 파일로 만들어서 넣어두기
  >templates\firstapp 하위

index.html에서 include 폴더에 넣은 파일 내용들 
{%include '[파일경로]'%}
파일 경로 ex. firstapp/nav.html
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::: 수연닷컴 :::</title>
</head>
<body>
    <!-- 제목 -->
    <h3>{% include 'firstapp/include/top.html' %}</h3>
    <hr/>
    <!-- 네비게이션 -->
    <p>{%include 'firstapp/include/nav.html'%}</p>
    <hr/>

    <!-- 페이지 메인 내용 -->
    <p>
        <b>이곳은 메뉴별 메인 내용이 들어가는 곳입니다.</b>
    </p>
    <hr/>
    <!-- 하단 -->
    <pre>{%include 'firstapp/include/bottom.html'%}</pre>
</body>
</html>
2 include 폴더
 
 
  >templates\firstapp\9day 폴더 생성 후

그 안에 

로그인 파일(form, chk 파일) 생성
3 login_form.html 파일 생성
  로그인 입력폼 html 작성
 
<form id="fm" name="fm" method="post" action="#">
            {%csrf_token%}
            아이디 : <input type='text' name='mem_id' value="" placeholder="id" required><br/>
            패스워드 : <input type="password" name='mem_pw' value="" placeholder="pw" required><hr/>
            <br/>
            <button onclick='goLogin()'>로그인</button>
</form>
 
로그인 함수
 
<script type="text/javascript">
        <!-- 로그인 체크 -->
        function goLogin(){
            var fm=document.getElementById("fm");
            if (fm.mem_id.value==""){
                alert('아이디 입력해!')
                fm.mem_id.focus();
                return;
            }
            if (fm.mem_pw.value==""){
                alert('비번 입력해!')
                fm.mem_pw.focus();
                return;
            }

            alert(fm.mem_id.value);
            alert(fm.mem_pw.value);

            fm.action="/first/login_chk/";
            fm.submit();
        }
    </script>
추가 설명 - fm 변수에 id가 fm인 태그 값 가져와서 담는다.
-.focus() 커서를 id가 mem_id, mem_pw인 태그에 이동시킨다.
-.action은 앞 뒤로 //해준다.
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>::: 수연닷컴 :::</title>

    <script type="text/javascript">
        <!-- 로그인 체크 -->
        function goLogin(){
            var fm=document.getElementById("fm");
            if (fm.mem_id.value==""){
                alert('아이디 입력해!')
                fm.mem_id.focus();
                return;
            }
            if (fm.mem_pw.value==""){
                alert('비번 입력해!')
                fm.mem_pw.focus();
                return;
            }

            alert(fm.mem_id.value);
            alert(fm.mem_pw.value);

            fm.action="/first/login_chk/";
            fm.submit();
        }
    </script>
</head>
<body>
    <!-- 제목 -->
    <h3>{% include 'firstapp/include/top.html' %}</h3>
    <hr/>
    <!-- 네비게이션 -->
    <p>{%include 'firstapp/include/nav.html'%}</p>
    <hr/>

    <!-- 페이지 메인 내용 -->
    <!-- method : get, post 2가지 방식
            get : url 주소에 전송되는 key/value가 보임
            post : 안 보임 -->
    <!-- action :  -->
    <p>
        <h3>회원 로그인</h3>
        (아이디, 패스워드 입력 페이지)<hr/>
        <!-- 전송 데이터의 보안을 위해 csrf 보안 키 옵션 제시
        form 태그 사용할 시 무조건 제시(사용 안 해도 제시하자) -->
        <form id="fm" name="fm" method="post" action="#">
            {%csrf_token%}
            아이디 : <input type='text' name='mem_id' value="" placeholder="id" required><br/>
            패스워드 : <input type="password" name='mem_pw' value="" placeholder="pw" required><hr/>
            <br/>
            <button onclick='goLogin()'>로그인</button>
        </form>
    </p>
    <hr/>
    <!-- 하단 -->
    <pre>{%include 'firstapp/include/bottom.html'%}</pre>
</body>
</html>
  login_ok.html 파일 생성
  출력html 작성
 
<p>
        <h3>회원 로그인</h3>
        (아이디, 패스워드 입력 페이지)<hr/>
        아이디 :{{mem_id}}
        <br/>
        패스워드 : {{mem_pw}}
    </p>
추가 설명 - 입력폼에서 입력된 정보 출력은 {{}}
- 웹 서버에서 정보는 항상 dict 형
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>::: 수연닷컴 :::</title>

    <script type="text/javascript">
        <!-- 로그인 체크 -->
        function goLogin(){
            var fm=document.getElementById("fm");
            if (fm.mem_id.value==""){
                alert('아이디 입력해!')
                fm.mem_id.focus();
                return;
            }
            if (fm.mem_pw.value==""){
                alert('비번 입력해!')
                fm.mem_pw.focus();
                return;
            }

            alert(fm.mem_id.value);
            alert(fm.mem_pw.value);

            fm.action="/first/login_chk/";
            fm.submit();
        }
    </script>
</head>
<body>
    <!-- 제목 -->
    <h3>{% include 'firstapp/include/top.html' %}</h3>
    <hr/>
    <!-- 네비게이션 -->
    <p>{%include 'firstapp/include/nav.html'%}</p>
    <hr/>
    <p>
        <h3>회원 로그인</h3>
        (아이디, 패스워드 입력 페이지)<hr/>
        아이디 :{{mem_id}}
        <br/>
        패스워드 : {{mem_pw}}
    </p>
    <!-- 하단 -->
    <pre>{%include 'firstapp/include/bottom.html'%}</pre>
</body>
</html>

 

 

 

 

 

DB 및 DB 서버 설치
오라클 설치 -기존 11g 삭제
∵ 파이썬 3.7 이상은 연동 안 됨

[삭제 방법]
: 쥐잡듯이 뒤져서 다 지워버린다.

 * C드라이브>app, program files, programdata,...ORACLE 관련 파일 모두 삭제 
 * 시스템 환경변수>ORACLE 관련 PATH 모두 삭제
 * 윈도>service>ORACLE 관련 파일 모두 삭제


-21c 설치
XE(Express 버전) 설치 <-->Enterprise 버전
SQLDeveloper 설치 -기존 서버 있나 확인
   
MySQL 설치 -8.0 버전 설치
∵ 8.0까지가 무료

-깔고 workbench 파일 있으면 완료된 것임.
HeidiSQL 설치 -기존 편집기 있나 확인

 

DB 서버 사용자 생성
오라클 -SQLDeveloper 기존 madang 계정 삭제

-새 접속(계정) 생성

name: system

사용자 : system

비밀번호 : dbdb

테스트--> 완료-->저장, 접속
  <ORACLE 사용자명 C##없이 쓰기>

ALTER SESSION SET "_ORACLE_SCRIPT"=TRUE;


<ORACLE 사용자 생성하기>

CREATE USER gwangju_b IDENTIFIED BY dbdb;


- 사용자 비밀번호 변경 시

AFTER USER gwangju_b IDENTIFIED BT 변경 PW;


- 사용자 삭제하기

drop user gwangju_b;



<oracle 접근권한 부여하기>

Grant Connect, Resource, DBA To gwangju_b;


- 권한 회수하기(회수하고자 하는 권한을 REVOKE 뒤에 작성)

Revoke DBA From gwangju_b;


<ORACLE 새 접속 생성>
새 접속 하여 프로젝트명, 이름, 비밀번호 설정 후
테스트=>접속
완료!
MySQL 또는 MariaDB <mysql or mariadb 공통>

*사용자 만들기

create user gwangju_b@localhost identified by 'dbdb';


* 데이터베이스 생성하기

 create database gwangju_b;


* 권한 부여하기

Grant All Privileges On *.* to 'gwangju_b'@'localhost';


*메모리 반영시키기

Flush Privileges;