*저번까지 코드
#!/usr/local/bin/python3
print("Content-Type: text/html")
print()
print("""<!doctype html>
<html>
<head>
<title>WEB1-WEB</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.py">WEB</a></h1>
<ol>
<li><a href="css">CSS</a></li>
<li><a href="html">HTML</a></li>
</ol>
</body>
</html>
""")
1. 웹페이지 동적 구현
우리는 현재 웹페이지를 동적으로 구현하고 싶다. 현재 코드에서는 CSS 링크를 누르면 CSS 웹페이지로 이동하는 구조로 되어 있다. 이를 타 웹페이지로의 이동 없이 현재 페이지 내에서 특정 링크에 들어있는 내용을 불러오고 싶다는(=웹페이지 동적 구현) 말이다. 이를 위해서는 특정 내용을 URL을 통해 불러오는 Querystring을 이용한다.
<ol> 태그 하위에 있는 li 태그를 보자. 현재는 "CSS", "HTML"이라는 특정 링크로 이동하게끔 되어 있다. 이를 현재 index.py 하위에 링크를 불러오려면 id값을 이용해 아래와 같이 코드를 짠다.
#!/usr/local/bin/python3
print("Content-Type: text/html")
print()
print("""<!doctype html>
<html>
<head>
<title>WEB1-WEB</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.py">WEB</a></h1>
<ol>
<li><a href="index.py?id=css">CSS</a></li>
<li><a href="index.py?id=html">HTML</a></li>
</ol>
<h2>Welcome</h2>
<p>Lorem ipsum</p>
</body>
</html>
""")이렇게 하고 변경된 웹페이지를 보자.
코드를 짠 상태에서 클릭해보면 페이지 이동 없이 링크만 달라지는 것을 볼 수 있다.(Index 페이지에는 Lorem 내용이 없는데 캡쳐가 짤려서..)
하지만 <h2> 태그 및 아래 내용이 바뀌지 않는다..! 먼저 Welcome을 각 링크의 제목으로 바꿔보자. 이때부터 cgi 모듈이 필요해진다. (자세한 내용은 cgi document를 참고!)
2. title 값에 pageId 부여
cgi 모듈을 import한 뒤, cgi 내 메소드인 FieldStorage()를 이용하면 cgi 모듈에 저장되는 form data를 불러올 수 있다.
현재 목적은 각 웹페이지의 id를 <h2> 태그에 동적으로 넣고 싶은 것이니 먼저 각 웹페이지의 id value를 가져온다.
#!/usr/local/bin/python3
print("Content-Type: text/html")
print()
import cgi # id로 지정해놓은 애들을 불러와야 될 것 아니냐!
form = cgi.FieldStorage() #cgi 모듈 내 FieldStorage 메소드 불러오기
pageId = form["id"].value #각 웹페이지 id = form 내 "id" attribute에 value값으로 저장 =>
#이를 pageId라는 변수로 불러온다!
print("""<!doctype html>
<html>
<head>
<title>WEB1-WEB</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.py">WEB</a></h1>
<ol>
<li><a href="index.py?id=css">css</a></li>
<li><a href="index.py?id=html">HTML</a></li>
</ol>
<h2>{title}</h2>
<p>Lorem ipsum</p>
</body>
</html>
""".format(title=pageId))이렇게 하면 실행이 잘 된..것 같은데 문제가 생겼다. CSS, HTML과 같은 하위 페이지는 잘 열리지만 정작 상위 페이지인 index.py의 경우는 id값이 부여되어 있지 않아 페이지가 하얗게 뜬다. 어떻게 해결하면 좋을까? id가 있을 때와 없을 때 각 조건에 맞게 페이지를 열라고 명령하면 되니 조건문을 사용해 id value가 있을 때와 없을 때를 구별한다.
#!/usr/local/bin/python3
print("Content-Type: text/html")
print()
import cgi
form = cgi.FieldStorage()
#조건문 작성하기
if "id" in form: #Query String Parameters에 "Id"가 있니 없니? 확인
pageId = form["id"].value
else:
pageId = "welcome" #index.py에서는 id 값이 없으니 아래 title parameter에 넣을 인자로 welcome을 써라!
print("""<!doctype html>
<html>
<head>
<title>WEB1-WEB</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.py">WEB</a></h1>
<ol>
<li><a href="index.py?id=css">css</a></li>
<li><a href="index.py?id=html">HTML</a></li>
</ol>
<h2>{title}</h2>
<p>Lorem ipsum</p>
</body>
</html>
""".format(title=pageId))
이러면 페이지가 원활하게 돌아간다!
내용 동적 구현
이번에는 <h2> 태그 뿐만 아니라 아래 <p> 태그에서도 각 웹페이지에 맞게 내용이 바뀌게끔 하고 싶다. 그러면 현재 <p> 태그 안에 들어있는 콘텐츠인 Lorem ipsum 대신 CSS, HTML 페이지 안에 있는 내용값을 불러와야겠지?
먼저, 현재 작업하고 있는 디렉토리 하위에 각 웹페이지에 대한 데이터만 따로 보관할 수 있게 'data' 디렉토리를 만든다. 그 후, data 디렉토리 내에 CSS, HTML 파일을 옮긴다.
os 상에서 각 파일을 불러오려면 어떻게 해야 할까? 일단 디렉토리 내 파일 id를 확인해야 하니 os 모듈을 import한 후, 각 파일 내용을 불러오면(=open) 되지 않을까? 이를 위해 built-in function인 open을 사용한다. (python file read를 검색하면 바로 open 함수에 대한 설명을 확인 가능!)
#!/usr/local/bin/python3
print("Content-Type: text/html")
print()
import cgi, os #os 불러오기
form = cgi.FieldStorage()
if "id" in form:
pageId = form["id"].value
description = open('data/'+pageId, 'r').read() #/data 디렉토리 내 pageId 이름 가진 파일을 읽기 전용으로 불러와서 읽어라(=read())는 뜻!
else:
pageId = "welcome"
description = "" #index 페이지에서는 내용 없으니 생략
print("""<!doctype html>
<html>
<head>
<title>WEB1-WEB</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.py">WEB</a></h1>
<ol>
<li><a href="index.py?id=css">css</a></li>
<li><a href="index.py?id=html">HTML</a></li>
</ol>
<h2>{title}</h2>
<p>{description}</p>
</body>
</html>
""".format(title=pageId, description = description))
'개발 강의' 카테고리의 다른 글
| 생활코딩 - 파이썬 웹 개발 복습 1(CGI로 홈페이지 구현) (0) | 2021.09.06 |
|---|