3탄에서는 배포한 사이트의 서비스들을 구축하도록 하겠습니다
우선 레이아웃부터 잡아보겠습니다
UI는 이전 시간에 제작한 것을 토대로 사용하겠습니다
custom.php (외부 css 파일입니다)
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
html, body {
height:100%;min-width:950px;
margin:0
}
span, label {
display:inline-block;margin:6px 25px 8px 25px;
font-size:18px;
}
input {
padding:5px;margin-top:-15px
}
#head {
width:100%;height:60px;
background-color:white;
}
#head a {
display: inline-block;margin-left:20px;
text-decoration: none;color:black;
}
#head button {
float: right;margin: 8px 10%;
font-size: 20px;padding:8px 15px;
background-color: transparent;
border:0.1em solid #333;border-radius:8px;
}
#head button:hover {;
background-color: #333;
color:white;
}
#nav {
width:100%;
border-top:1px solid lightgrey;
background-color: #333;
text-align:center;
margin-bottom: -5px;
}
ul {
display:inline-block;
list-style-type:none;
margin:0;padding:0;overflow:hidden;
background-color: transparent;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 26px;
text-decoration: none;
color: black;
}
li a:hover {
}
#nav ul {
}
#nav li {
}
#nav li a {
color: white;
}
#nav li a:hover {
background-color: #111;
border-bottom:0.1em solid blue;
}
#body{
width:80%;height:76%;padding:2% 10% 2% 10%;
background-color:lightgrey;
}
#main {
width:95%;height:90%;min-width:800px;
padding:2% 3%;border-radius:0.5%;
background-color:white;
}
#main table {
display:inline-block;
background-color:lightgrey;
border-collapse: collapse;
font-size: 18px;width:50%;height:58%;
}
#main th {
padding:10px 24px;
background-color: grey
}
#main td {
padding:10px 24px;
border-bottom:1px solid grey;
}
#main ul {
}
#main li {
}
#main li a {
border:1.5px solid grey;
color:white;
border-radius:5px;
margin:8px 8px 0px 8px;
}
#main li a:hover {
background-color: grey;
}
#foot {
display: table;
width:96.1%;height:150px;padding:2%;
background-color:grey;
color:rgb(32,32,32);
}
#foot p {
display: table-cell;
line-height: 1.5;
text-align: right;
vertical-align: bottom;
}
|
ref.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
<?php include
?>
</style>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wbtest</title>
</head>
<?
$root = ''; //외부 서버
//$root = '/wbtest'; //로컬 서버
?>
|
head.php
|
1
2
|
<a href=""><h2>TEST Site</h2></a>
<button>메뉴6</button>
|
nav.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<ul class="hlist">
<li><a href="javascript:void(0);" onclick="locate('<?= $root ?>/main/detail.php')">list</a></li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
<li><a href="">메뉴4</a></li>
<li><a href="">메뉴5</a></li>
</ul>
<script type="text/javascript">
function locate(goto) {
}
</script>
|
top.jsp (상단의 소스를 구성하는 layout페이지입니다)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php include 'ref.php';?>
<body>
<div id="head">
<?php include 'head.php';?>
</div>
<div id="nav">
<?php include 'nav.php';?>
</div>
<div id="body">
<div id="main" style="max-width:1050px">
|
bottom.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
|
</div>
</div>
<div id="foot">
<p>copyright by webman</p>
</div>
</body>
</html>
|
index.php
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
<div style="display:inline-block;text-align:right;border-radius:5px 5px 0 0;padding:3px 5px 0px 0;width:100%;background-color:black;">
<span>hi</span>
<ul class="hlist">
<li><a href="javascript:void(0);" onclick="doAjax('c.php')">C</a></li>
<li><a href="javascript:void(0);" onclick="doAjax('u.php')">U</a></li>
<li><a href="javascript:void(0);" onclick="r()">R</a></li>
<li><a href="javascript:void(0);" onclick="doAjax('d.php')">D</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
ajaxList();
});
function ajaxList() {
$.ajax({
url: "<?= $root ?>/actions/list.php", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
type: "GET", // HTTP 요청 메소드(GET, POST 등)
contentType : "application/json",
success:function(returnMap){
console.log(res);
listItems(res);
},
error:function(jqXHR, status, errorThrown){
console.log(errorThrown);
}
});
}
function listItems(listData) {
$("table > tr").remove();
var temp, clon;
var dbData = listData;
for(var i=0; i<dbData.length; i++) {
temp = document.getElementsByTagName("template")[0];
clone = temp.content.cloneNode(true);
td = clone.querySelectorAll("td");
td[0].textContent = dbData[i].id;
td[1].textContent = dbData[i].name;
td[2].textContent = dbData[i].description;
$("table").append(clone);
}
}
function doAjax(url){
var params = $("#form").serialize();
$.ajax({
url: "<?= $root ?>/actions/"+url, // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
data: params, // HTTP 요청과 함께 서버로 보낼 데이터
type: "POST", // HTTP 요청 메소드(GET, POST 등)
//contentType : "application/json",
success:function(returnMap){
alert(returnMap);
console.log(returnMap);
ajaxList();
},
error:function(jqXHR, status, errorThrown){
alert(errorThrown);
console.log(errorThrown);
ajaxList();
}
});
}
</script>
<form name="form" id="form" style="margin:0px;">
<div style="display:inline-block;height:100%;width:100%;">
<table cellpadding="0" cellspacing="0">
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
<th>ref</th>
</tr>
</table>
<div style="float:right;height:50%;width:46%;margin:1.8%;">
<ul>
<li>
<label>id</label><input type="" name="id" placeholder="Id는 자동생성 됩니다" readonly>
</li>
<li>
<label>name</label><input type="" name="name">
</li>
<li>
<label>description</label><input type="" name="description">
</li>
<li>
<label>ref</label><input type="" name="">
</li>
</ul>
</div>
</div>
</form>
<template id="list">
<tr>
<td class="default"></td>
<td class="default"></td>
<td class="default"></td>
<td class="default"></td>
</tr>
</template>
<style>
.default {
background-color: white
}
.hover {
background-color: lightblue
}
.clicked {
background-color: blue;
color:white;
}
</style>
<script>
function r() {
$('input[name=id]').val($('.clicked:eq(0)').html());
$('input[name=name]').val($('.clicked:eq(1)').html());
$('input[name=description]').val($('.clicked:eq(2)').html());
}
$("#main td").mouseover(function(e){
$(e.target).parent().children('td').removeClass('default');
$(e.target).parent().children('td').addClass('hover');
});
$("#main td").mouseout(function(e){
$(e.target).parent().children('td').removeClass('hover');
$(e.target).parent().children('td').addClass('default');
});
$(document).click(function(e) {
if($(e.target).is("#main td")) {
if($(e.target).hasClass('clicked')) {
$('td').removeClass();
$('td').addClass('default');
} else {
$('td').removeClass();
$('td').addClass('default');
$(e.target).parent().children('td').removeClass();
$(e.target).parent().children('td').addClass('clicked');
//$('input[name=id]').val($(e.target).siblings(':nth-child(1)').html());
//$('input[name=name]').val($(e.target).siblings(':nth-child(2)').html());
//$('input[name=description]').val($(e.target).siblings(':nth-child(3)').html());
}
} else {
}
});
</script>
|
소스를 구성하고 MAMP를 통해 로컬 서버를 실행하면 다음과 같이 출력됩니다
이제는 서비스 로직을 구성해보겠습니다
서비스 소스는 actions 폴더 하위에 배치하도록 하겠습니다
서비스를 구성하기전에 db를 먼저 구성하겠습니다
호스팅 사이트에서 제공해주는 외부 mysql server를 사용하겠습니다
컨트롤 패널에 접속합니다
MySQL Databases에서 새 db를 생성하겠습니다
그리고 phpMyAdmin에서 db를 제어할 것 입니다
db를 생성하시면
db 연동에 필요한 정보(servername, username, password, dbname)를 제공해줍니다
기억해둡시다
아까 말씀드렸듯이 phpMyAdmin을 통해 db를 제어합니다
다음과 같이 테이블을 생성하겠습니다
id 컬럼에 기본키와 A.I.(auto increment)를 지정해줍니다
저장하여 테이블을 생성합니다
그리고 db연동을 위한 소스를 작성해보겠습니다
아이러니하게도
호스팅 사이트에서는 db연결이 성공적이었음에도
localhost에서는 db에 접근이 되질 않습니다
아무래도 호스팅 사이트의 Apache서버와
localhost의 MAMP 간 php설정 차이 있는 듯 싶습니다
그래서 MAMP의 mysql 서버를 활용하여 사이트를 구축하고
정식으로 배포할때 외부 mysql로 연결하겠습니다
그러므로
잠시 로컬 서버를 사용하기 위한 설정을 하겠습니다
그리고
외부 db에 member 테이블을 생성했듯이
로컬 db에 동일하게 생성하겠습니다
MAMP가 작동하는 상태에서
localhost/phpMyAdmin 으로 접속하여 db를 제어할 수 있습니다
지금부터는 actions 하위에 서비스단을 구성해보겠습니다
conn.php
|
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
|
<?php
//header('Content-Type: text/plain; charset=utf-8');
/*
$servername = "sql111.ezyro.com"; //외부 서버
$username = 'ezyro_25376976';
$password = 'wkec7pdnf';
$db = "ezyro_25376976_wb";
$port = 3306;
*/
$servername = "localhost"; //로컬 서버
$username = 'root';
$password = 'root';
$db = "test";
$port = 3306;
$conn = mysqli_init();
mysqli_real_connect(
$conn,
$servername,
$username,
$password,
$db,
$port
) or die("DB Connect failed");
//echo "mysql://$servername:$port/$username/$db Connected\n";
?>
|
list.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//header("Content-Type: application/json");
$arr1 = array();
// List
$result = mysqli_query($conn, "SELECT * FROM member");
while ($row = mysqli_fetch_array($result)) {
$arr = array("id" => $row["id"], "name" => $row["name"], "description" => $row["description"]);
array_push($arr1, $arr);
};
echo json_encode($arr1);
mysqli_close($conn);
?>
|
c.php
|
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
31
32
33
34
35
36
37
38
39
|
//header("Content-Type: application/json"); php
$method = $_SERVER['REQUEST_METHOD'];
$id = "";
$name = "";
$description = "";
$arr = "";
if($method == "GET") {
$id = $_GET['id'];
$name = $_GET['name'];
$description = $_GET['description'];
} else if($method == "POST") {
$id = $_POST['id'];
$name = $_POST['name'];
$description = $_POST['description'];
}
$result = mysqli_query($conn, "SELECT MAX(id) AS a FROM member");
$row = mysqli_fetch_array($result);
$arr = array("id" => $row["a"]+1, "name" => $name, "description" => $description);
echo json_encode($arr);
// Insert
$sql = "INSERT INTO member (name, description) VALUES ('$name', '$description')";
if (mysqli_query($conn, $sql)) {
echo "\nData Inserted ";
} else {
echo "\nInsert Error: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
|
u.php
|
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
31
32
33
34
35
|
$method = $_SERVER['REQUEST_METHOD'];
$id = "";
$name = "";
$description = "";
$arr = "";
if($method == "GET") {
$id = $_GET['id'];
$name = $_GET['name'];
$description = $_GET['description'];
} else if($method == "POST") {
$id = $_POST['id'];
$name = $_POST['name'];
$description = $_POST['description'];
}
$arr = array("id" => $id, "name" => $name, "description" => $description);
echo json_encode($arr);
// Update
$sql = "UPDATE member SET name='$name', description='$description' WHERE id='$id'";
if (mysqli_query($conn, $sql)) {
echo "\nData Updated";
} else {
echo "\nUpdate Error: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
|
d.php
|
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
|
$method = $_SERVER['REQUEST_METHOD'];
$id = "";
if($method == "GET") {
$id = $_GET['id'];
} else if($method == "POST") {
$id = $_POST['id'];
}
// Delete
$sql = "DELETE FROM member WHERE id='$id'";
if (mysqli_query($conn, $sql)) {
echo "id=$id Data Deleted";
} else {
echo "Delete Error: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
|
여기까지 완성하셨다면 로컬 서버에서
다음과 같은 결과를 확인 할 수 있습니다
구축한 사이트가
테스트서버에서 정상적으로 동작하므로
실서버에 배포하도록 하겠습니다
먼저 실서버 구동을 위한 설정을 하겠습니다
그리고 sublime FTP Upload Folder를 실행하여
실서버에 소스를 업데이트 합니다
완료하셨다면
실서버에서 다음과 같은 결과를 확인 할 수 있습니다
'웹개발 > client-side' 카테고리의 다른 글
| 1탄) node.js 기반 React + MongoDB + graphQL 프로젝트 (0) | 2020.03.27 |
|---|---|
| 1탄) .NET Core, WPF GUI 프로그래밍 스터디 (0) | 2020.03.14 |
| 2탄) PHP, DB 연동 및 배포 (0) | 2020.03.12 |
| 1탄) PHP 웹 개발 환경 세팅 (0) | 2020.03.06 |
| 사용자 화면 작성 맛보기(HTML, CSS, JavaScript) (0) | 2019.12.21 |