2020. 4. 13. 02:29ㆍ생활코딩/생활코딩웹
개요
지금까지 한 것들을 순차적으로 설명해봅니다.
복습
<?php
$conn = mysqli_connect('localhost', 'root', 'jh1245');
mysqli_select_db($conn, 'mytester');
?>처음 위의 코드를 사용하여 라이브러리를 지정하여 데이터베이스를 연동을 준비하여 줍니다.
index.php
<?php
require_once('conn.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body id="body">
<header>
<h1><a href="index.php">생활코딩 JavaScript</a></h1>
</header>
<nav>
<ol>
<?php
$sql = "SELECT * FROM `topic2`";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
echo '<li><a href="index.php?id='.$row['id'].'">'.htmlspecialchars($row['title']).'</a></li>';
}
?>
</ol>
</nav>
<div id="content">
<article>
<?php
if(empty($_GET['id'])){
echo "Welcome";
} else {
$id = mysqli_real_escape_string($conn, $_GET['id']);
$sql = "SELECT topic2.id, topic2.title, topic2.description, user.name, topic2.created FROM topic2 LEFT JOIN user ON topic2.author = user.id WHERE topic2.id=".$id;
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
?>
<h2><?=htmlspecialchars($row['title'])?></h2>
<div><?=htmlspecialchars($row['created'])?> | <?=htmlspecialchars($row['name'])?></div>
<div><?=htmlspecialchars($row['description'])?></div>
<?php
}
?>
</article>
<input type="button" name="name" value="White" onclick="document.getElementById('body').className=''">
<input type="button" name="name" value="Black" onclick="document.getElementById('body').className='black'">
<a href="write.php">쓰기</a>
</div>
</body>
</html>처음에는 index,php를 알아보겠습니다.
맨 처음 코드인 require_once('conn.php');을 입력하여 라이브러리에 있던 값을 가져와 데이터베이스를 연결해줍니다.
다음 html코드를 입력하고 head안에 css를 연결해줍니다. 다음 body를 입력하고 그 안에 아이디를 지정하여 css에 값을 가져올 수 있게 합니다.
다음 header을 사용하여 제목을 생활코딩으로 입력하여줍니다 그리고 제목을 누를시 링크를 통해 index, php로 넘어오게 됩니다.
다음은 nav를 사용하여 메뉴창을 만듭니다. 그 안에 ol태그를 사용해 리스트를 만들며 그 정보를 select문을 사용하여 topic2에 있는 정보를 데이터 베이스에서 가져옵니다
다음은 article을 사용하여 본문을 넣을 곳을 만들어주고 안에 넣을 값은 topic2과 user을 조인하여 보여줍니다.
그리고 mysqli_real_escape_string를 사용하면 주소창에 쿼리문을 입력 시 적용이 되는데 그것을 사전에 차단하여 줍니다.
마지막으로 버튼을 만들어주고 그것을 css 연결하면 index.php는 완성이 됩니다.
<?php
require_once('conn.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body id="body">
<header>
<h1><a href="index.php">생활코딩 JavaScript</a></h1>
</header>
<nav>
<ol>
<?php
$sql = "SELECT * FROM `topic2`";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
echo '<li><a href="index.php?id='.$row['id'].'">'.htmlspecialchars($row['title']).'</a></li>';
}
?>
</ol>
</nav>
<div id="content">
<article>
<form class="" action="process.php" method="post">
<p>
<label for="title">제목 :</label>
<input id="title" type="text" name="title">
</p>
<p>
<label for="author">저자 : </label>
<input id="author" type="text" name="author" value="">
</p>
<p>
<label for="description">본문 :</label>
<textarea id="description" name="description" rows="8" cols="40"></textarea>
</p>
<p>
<input type="submit" value="전송">
</p>
</form>
</article>
<input type="button" name="name" value="White" onclick="document.getElementById('body').className=''">
<input type="button" name="name" value="Black" onclick="document.getElementById('body').className='black'">
<a href="write.php">쓰기</a>
</div>
</body>
</html>다음은 write.php입니다 큰 틀은 index, php와 같습니다 다음으로 form에 process.php를 지정하여 주고 여기서 추가된 것은 제목, 저자에 textbox를 넣고 본문에는 textarea 이름은 각각 지정하여줍니다 그리고 전송은 버튼으로 지정하여주고 누를 시 process.php로 넘어가게 됩니다.
<?php
require_once('conn.php');
$author = mysqli_real_escape_string($conn, $_POST['author']);
$sql = "SELECT * FROM `user` WHERE `name` = '{$author}'";
$result = mysqli_query($conn, $sql);
if($result->num_rows > 0){
$row = mysqli_fetch_assoc($result);
$user_id = $row['id'];
} else {
$sql = "INSERT INTO user (id, name) VALUES(NULL, '{$author}');";
$result = mysqli_query($conn, $sql);
$user_id = mysqli_insert_id($conn);
}
$title = mysqli_real_escape_string($conn, $_POST['title']);
$description = mysqli_real_escape_string($conn, $_POST['description']);
$sql = "INSERT INTO
`topic2`
(`id`, `title`, `description`, `author`, `created`)
VALUES (NULL, '{$title}', '{$description}', '{$user_id}', now());";
mysqli_query($conn, $sql);
header('Location: index.php');
?>다음 파일인 process.php입니다 여기서도 라이브러리인 conn, php에 데이터베이스 값을 가져오며 write.php에서 넘어온 값을 데이터화 시켜 데이터베이스에 insert를 시켜줍니다. 그 후 다시 index.php로 넘어가 메뉴와 내용이 생기게 됩니다
body{
margin:0;
}
body.black{
background-color: black;
color:white;
}
header{
border-bottom: 1px solid grey;
padding-left: 30px;
}
nav {
border-right:1px solid grey;
width:200px;
height:700px;
float:left;
}
nav ol {
margin:0;
padding:20px;
list-style: none;
}
#content {
padding-left:20px;
float:left;
width:500px;
}마지막으로 css입니다 각각 body에는 여백을 뜻하는 margin을 0으로 지정해주고 body안에 버튼인 black를 누를 시 배경이 검정 글자가 흰색으로 바뀌게 하고 header에는 밑에 생기는 선을 1px 만 큰 회색으로 지정해줍니다.
그리고 왼쪽 간의 간격을 30px로 지정합니다,
다음은 메뉴를 담당하고 있는 nav에 ol 즉 리스트 부분에 모양을 없애고 여백을 0px 간격을 20px으로 지정해줍니다,
마지막으로 contnent의 간격을 왼쪽으로부터 20px 왼쪽으로 배치하고 크기를 500px로 지정해줍니다.
이렇게 하면 지금까지 한 모든 것이 완성이 됩니다.
참고한 수업 링크