[PHP+CI4+mysql]게시판 만들기 강좌 #4. 파일 준비 1편

2022. 10. 25. 15:36

이제 본격적으로 게시판을 만들어보자. 게시판을 만들려면 필요한 파일들이 있다. 게시판 목록과 보기, 글쓰기등이다. 그런 파일들을 만들고 링크를 달아보자.

/app/Views/welcome_message.php

<!DOCTYPE html>

<head>

<title>Welcome to CodeIgniter 4!</title>

* {

transition: background-color 300ms ease, color 300ms ease;

}

*:focus {

background-color: rgba(221, 72, 20, .2);

outline: none;

}

html, body {

color: rgba(33, 37, 41, 1);

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

font-size: 16px;

margin: 0;

padding: 0;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;

}

header {

background-color: rgba(247, 248, 249, 1);

padding: .4rem 0 0;

}

.menu {

padding: .4rem 2rem;

}

header ul {

border-bottom: 1px solid rgba(242, 242, 242, 1);

list-style-type: none;

margin: 0;

overflow: hidden;

padding: 0;

text-align: right;

}

header li {

display: inline-block;

}

header li a {

border-radius: 5px;

color: rgba(0, 0, 0, .5);

display: block;

height: 44px;

text-decoration: none;

}

header li.menu-item a {

border-radius: 5px;

margin: 5px 0;

height: 38px;

line-height: 36px;

padding: .4rem .65rem;

text-align: center;

}

header li.menu-item a:hover,

header li.menu-item a:focus {

background-color: rgba(221, 72, 20, .2);

color: rgba(221, 72, 20, 1);

}

header .logo {

float: left;

height: 44px;

padding: .4rem .5rem;

}

header .menu-toggle {

display: none;

float: right;

font-size: 2rem;

font-weight: bold;

}

header .menu-toggle button {

background-color: rgba(221, 72, 20, .6);

border: none;

border-radius: 3px;

color: rgba(255, 255, 255, 1);

cursor: pointer;

font: inherit;

font-size: 1.3rem;

height: 36px;

padding: 0;

margin: 11px 0;

overflow: visible;

width: 40px;

}

header .menu-toggle button:hover,

header .menu-toggle button:focus {

background-color: rgba(221, 72, 20, .8);

color: rgba(255, 255, 255, .8);

}

header .heroe {

margin: 0 auto;

max-width: 1100px;

padding: 1rem 1.75rem 1.75rem 1.75rem;

}

header .heroe h1 {

font-size: 2.5rem;

font-weight: 500;

}

header .heroe h2 {

font-size: 1.5rem;

font-weight: 300;

}

section {

margin: 0 auto;

max-width: 1100px;

padding: 2.5rem 1.75rem 3.5rem 1.75rem;

}

section h1 {

margin-bottom: 2.5rem;

}

section h2 {

font-size: 120%;

line-height: 2.5rem;

padding-top: 1.5rem;

}

section pre {

background-color: rgba(247, 248, 249, 1);

border: 1px solid rgba(242, 242, 242, 1);

display: block;

font-size: .9rem;

margin: 2rem 0;

padding: 1rem 1.5rem;

white-space: pre-wrap;

word-break: break-all;

}

section code {

display: block;

}

section a {

color: rgba(221, 72, 20, 1);

}

section svg {

margin-bottom: -5px;

margin-right: 5px;

width: 25px;

}

.further {

background-color: rgba(247, 248, 249, 1);

border-bottom: 1px solid rgba(242, 242, 242, 1);

border-top: 1px solid rgba(242, 242, 242, 1);

}

.further h2:first-of-type {

padding-top: 0;

}

footer {

background-color: rgba(221, 72, 20, .8);

text-align: center;

}

footer .environment {

color: rgba(255, 255, 255, 1);

padding: 2rem 1.75rem;

}

footer .copyrights {

background-color: rgba(62, 62, 62, 1);

color: rgba(200, 200, 200, 1);

padding: .25rem 1.75rem;

}

@media (max-width: 629px) {

header ul {

padding: 0;

}

header .menu-toggle {

padding: 0 1rem;

}

header .menu-item {

background-color: rgba(244, 245, 246, 1);

border-top: 1px solid rgba(242, 242, 242, 1);

margin: 0 15px;

width: calc(100% - 30px);

}

header .menu-toggle {

display: block;

}

header .hidden {

display: none;

}

header li.menu-item a {

background-color: rgba(221, 72, 20, .1);

}

header li.menu-item a:hover,

header li.menu-item a:focus {

background-color: rgba(221, 72, 20, .7);

color: rgba(255, 255, 255, .8);

}

</style>

</head>

<body>

<ul>

</a>

</li>

</li>

</li>

<li class="menu-item hidden"><a href="https://forum.codeigniter.com/" target="_blank">Community</a></li>

<li class="menu-item hidden"><a

href="https://github.com/codeigniter4/CodeIgniter4/blob/develop/CONTRIBUTING.md" target="_blank">Contribute</a>

</li>

</ul>

</div>

</div>

</header>

<h1>About this page</h1>

<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

<p>If you would like to edit this page you will find it located at:</p>

<pre><code>app/Views/welcome_message.php</code></pre>

<p>The corresponding controller for this page can be found at:</p>

<pre><code>app/Controllers/Home.php</code></pre>

</section>

<h1>Go further</h1>

<h2>

Learn

</h2>

<p>The User Guide contains an introduction, tutorial, a number of "how to"

guides, and then reference documentation for the components that make up

the framework. Check the <a href="https://codeigniter4.github.io/userguide"

target="_blank">User Guide</a> !</p>

<h2>

Discuss

</h2>

<p>CodeIgniter is a community-developed open source project, with several

venues for the community members to gather and exchange ideas. View all

the threads on <a href="https://forum.codeigniter.com/"

target="_blank">CodeIgniter's forum</a>, or <a href="https://codeigniterchat.slack.com/"

target="_blank">chat on Slack</a> !</p>

<h2>

Contribute

</h2>

<p>CodeIgniter is a community driven project and accepts contributions

of code and documentation from the community. Why not

join us</a> ?</p>

</section>

</div>

<p>Page rendered in {elapsed_time} seconds</p>

<p>Environment: <?= ENVIRONMENT ?></p>

</div>

open source licence.</p>

</div>

</footer>

function toggleMenu() {

var menuItems = document.getElementsByClassName('menu-item');

for (var i = 0; i < menuItems.length; i++) {

var menuItem = menuItems[i];

menuItem.classList.toggle("hidden");

}

</script>

</body>

</html>

중간에 보면 게시판으로 가는 링크를 만들었다.

이렇게 만들었다. 그럼 /board 라는 링크에 연결되는 파일을 만들어보자. 저번에 설명한대로 우선 라우트를 수정해야 한다.

/app/Config/Routes.php

<?php

namespace Config;

// Create a new instance of our RouteCollection class.

$routes = Services::routes();

// Load the system's routing file first, so that the app and ENVIRONMENT

// can override as needed.

if (is_file(SYSTEMPATH . 'Config/Routes.php')) {

require SYSTEMPATH . 'Config/Routes.php';

}

* --------------------------------------------------------------------

* Router Setup

* --------------------------------------------------------------------

$routes->setDefaultNamespace('App\Controllers');

$routes->setDefaultController('Home');

$routes->setDefaultMethod('index');

$routes->setTranslateURIDashes(false);

$routes->set404Override();

// The Auto Routing (Legacy) is very dangerous. It is easy to create vulnerable apps

// where controller filters or CSRF protection are bypassed.

// If you don't want to define all routes, please use the Auto Routing (Improved).

// Set `$autoRoutesImproved` to true in `app/Config/Feature.php` and set the following to true.

// $routes->setAutoRoute(false);

* --------------------------------------------------------------------

* Route Definitions

* --------------------------------------------------------------------

// We get a performance increase by specifying the default

// route since we don't have to scan directories.

$routes->get('/', 'Home::index');

$routes->get('/board', 'Board::list');

* --------------------------------------------------------------------

* Additional Routing

* --------------------------------------------------------------------

* There will often be times that you need additional routing and you

* need it to be able to override any defaults in this file. Environment

* based routes is one such time. require() additional route files here

* to make that happen.

* You will have access to the $routes object within that file without

* needing to reload it.

if (is_file(APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php')) {

require APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php';

}

$routes->get('/board', 'Board::list');

이부분을 추가했다. /board 라는 링크를 만들었으니 /board라고 누군가 치고 들어온다면 어디로 가야하는지를 가르쳐 줘야한다. 어디로 가라고 돼 있지? Board라는 컨트롤러로 가라고 돼 있다.

하지만 현재는 Board라는 컨트롤러는 없다. 만들어주도록 하자.

기존의 Home.php를 복사해서 같은 경로에 Board.php 라는 파일을 만든다.

/app/Controllers/Board.php

<?php

namespace App\Controllers;

class Board extends BaseController

{

public function list()

{

return view('board_list');

}

Home.php랑 똑같이 만들면 되지만 Home.php에는 class 명이 Home으로 돼 있다. 지금은 Board.php라는 파일을 만들었으므로 class명도 Board로 수정한다.

그리고 라우트에서 Board::list라고 지정했으므로 list()함수를 만들어준다.

list함수에서 찾아가야할 뷰는 'board_list'이다. 이 파일도 만들어보자.

/app/Views/board_list.php

지금은 내용이 없다. 간단하게

이렇게만 입력하고 저장하자.

이제 메인 페이지에 접속해보자.

http://localhost:8080/

아 제일 먼저 php spark serve 는 실행해주어야한다. 그래야 웹서버가 작동하니까.

요렇게 뜰것이다. 게시판을 클릭해보자.

이렇게 뜨면 성공이다.

이렇께 떴다면 글쓰기도 만들어보자. 이건 직접해보자.

저작자표시

'PHP강좌 > [CI4]게시판만들기강좌' 카테고리의 다른 글

[PHP+CI4+mysql]게시판 만들기 강좌 #6. 파일 준비(include, layout.php) 2편 (0)	2022.10.26
[PHP+CI4+mysql]게시판 만들기 강좌 #5. 몇가지 설정(디비,오류표시,index.php) (0)	2022.10.26
[PHP+CI4+mysql]게시판 만들기 강좌 #3. 어떻게 이렇게 보일까? (3)	2022.10.21
[PHP+CI4+mysql]게시판 만들기 강좌 #2. 준비(설치, 컴포저 안쓰고 다운로드 받아 설치) (0)	2022.10.21
[PHP+CI4+mysql]게시판 만들기 강좌 #1. 준비(개념) (0)	2022.10.21

아빠는개발자

[PHP+CI4+mysql]게시판 만들기 강좌 #4. 파일 준비 1편

'PHP강좌 > [CI4]게시판만들기강좌' 카테고리의 다른 글

+ Recent posts

티스토리툴바