* index.php
<?php include "database.php"; ?> <?php //Create Select Query $query = "SELECT * FROM shout ORDER BY id DESC"; $shouts = mysqli_query($con, $query); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Talk and Talk</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <header> <h1>Talk And Talk</h1> </header> <div id="shouts"> <ul> <?php while($row = mysqli_fetch_assoc($shouts)) : ?> <li class="shout"><span><?php echo $row['time'] ?> - </span><strong><?php echo $row['user'] ?>:</strong> <?php echo $row['message'] ?></li> <? endwhile; ?> </ul> </div> <div id="input"> <?php if(isset($_GET['error'])) : ?> <div class="error"><?php echo $_GET['error']; ?></div> <?php endif; ?> <form action="process.php" method="post"> <input type="text" name="user" placeholder="이름을 입력하세요" /> <input type="text" name="message" placeholder="메세지를 입력하세요" /> <br /> <input class="shout-btn" type="submit" name="submit" value="글쓰기"> </form> </div> </div> </body> </html>
* database.php
<?php //Connect to mysql $con = mysqli_connect("localhost","root","apmsetup","talk"); //Test connection if(mysqli_connect_errno()){ echo 'Failed to connect to MySQL: '.mysqli_connect_error(); } ?>
* process.php
<?php include 'database.php'; //Check if form submitted if(isset($_POST['submit'])){ $user = mysqli_real_escape_string($con, $_POST['user']); $message = mysqli_real_escape_string($con, $_POST['message']); //Set timezone date_default_timezone_set('Asia/Seoul'); $time = date('h:i:s a',time()); //Validate input if(!isset($user) || $user == '' || !isset($message) || $message == ''){ $error = "이름과 메세지를 입력하세요"; header("Location: index.php?error=".urlencode($error)); exit(); }else{ $query = "INSERT INTO shout (user, message, time) VALUES ('$user','$message','$time')"; if(!mysqli_query($con, $query)){ die('Error: '.mysqli_error($con)); }else{ header("Location: index.php"); exit(); } } } ?>
* style.css
*{ margin:0; padding:0; } body{ font-family: arial; font-size: 15px; line-height: 1.5em; background: #f4f4f4; } #container{ background: #333333; margin: 50px auto; overflow: auto; width: 60%; min-height: 630px; } header h1{ color: #ffffff; font-size: 22px; padding: 15px 0 10px 10px; border-bottom: 1px solid #ffffff; } #shouts{ width: 90%; background: #f4f4f4; height: 400px; margin: 20px auto; overflow: auto; } .shout { list-style: none; padding: 8px; border-bottom: 1px #cccccc dotted; } .shout span{ color: #aaaaaa; } #input { width: 90%; min-height: 80px; margin: auto; padding: 0; } #input input[type='text']{ height: 25px; width: 48%; padding: 3px; margin-bottom: 20px; border: #666666 solid 1px; } #input .shout-btn { padding: 5px; margin-bottom: 30px; width: 100%; margin: 10px auto; } .error{ background: red; color: #ffffff; padding: 5px; margin-bottom: 20px; } @media only screen and (max-width:768px){ #input input[type='text']{ width:98%; } }