22.09.13. 오전 python 수업
2022. 9. 13. 20:11ㆍ카테고리 없음
비동기로 emp 홈페이지 만들기
- 첫 화면에 emp table의 list를 table로 출력할 것
- 하단의 빈 칸을 채운 뒤 '추가'를 누르면 insert가 될 것
- 성공 시 다시 빈 칸으로 만들 것. 실패 시에는 유지. - 상단 table의 사번을 클릭할 경우 하단의 표에 해당 사번의 정보가 빈 칸에 입력될 것.
- 3의 정보 중 사번을 제외한 다른 정보를 수정한 뒤 '수정' 버튼을 누를 경우 update 될 것.
- 3의 정보가 보여진 상태에서 '삭제' 버튼을 누를 경우 delete 될 것.
*emp.html*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><script src="static/js/jquery-3.6.1.js"></script>
<script type="text/javascript">
function mydelete(){
var param={
e_id : e_id.value
}
$.ajax({
type: "POST", //요청 메소드 방식
url:"emp_delete.ajax",
data: param,
dataType:"json", //서버가 요청 URL을 통해서 응답하는 내용의 타입
success : function(data){
console.log(param);
if(data.res==1){
alert('성공');
e_id.value="",
e_name.value="",
sex.value="",
addr.value=""
}else if(data.res!=1){
alert('실패');
}
console.log(data);
myselects();
}
});
}
function myupdate(){
var param={
e_id:e_id.value,
e_name: e_name.value,
sex: sex.value,
addr: addr.value
}
$.ajax({
type: "POST", //요청 메소드 방식
url:"emp_update.ajax",
data:param,
dataType:"json", //서버가 요청 URL을 통해서 응답하는 내용의 타입
success : function(data){
console.log(param);
if(data.res==1){
alert('성공');
e_id.value="",
e_name.value="",
sex.value="",
addr.value=""
}else if(data.res!=1){
alert('실패');
}
console.log(data);
myselects();
}
});
}
function myinsert(){
var param={
e_id:e_id.value,
e_name: e_name.value,
sex: sex.value,
addr: addr.value
}
$.ajax({
type: "POST", //요청 메소드 방식
url:"emp_insert.ajax",
data:param,
dataType:"json", //서버가 요청 URL을 통해서 응답하는 내용의 타입
success : function(data){
console.log(param);
if(data.res==1){
alert('성공');
e_id.value="",
e_name.value="",
sex.value="",
addr.value=""
}else if(data.res!=1){
alert('실패');
}
console.log(data);
myselects();
}
});
}
function myselects() {
$.ajax({
type: "GET", //요청 메소드 방식
url:"emp_list.ajax",
dataType:"json", //서버가 요청 URL을 통해서 응답하는 내용의 타입
success : function(data){
var list = data.list;
var txt="";
for(var i=0;i<list.length;i++){
var e_id=list[i].e_id;
var e_name=list[i].e_name;
var sex=list[i].sex;
var addr=list[i].addr;
txt+=`
<tr>
<td><a href="javascript:myselect('${e_id}')">${e_id}</a></td>
<td>${e_name}</td>
<td>${sex}</td>
<td>${addr}</td>
</tr>
`;
}
if(list.length==0){
txt=`
<tr>
<td colspan='4'>해당하는 데이터가 없습니다.</td>
</tr>
`;
}
$("#mytbody").html(txt);
},
});
}
function myselect(e_id){
var param = {e_id: e_id}
$.ajax({
type: "GET", //요청 메소드 방식
url:"emp_detail.ajax",
data: param,
dataType:"json", //서버가 요청 URL을 통해서 응답하는 내용의 타입
success : function(data){
var emp=data.emp;
$("#e_id").val(emp.e_id);
$("#e_name").val(emp.e_name);
$("#sex").val(emp.sex);
$("#addr").val(emp.addr);
console.log(data);
}
});
}
$(document).ready(function(){
myselects();
$("#btn1").bind("click",myinsert)
$("#btn2").bind("click",myupdate)
$("#btn3").bind("click",mydelete)
});
</script>
</head>
<body>
<table border='1'>
<thead>
<tr>
<td>사번</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td colspan='4'>해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table border='1'>
<tr>
<td>사번</td>
<td><input type="text" id="e_id"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" id="e_name"></td>
</tr>
<tr>
<td>성별</td>
<td><input type="text" id="sex"></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" id="addr"></td>
</tr>
<tr>
<td colspan='2'>
<input type="button" id='btn1' value="추가">
<input type="button" id="btn2" value="수정">
<input type="button" id="btn3" value="삭제">
</td>
</tr>
</table>
</body>
</html>*daoemp.py*
'''
Created on 2022. 9. 5.
@author: PC-02
'''
import pymysql
class DaoEmp:
def __init__(self):
self.con = pymysql.connect(host='127.0.0.1', user='root', password='python', db='python', charset='utf8',port=3305)
self.cur = self.con.cursor(pymysql.cursors.DictCursor)
def mylist(self):
sql = "select e_id, e_name, sex, addr from emp order by e_id"
self.cur.execute(sql)
mylist=self.cur.fetchall()
return mylist
def myone(self,e_id):
sql=f"select e_id, e_name, sex, addr from emp where e_id='{e_id}'"
self.cur.execute(sql)
emp = self.cur.fetchall()
return emp[0]
def myinsert(self, e_id, e_name, sex, addr):
sql=f"insert into emp (e_id, e_name, sex, addr) values({e_id}, {e_name}, {sex}, {addr})"
try:
cnt = self.cur.execute(sql)
self.con.commit()
except:
cnt=0
return cnt
def myupdate(self, e_id, e_name, sex, addr):
sql=f"update emp set e_name={e_name}, sex={sex}, addr={addr} where e_id={e_id}"
try:
cnt = self.cur.execute(sql)
self.con.commit()
except:
cnt=0
return cnt
def mydelete(self, e_id):
sql = f"delete from emp where e_id={e_id}"
cnt = self.cur.execute(sql)
self.con.commit()
return cnt
def __del__(self):
self.cur.close()
self.con.close()
if __name__ == '__main__':
de= DaoEmp()
cnt = de.mydelete('4')
print("cnt",cnt)*views.py*
from django.http.response import HttpResponse, JsonResponse
from django.shortcuts import render
from SPA_EMP.daoemp import DaoEmp
from django.views.decorators.csrf import csrf_exempt
def emp(request):
return render(request, "emp.html")
def emp_list_ajax(request):
de = DaoEmp()
list = de.mylist()
context = {
'list':list,
}
return JsonResponse(context)
def emp_detail_ajax(request):
e_id = request.GET.get('e_id','000')
de = DaoEmp()
emp = de.myone(e_id)
context = {
'emp':emp,
}
return JsonResponse(context)
@csrf_exempt
def emp_insert_ajax(request):
e_id = request.POST['e_id']
e_name = request.POST['e_name']
sex = request.POST['sex']
addr = request.POST['addr']
print(e_id, e_name, sex, addr)
de = DaoEmp()
res = de.myinsert(e_id, e_name, sex, addr)
context = {
'res':res,
}
return JsonResponse(context)
@csrf_exempt
def emp_update_ajax(request):
e_id = request.POST['e_id']
e_name = request.POST['e_name']
sex = request.POST['sex']
addr = request.POST['addr']
print(e_id, e_name, sex, addr)
de = DaoEmp()
res = de.myupdate(e_id, e_name, sex, addr)
context = {
'res':res,
}
return JsonResponse(context)
@csrf_exempt
def emp_delete_ajax(request):
e_id = request.POST['e_id']
print(e_id)
de = DaoEmp()
res = de.mydelete(e_id)
context = {
'res':res,
}
return JsonResponse(context)*urls.py*
from django.urls import path
from SPA_EMP import views
urlpatterns = [
path('emp_list.ajax', views.emp_list_ajax),
path('emp_detail.ajax', views.emp_detail_ajax),
path('emp_insert.ajax', views.emp_insert_ajax),
path('emp_update.ajax', views.emp_update_ajax),
path('emp_delete.ajax', views.emp_delete_ajax),
]+settings.py의 INSTALLED_APPS=[ ] 안에 어플리케이션? 이름 넣어줄 것~
테트리스 만들기 준비~
기준점이 있는 상태에서 방향키를 눌렀을 때, 해당 기준점이 이동되게 만들기. 기준점은 빨간색이 칠해진다.
<html>
<head>
<title>테트리스</title>
<style type="text/css">
td{
width: 20px;
height: 20px;
}
</style>
<script type="text/javascript">
//수직
var i = 4;
//수평
var j = 3;
function myrender(){
x=document.querySelectorAll('td');
cnt = (i*10)+j;
x[cnt].style.backgroundColor='red';
}
window.addEventListener("keydown", function(e){
console.log(e.keyCode);
x[cnt].style.backgroundColor='transparent';
if(e.keyCode==37){
j=j-1;
}else if(e.keyCode==38){
i=i-1;
}else if(e.keyCode==39){
j=j+1;
}else if(e.keyCode==40){
i=i+1;
}
myrender();
});
</script>
</head>
<body onload='myrender()'>
<table border="1px">
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>