Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

231110_Django 개론 3 본문

대덕인재개발원/대덕인재개발원_파이썬 프로그래밍

231110_Django 개론 3

Unlimited00 2023. 11. 10. 08:35

* 어제 했던 방식은 MVC 패턴.

* MVVM 패턴. jsp 걷어내고 다 ajax와 같은 비동기 방식 패턴으로 나감.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'HELLO_MVVM',
]
from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.views.decorators.csrf import csrf_exempt
import pymysql # PyMySQL-1.1.0

def index(request):
    return render(request, "index.html")
"""
URL configuration for HELLO_MVVM project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from HELLO_MVVM import views

urlpatterns = [
    path('', views.index),
]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>INDEX</title>
	</head>
	<body>
		INDEX
	</body>
</html>

https://okeybox.tistory.com/329

 

[Django] 스태틱(static) 폴더로 css, js적용하기 (정적인 파일 관리하기)

안녕하세요 성조입니다. 이번 포스팅에서는 스태틱(static) 폴더를 만들고 css, js, img 파일 등 정적인 파일들을 가져와서 html에 적용시켜 동작할 수 있도록 만들어보려 합니다. 정적인 파일들은 값

okeybox.tistory.com

[js01.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS01</title>
		<script type="text/javascript">
			function goodEvening(){
				var mydiv = document.getElementById("mydiv");
				mydiv.innerHTML = "Good Evening";
			}
		</script>
	</head>
	<body>
		JS01
		<div id="mydiv">Good Morning</div>
		<button type="button" onclick="goodEvening()">click</button>
	</body>
</html>

- http://127.0.0.1:8000/static/js01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS01</title>
		<script type="text/javascript">
			var token = 0;
			function myclick(){
				//console.log("myclick");
				var obj = document.getElementById("mydiv");
				if(token == 0) {
					//obj.innerHTML = "Good Evening";
					obj.innerText = "Good Evening";
					obj.style.backgroundColor = "red";
					obj.style.color = "white";
					token = 1;
				}else {
					//obj.innerHTML = "Good Morning";
					obj.innerText = "Good Morning";
					obj.style.backgroundColor = "blue";
					obj.style.color = "white";
					token = 0;
				}
			}
		</script>
	</head>
	<body>
		JS01
		<div id="mydiv">Good Morning</div>
		<button type="button" onclick="myclick()">click</button>
	</body>
</html>

[js02.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS02</title>
		<script type="text/javascript">
			function myclick(){
				//console.log("myclick");
				var obj_a = document.getElementsByName("ita")[0].value;
				var obj_b = document.getElementsByName("itb")[0].value;
				var obj_c = document.getElementsByName("itc")[0];
				var int_a = parseInt(obj_a);
				var int_b = parseInt(obj_b);
				var res = int_a + int_b;
				obj_c.value = res;
			}
		</script>
		<style>
			input {
				width: 50px;
			}
		</style>
	</head>
	<body>
		JS02
		<br />
		<input type="text" name="ita" /> 
		+ 
		<input type="text" name="itb" />
		<button type="button" onclick="myclick()">=</button>
		<input type="text" name="itc" readonly />
	</body>
</html>

- http://127.0.0.1:8000/static/js02.html

[js03.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS03</title>
		<script type="text/javascript">
			function myclick(){
				//console.log("myclick");
				var obj_select = document.getElementsByClassName("mysel")[0].value;
				var obj_ta = document.getElementById("myta");
				
				var int_select = parseInt(obj_select);
				//console.log(int_select);
				
				var gugudan_txt = "";
				
				//gugudan_txt += "2*1=2\n";
				//gugudan_txt += "2*2=4\n";
				
				gugudan_txt += int_select + "*" + 1 + "=" + (int_select * 1) + "\n";
				gugudan_txt += int_select + "*" + 2 + "=" + (int_select * 2) + "\n";
				gugudan_txt += int_select + "*" + 3 + "=" + (int_select * 3) + "\n";
				gugudan_txt += int_select + "*" + 4 + "=" + (int_select * 4) + "\n";
				gugudan_txt += int_select + "*" + 5 + "=" + (int_select * 5) + "\n";
				gugudan_txt += int_select + "*" + 6 + "=" + (int_select * 6) + "\n";
				gugudan_txt += int_select + "*" + 7 + "=" + (int_select * 7) + "\n";
				gugudan_txt += int_select + "*" + 8 + "=" + (int_select * 8) + "\n";
				gugudan_txt += int_select + "*" + 9 + "=" + (int_select * 9) + "\n";
				
				/* for(var i = 1; i <= 9; i++) {
					//console.log(myselInt + "*" + i + "=" + (myselInt * i) + "\n");
					gugudan_txt += int_select + "*" + i + "=" + (int_select * i) + "\n";
				} */
				
				obj_ta.value = gugudan_txt;
			}
		</script>
	</head>
	<body>
		JS03
		<table border="1">
			<tr>
				<td>출력단수</td>
				<td>
					<select class="mysel" onchange="myclick()">
						<option value="2">2단</option>
						<option value="3">3단</option>
						<option value="4">4단</option>
						<option value="5">5단</option>
						<option value="6">6단</option>
						<option value="7">7단</option>
						<option value="8">8단</option>
						<option value="9">9단</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="button" onclick="myclick()">출력하기</button>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<textarea id="myta" rows="10" cols="10"></textarea>
				</td>
			</tr>
		</table>
	</body>
</html>

- http://127.0.0.1:8000/static/js03.html

[js04.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS04</title>
		<script type="text/javascript">
			function getStar(cnt){
				ret = "";
				for(var i = 0; i < cnt; i++) {
					ret += "☆";
				}
				return ret;
			}
		
			function myclick(){
				//console.log("myclick");
				var obj_it_first = document.getElementById("it_first");
				var obj_it_last = document.getElementById("it_last");
				var obj_mydiv = document.getElementById("mydiv");
				
				var int_it_first = parseInt(obj_it_first.value);
				var int_it_last = parseInt(obj_it_last.value);
				
				//console.log(int_it_first, int_it_last);
				
				// 수학적 규칙이 나오게 만들어라!
				/* var html = "";
				
				html += "*<br />";
				html += "**<br />";
				
				html += getStar(1);
				html += getStar(2);
				
				obj_mydiv.innerHTML = html; */
				
				var star_txt = "";
				for(var i = int_it_first; i <= int_it_last; i++) {
					star_txt += getStar(i) + "<br />";
				}
				//console.log(star_txt);
				obj_mydiv.innerHTML = star_txt;
			}
		</script>
		<style type="text/css">
			input[type=text] {
				width: 50px;
			}
			table {
				width: 300px;
			}
			#mydiv {
				height: 500px;
			}
		</style>
	</head>
	<body>
		JS04
		<table border="1">
			<colgroup>
				<col width="30%" />
				<col width="70%" />
			</colgroup>
			<tr>
				<td>시작별수 : </td>
				<td>
					<input type="text" id="it_first" />
				</td>
			</tr>
			<tr>
				<td>끝별수 : </td>
				<td>
					<input type="text" id="it_last" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="출력하기" onclick="myclick()" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="mydiv"></div>
				</td>
			</tr>
		</table>
	</body>
</html>

- http://127.0.0.1:8000/static/js04.html

[js05.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS05</title>
		<script type="text/javascript">
			function myclick(){
				var objs = document.getElementsByClassName("myspan");
				
				//console.log("myclick");
				var arr = new Array();
				for(var i = 1; i <= 45; i++) {
					arr.push(i);
				}
				//console.log(arr);
				for(var i = 0; i < 1000; i++) {
					//var rnd = Math.floor((Math.random() * 45));
					var rnd = parseInt(Math.random() * 45);
					//console.log(rnd);
					var temp = arr[0];
					arr[0] = arr[rnd];
					arr[rnd] = temp;
				}
				objs[0].innerText = arr[0];
				objs[1].innerText = arr[1];
				objs[2].innerText = arr[2];
				objs[3].innerText = arr[3];
				objs[4].innerText = arr[4];
				objs[5].innerText = arr[5];
			}
		</script>
	</head>
	<body>
		JS05
		<table border="1">
			<tr>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
			</tr>
			<tr>
				<td colspan="6">
					<button type="button" onclick="myclick()">CLICK</button>
				</td>
			</tr>
		</table>
	</body>
</html>

- http://127.0.0.1:8000/static/js05.html

[day10.mysort]

arr = [4,5,3,2,1]

# Bubble Sort
# 3 + 2 + 1 = 6번 이상 돌리면 됨
# i = 3, j = 3

for i in range(5):
    for j in range(5):
        if arr[i] < arr[j]:
            a = arr[i]
            b = arr[j]
            arr[i] = b
            arr[j] = a
            
print(arr)

[js05.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS05</title>
		<script type="text/javascript">
			function myclick(){
				var objs = document.getElementsByClassName("myspan");
				
				//console.log("myclick");
				var arr = new Array();
				for(var i = 1; i <= 45; i++) {
					arr.push(i);
				}
				//console.log(arr);
				for(var i = 0; i < 1000; i++) {
					//var rnd = Math.floor((Math.random() * 45));
					var rnd = parseInt(Math.random() * 45);
					//console.log(rnd);
					var temp = arr[0];
					arr[0] = arr[rnd];
					arr[rnd] = temp;
				}
				for(var i = 0; i < 6; i++) {
					for(var j = 0; j < 6; j++) {
						if(arr[i] < arr[j]) {
							var a = arr[i]
				            var b = arr[j]
				            arr[i] = b
				            arr[j] = a
						}
					}
				}
				objs[0].innerText = arr[0];
				objs[1].innerText = arr[1];
				objs[2].innerText = arr[2];
				objs[3].innerText = arr[3];
				objs[4].innerText = arr[4];
				objs[5].innerText = arr[5];
			}
		</script>
	</head>
	<body>
		JS05
		<table border="1">
			<tr>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
				<td><span class="myspan">__</span></td>
			</tr>
			<tr>
				<td colspan="6">
					<button type="button" onclick="myclick()">CLICK</button>
				</td>
			</tr>
		</table>
	</body>
</html>

[js06.html]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS06</title>
		<script type="text/javascript">
			function myclick1(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[0].innerHTML;
				obj_it.value += obj;
			}
			function myclick2(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[1].innerHTML;
				obj_it.value += obj;
			}
			function myclick3(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[2].innerHTML;
				obj_it.value += obj;
			}
			function myclick4(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[3].innerHTML;
				obj_it.value += obj;
			}
			function myclick5(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[4].innerHTML;
				obj_it.value += obj;
			}
			function myclick6(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[5].innerHTML;
				obj_it.value += obj;
			}
			function myclick7(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[6].innerHTML;
				obj_it.value += obj;
			}
			function myclick8(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[7].innerHTML;
				obj_it.value += obj;
			}
			function myclick9(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[8].innerHTML;
				obj_it.value += obj;
			}
			function myclick0(){
				var obj_it = document.getElementById("it");
				var obj = document.getElementsByClassName("btn")[9].innerHTML;
				obj_it.value += obj;
			}
			function myclickCall(){
				var obj = document.getElementsByClassName("btn_call")[0];
				var obj_it = document.getElementById("it");
				var tel = obj_it.value;
				alert("CALLING ~ \n" + tel);
			}
		</script>
		<style>
			table {
				text-align: center;
			}
			table button {
				width: 100%;
			}
			input {
				text-align: right;
			}
		</style>
	</head>
	<body>
		JS06
		<table border="1">
			<tr>
				<td colspan="3">
					<input type="text" id="it" />
				</td>
			</tr>
			<tr>
				<td><button type="button" class="btn" onclick="myclick1()">1</button></td>
				<td><button type="button" class="btn" onclick="myclick2()">2</button></td>
				<td><button type="button" class="btn" onclick="myclick3()">3</button></td>
			</tr>
			</tr>
			<tr>
				<td><button type="button" class="btn" onclick="myclick4()">4</button></td>
				<td><button type="button" class="btn" onclick="myclick5()">5</button></td>
				<td><button type="button" class="btn" onclick="myclick6()">6</button></td>
			</tr>
			<tr>
				<td><button type="button" class="btn" onclick="myclick7()">7</button></td>
				<td><button type="button" class="btn" onclick="myclick8()">8</button></td>
				<td><button type="button" class="btn" onclick="myclick9()">9</button></td>
			</tr>
			<tr>
				<td>
					<button type="button" class="btn" onclick="myclick0()">0</button>
				</td>
				<td colspan="2">
					<button type="button" class="btn_call" onclick="myclickCall()">CALL</button>
				</td>
			</tr>
		</table>
	</body>
</html>

- http://127.0.0.1:8000/static/js06.html

'대덕인재개발원 > 대덕인재개발원_파이썬 프로그래밍' 카테고리의 다른 글

231114_Django 개론 5  (0) 2023.11.14
231113_Django 개론 4  (0) 2023.11.13
231109_Django 과제 1  (0) 2023.11.09
231109_Django 개론 2  (0) 2023.11.09
231108_Django 개론 1  (0) 2023.11.08
'대덕인재개발원/대덕인재개발원_파이썬 프로그래밍' Related Articles more