[Laravel7] 라라벨7 초기셋팅 및 사용해보기

해당 게시글은 2020년에 Laravel7 버전을 기준으로 작성된 게시글을 재정리한 내용입니다.
사용 운영체제 : Window

 

 

1. 웹 서버 구축하기

APM이 무엇인지 아시나요?

APM은 Apache, PHP, MySQL을 통칭하는 말입니다.

해당 게시글에서는 웹서버를 구축하기 위해 APM을 한번에 설치 할 수 있는 Bitnami라는 툴을 사용합니다.

와중에 Bitnami 홈페이지도 갱신되서 순간당황했습니다.

Install WAMP, Download WAMP

 

라라벨 이놈은 가끔 사람을 좀 난감하게 하니 다운로드 하는 버전을 잘 확인해주시기 바랍니다.

Download now! 하면서 로그인 어쩌고저쩌고 뜨는데 No, thanks 😊 하셔도 다운로드에 전혀 지장 없습니다.

bitnami Setup에서 모든 칸에 체크하고 설치를 진행해주세요. 폴더경로는 본인이 사용하기 편한 곳으로 변경한 후 설치해주세요.

설치할 MySQL의 root 비밀번호 설정입니다. 해당 비밀번호는 root 계정의 비밀번호이므로 꼭 기억해주시길 바랍니다.

모든 설치가 완료되었을 경우 bitnami의 welcome 창이 떠오릅니다.

외에도 Manager Tool을 통해 APM이 구축되었음을 확인할 수 있습니다.

Manager Servers에서 web Server와 MySQL이 돌아가고 있는 것을 확인 할 수 있고 서버를 재시작하거나, 멈추거나, 다시 실행할 수 있습니다. 

또한 Open phpMyadmin으로 들어가면 바로 phpMyAdmin을 사용할 수 있습니다. 여기서 암호는 설치할때 입력했던 그 root의 암호를 입력하면 됩니다.

 

 

2. Laravel 프레임워크 설치하기

Laravel은 의존성 관리를 위해 Composer을 활용해야 합니다.

그래서 먼저 Laravel을 설치할 서버에 Composer를 설치하도록 하겠습니다.

Composer

이 아저씨는 들어갈때마다 점점 멋져지는듯

설치파일(.exe)를 실행하면 Composer가 설치되기 시작하는데 이때 developer mode를 꼭 체크하시고 원하는 경로에 composer 디렉토리로 다운로드를 진행합니다.

이후 Settings Check가 나오는데요 APM에서 설치했던 Bitnami의 php.exe 경로를 설정해줍니다.

설치가 완료되면 설치가 잘 되었는지 확인이 필요합니다. 확인하고 확인하고 또 확인!

명령 프롬프토(CMD)창이나 Window PowerShell에서 composer를 입력해봅니다.

위와 같은 창이 출력된다면 설치가 잘 진행된겁니다.

이제 드디어 Laravel 설치를 진행하도록 하겠습니다.

composer create-project --prefer-dist laravel/laravel [ 명칭 ] [“ 버전 ”]

D:\Bitnami\apache2\htdocs>composer create-project --prefer-dist laravel/laravel blog1 “7.*”

만약 Laravel 프로젝트를 이미 진행하고 있고, 그것을 개발하기 위해 설치를 진행하는 것이라면 사용 중인 버전에 꼭 맞춰서 설치해야 합니다. 동일 버전이 아닌경우 진행에 굉장히 방해될 가능성이 높습니다. 버전을 입력하지 않는다면 가장 최신의 버전으로 설치됩니다.

😋 설치된 라라벨 버전 확인방법
젠젠 어렵지 않습니다. (당연함) 
1. 설치화면 최상단에서 본인이 설치한 버전 확인하기

D:\Bitnami\apache2\htdocs>composer create-project --prefer-dist laravel/laravel blog1
Creating a “laravel/larave project at“./blog1”
Installing laravel/laravel (v8.4.2) // 라라벨8로 설치됨을 확인
  - Installing laravel/laravel (v8.4.2) : Extracting archive​

D:\Bitnami\apache2\htdocs>composer create-project --prefer-dist laravel/laravel blog1 “7.*”
Creating a “laravel/larave project at“./blog1”
Installing laravel/laravel (v7.30.1) // 라라벨7로 설치됨을 확인
  - Downloading laravel/laravel(v7.30.1) // 기존에 없었기에 새로 설치되는 모습
  - Installing laravel/laravel (v7.30.1) : Extracting archive

2. 서버의 초반 화면을 통해 버전을 확인하기

이제 Bitnami/apache2/htdocs 디렉토리에 우리가 만든 'blog1' 이라는 디렉토리가 자동으로 생성되었음을 확인할 수 있습니다.

본격적으로 개발을 시작하기 위해 서버를 실행시키도록 하겠습니다. 서버를 실행시키기 위해 라라벨이 설치된 경로로 이동한 후 명령어를 입력해 서버를 실행시킵니다.

D:\Bitnami\apache2\htdocs\blog1>php artisan serve

👀 참고하세요
- 이동 명령어 : cd
- 서버 실행 명령어 : php artisan serve
- 서버 중단 : ctrl+c

Larvel 서버가 켜지면서 몇번 포트로 서버를 실행시키고 있는지 알려줍니다. ( 기본 : http://127.0.0.1:8000 )우리는 그 주소를 그대로~ 입력하고 접속이 된다면 정상적으로 Laravel 설치를 끝낸것입니다.

 

 

이 화면이 아니라고요? 당신의 Laravel 버전은 7.* 버전이 아닙니다.

 

 

3. Laravel 구조 설명

 

드디어 문제가 생기면 처음부터 다시 설치하는게 빠른 Laravel 초기셋팅이 끝났습니다

Laravel의 기본 구조를 보도록 하겠습니다. 편집기는 아무거나 상용해도 좋습니다만 Visual Studio Code를 추천드립니다. 해당 게시글에서는 Atom을 사용하였습니다.

여튼, 편집기로 Laravel이 설치된 디렉토리를 열면 다음과 같은 구조가 나옵니다.

app	Laravel로 개발하는 애플리케이션의 소스 코드가 위치하는 곳 Route 설정, Model, Controller 가 존재함 가장 중요한 곳
bootstrap	프레임워크 부팅에 필요한 파일과 속도를 위해 컴파일 된 app.php 파일이 위치하며 라우트나 서비스 캐시 파일과 같은 cache 디렉토리를 가지고 있음
config	애플리케이션의 설정 파일을 포함하고 있음
database	데이터베이스 스키마를 관리하는 마이그레이션, 초기 데이터를 설정하는 시드 데이터, 모델에 데이터를 입력하기 위한 팩토리 가 위치함
public	img, css, 글꼴, javascript같은 정적 리소스와 laravel의 인덱스 파일 index.php가 위치
resource	뷰파일, css, js파일이 존재하는 디렉토리. controller 다음으로 많이 쓰임 .blade.php이다.
routes	디렉토리 안에 들어 있는 라우트 파일에 정의되어 있다.
env.	파일에서 db 정보를 변경 할 수 있다.
migration	데이터베이스를 수정하고 데이터베이스 스키마를 공유할 수 있도록 해주며 손쉽게 데이터베이스 스키마를 만들 수 있다.

Laravel을 사용하기 위해서는 명령어도 알아야 하는데요. 아쉽게도 저는 천재가 아니라서 인터넷을 사용합니다.

라라벨 artisan 명령어 - 제타위키

 

 

4. Laravel 작동 원리

라라벨은 Router, Controller, model, View(MVC 패턴)가 상호작용되어 움직입니다. 

각각의 상호작용에 대해 간단하게 정리하겠습니다. 처음에는 어려울 수 있으나 이해만 하면 굉장히 매우 쉽습니다.

 

Router ➡ View
Router는 연결해주는 다리입니다.

Route::get(‘/’, function ( ) {
   return view(‘welcome’);
});​

해당 코드는 '/'라는 경로를 받게 되면 welcome이라는 이름을 가진 view 파일을 보여준다는 것입니다.

Route::get(‘/hello’, function ( ) {
   return view(‘welcome’);
});​

다음과 같이 '/'를 'hello'로 변경하면 [아이피주소]:[포트번호]/ 가 아니라 [아이피주소]:포트번호/hello 로 접속해야 welcome이라는 이름을 가진 view파일을 보여줍니다.

View는 보여주는 화면입니다.
기본적으로 라라벨에서는 .bloade.php를 사용합니다.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

그러면 router는 어떻게 해당 화면을 불러올 수 있는 것일까요.
직접 만들어보면서 진행하는것이 이해에 도움이 됩니다.
1. views 디렉토리에 contact.blade.php 파일을 생성하고 원하는 내용을 입력하세요

<body>
  <ul>
    <li><a href="/">welcome</a></li>
    <li><a href="/contact">contact</a></li>
    <li><a href="/home">home</a></li>
  </ul>
</body>

2. web.php에서 Route 를 만들어 contact 페이지로 갈 수 있도록 다리를 연결해줍시다.

Route::get(‘/contact’, function ( ) {
   return view(‘contact’);
});

3. /contact 로 접속하면 우리가 만들었던 view가 잘 출력되고 있음을 확인할 수 있습니다.

Router ➡ Controller ➡ View

Controller는 특정 페이지에서 submit을 눌렀을 때 데이터가 제대로 매칭이 되는지 입력값이 데이터베이스에 존재하는지 등을 확인하는 역할을 합니다.
이 또한 실습을 진행해 학습하도록 하겠습니다. 

D:\Bitnami\apache2\htdocs\blog1>php artisan make:controller Blogcontroller
Controller created successfully.

cmd에서 명령어를 사용해 Blogcontroller를 생성합니다.
app/Http/Controllers/Auth 에 Blogcontroller.php가 생성되었습니다.

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class Blogcontroller extends Controller
{    
   public function door()
   {
        return view(‘blog’);
   }
}

door함수를 호출 받으면 blog view를 보여주는 함수를 만듭니다. blog view도 만들어야겠지요?
내용은 아무내용이나 입력하셔도 좋습니다.

블로그 페이지 아무내용

이후 다리의 역할을 한다는 Route를 사용해서 연결시켜주도록 합니다.

Route::get(‘/blog’, ‘Blogcontroller@door’)->name(‘door’);

해당 코드는 /blog 경로로 가게 되면 BlogController의 door 함수를 호출한다는 의미입니다. 실제로 /blog 경로로 접속을 하면 blog view가 잘 출력됨을 확인할 수 있습니다.

Router ➡ Controller ➡ Model ➡ View

많은 사람들이 라라벨을 사용하는 이유 중 하나가 위의 네가지 과정을 손쉽게 전부 사용할 수 있다는 것입니다. 자세한건 DB를 활용하는 페이지를 제작해보는 실습을 진행해봅시다.

D:\Bitnami\apache2\htdocs\blog1>php artisan make:model Blog -mc
Controller created successfully.
Created Migration: 2020_11_19_075739_create_blogs_table

cmd창에서 명령어를 이용해 model, migration, controller를 생성합니다. ( -mc가 migration과 controller를 같이 생성하라는 의미 )
이제 슬슬 명령어 프롬프트 창과 친해졌을까요? 어색해도 괜찮습니다. 저도 리눅스를 사용해봤음에도 불구하고 N년째 어색해하는 중이니까요.
설치 중 'Controller already exists!'와 같은 경고가 뜰 수 있습니다. 말 그대로 이미 Controller는 설치되어있다는 의미니 그렇구나 하고 넘어가시면 됩니다.

이중 migrations 폴더의 어쩌고저쩌고_blogs_table.php 에서 DB의 테이블과 값에 대한것을 설정할 수 있습니다.

public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedInteger('user_id');
            $table->string('title');
            $table->text('body');
            $table->timestamps( );
        });
    }

이게 뭐냐고요? 데이터베이스의 테이블을 생성해주는 코드입니다. 일단 따라 쳐보세요. 우리가 이 파트에서 이해하고자 하는 것은 Laravel의 작동원리입니다.
만약 DB연결을 진행하지 않았다면 DB연결을 먼저 진행해주세요.
명령 프롬프트에서 실행되지 않은 전체 마이그레이션을 실행시킵니다.

D:\Bitnami\apache2\htdocs\blog1>php artisan migrate
Migrating: 2020_11_19_075739_create_blogs_table
Migrated:  2020_11_19_075739_create_blogs_table (0.03 seconds)

마이그레이션이 실행되면 연결되어있는 MySQL에 migrations에서 설정한 blogs라는 스키마와 테이블 값들을 생성하게 됩니다.

이제 테이블도 생성했으니 데이터값을 집어넣어보도록 합시다. 먼저 데이터를 입력받을 view를 생성합니다.
create.blade.php

@extends('layouts.app')
 
@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <h1>Create Page</h1>
      <form action="{{route('store')}}" method="POST">
        @csrf
        <input type="text" name="title" placeholder="title"><br>
        <input type="text" name="body" placeholder="body"><br>
        <button>저장</button>
      </form>
    </div>
  </div>
</div>
@endsection

참고 : @csrf에 대한 정보

데이터 매칭 확인역할을 해줄 controller를 수정해줍시다.
Blogcontroller.php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Blog;  // Blog 모델과 연결해주는 역할
 
class Blogcontroller extends Controller{    
   public function door( ){
        return view(‘blog’);
   }
   public function create( ){
        return view(‘create’);
   }
   public function store(Request $request){ // 입력값을 조회하기 위한 함수
        Blog::create([
	     ‘user_id’ => $request->user( )->id, // 로그인 된 유저 id를 받아옴
	     ‘title’ => $request->title,
	     ‘body’ => $request->body,
	]);
        return redirect( )->back( ); // 다시 create view 페이지로 돌아오게 함
   }	
}

이제 연결다리 역할을 하는 route를 수정해줍시다

<?php
 
use Illuminate\Support\Facades\Route;
 
Route::get(‘/contact’, function ( ) {
   return view(‘contact’);
});
 
Route::get(‘/’, function ( ) {
   return view(‘welcome’);
});
 
Auth::routes( );
 
Route::get(‘/home’, ‘HomeController@index’)->name(‘home’);
Route::get(‘/blog’, ‘Blogcontroller@door’)->name(‘door’);
 
Route::get(‘/create’, ‘Blogcontroller@create’);
Route::post(‘/create’, ‘Blogcontroller@store’)->name(‘store’);

get이 아니라 post를 사용한 후 ->name('store');를 붙여주는 이유는 라우터에 이름을 지정하여 경로(url) 또는 리다이렉션을 생성할 때 해당 라우터 이름을 사용하기 위함입니다.

모델역할을 하는 Blog.php에는 입력 값으로 받을 테이블 명들을 입력해줍니다.

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Blog extends Model
{    
      protected $fillable = [
	‘user_id’, ‘title’, ‘body’,
      ];
}

이제 create 페이지에 접속해서 데이터를 입력했을 시 정상적으로 작동하는지 확인합니다.
정상작동이 된다면 리다이렉트로 인해 create 첫 페이지로 돌아올 것입니다.
데이터베이스에도 입력한 뎅이터가 잘 들어갔는지 확인해줍니다.

 

 

 

5. Laravel로 로그인 시스템 구현하기

 

실습은 서버를 킨 상태로 진행합니다.

💀 코드를 수정하더라도 즉시 반영이 되는게 아니라 잠시 후에 반영이 되는 경우
Bitnami\php\php.ini의 설정 중 opcache.enable=1 를 찾습니다. 요것은 php 수정 시 30초~1분 뒤에 반영하기 때문에 개발 중에는 opcache.enable=0 으로 변경하면 즉시 반영이 가능하게 할 수 있습니다. 
다음 opcache.revalidate_freq=60 을 찾습니다. 이것은 60초 뒤에 php 파일 변경이 적용된다는 소립니다. 1분 1초가 소중한 상황에서는 못기다립니다. opcache.revalidate_freq=0 으로 변경해 적용되는 것을 0초로 변경해줍시다.

.env 파일에서 DB 이름과 패스워드를 입력합시다. 이때 패스워드는 APM 설치시 입력했던 패스워드입니다.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=[ 데이터베이스 이름 ]
DB_USERNAME=root
DB_PASSWORD=[ 패스워드 ]

라라벨은 기본적으로 미리 만들어진 테이블이 존재합니다.

database\migrations 에서 미리 만들어진 테이블을 확인할 수 있습니다.

그중 ~_password_rest_table.php을 열면 아래와 같은 코드를 확인할 수 있는데요.

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreatePasswordResetsTable extends Migration
{    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('password_resets', function (Blueprint $table) {
            $table->string('email')->index();
            $table->string('token');
            $table->timestamp('created_at')->nullable();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('password_resets');
    }
}

이것은 비밀번호 리셋기능을 담당하는 테이블입니다. 놀랍지 않나요. 비밀번호 리셋기능이 있는 테이블이 기본적으로 존재한다니...

이제 로그인과 회원가입 메뉴를 제작해봅시다.

라라벨 7.0은 로그인 페이지를 만들기 위해 다음과 같은 과정을 거쳐야 합니다.

1. 라라벨 laravel/ui composer 패키지 설치하기

D:\Bitnami\apache2\htdocs\blog1>compser require laravel/ui “2.*” 
//라라벨 7.0과 호환되는 버전​

2. 로그인 페이지 만들기

D:\Bitnami\apache2\htdocs\blog1>php artisan ui vue --auth

3. 설치완료 하면 다음과 같은 내용이 출력된다구요!

D:\Bitnami\apache2\htdocs\blog1>php artisan ui vue --auth
Vue scaffolding installed successfully.
Please run “npm install && npm run dev” to compile your fresh scaffolding.
Authentication scaffolding gnerated successfully.

이제 디렉토리가 잘 만들어졌는지 확인해볼까요 😊

이야 티스토리에서 이 사진 줄이는 법 아시는분~

resources/views에 auth 디렉토리와 home.blade.php가 생성되었고,

app/Http/Controller에 auth 디렉토리와 HomeController.php가 생성되었음을 확인할 수 있습니다.

이제 실행해놨던 브라우저를 새로고침하면 오른쪽 상단에 로그인과 회원가입버튼이 생성되었음을 확인할 수 있습니다. 해당 버튼을 누르면 화면이 전환됩니다.

짜잔! 각각 로그인과 회원가입창입니다. 하지만 css가 적용되지 않아 디자인적으로는 난감합니다. 

당시엔 css를 기본으로 가져오지 못했는데 최신버전은 자동적용 될지도 모르겠군요 🤔

css 직접 가져오기 클릭하세요

주석 빼고 복사하면 됩니다.

public 디렉토리에 css 디렉토리를 생성 한 후 app.css 파일을 생성해 복사한 내용을 저장합니다.

css가 적용이 완료된 모습입니다.

아직은 회원가입과 로그인을 진행할 수 없습니다. DB에 table을 생성하지 않았기에 데이터를 만들어도 저장할 공간없어 오류가 발생할 것입니다. table을 생성해야하는데 데이터베이스가 존재하지 않는다면 먼저 데이터베이스를 생성해주어야 합니다.

데이터베이스를 생성해주었다면 cmd창에서 명령어를 이용해 데이터베이스에 테이블과 값들을 넣어줍니다.

D:\Bitnami\apache2\htdocs\blog1>php artisan migrate

D:\Bitnami\apache2\htdocs\blog1>php artisan ui vue --auth
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.09 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.04 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.02 seconds)

이후 phpMyAdmin 에서 테이블과 값들이 잘 생성되었음을 확인하고 또 확인하도록 합시다.

브라우저로 돌아와 회원가입과 로그인을 진행하면 문제없이 잘 됩니다.

데이터베이스에도 회원가입시 입력했던 데이터들이 잘 저장됩니다. 👏

 

 

 

6. Laravel로 리스트, 보기, 저장, 수정 진행하기

 

참고한 블로그

게시판 만들기1 -목록페이지만들기-

 

스스로 게시판을 만들 수 있어야만 첫걸음을 내딛었다고 할 수 있습니다.

Laravel로 CRUD를 진행하도록 하겠습니다.

 

Router

/* 리스트 */
Route::get(‘/cacaos/index’, ‘CacaoController@index’);
/* 저장 */
Route::get(‘/cacaos/create’, ‘CacaoController@create’);
Route::get(‘/cacaos/create’, ‘CacaoController@store’);->name(‘store’);
/* 보기 */
Route::get(‘/cacaos/{cacao}’, ‘CacaoController@show’);
/* 수정 */
Route::get(‘/cacaos/{cacao}/edit’, ‘CacaoController@edit’);
Route::PATCH(‘/cacaos/{cacao}’, ‘CacaoController@update’);
/* 삭제 */
Route::DELETE(‘/cacaos/{cacao}/delete’, ‘CacaoController@destroy’);​

 

위의 코드는 아래와 같이 간단하게 작성이 가능합니다.

Route::resource(‘cacao’, ‘CacaoController’);​

 

하지만 리소스풀 컨트롤러를 사용하지 않을 경우 아래 라우터의 순서가 다르면 에러가 발생할 수 있습니다.

👇 리소스풀 컨트롤러에 의해 구성된 액션 👇

Verb	URI	액션명	라우트(Route) 명
GET	/cacaos	index	cacaos.index
GET	/cacaos/create	create	cacaos.create
POST	/cacaos	store	cacaos.store
GET	/cacaos/{cacao}	show	cacaos.show
GET	/cacaos/{cacao}/edit	edit	cacaos.edit
PUT/PATCH	/cacaos/{cacao}	update	cacaos.update
DELETE	/cacaos/{cacao}	destroy	cacaos.destroy

 

1. 테이블 추가 및 설정

명령어를 이용해 모델, 마이그레이션, 컨트롤러 파일을 생성합니다. (경로 중요!! 경로 꼭 확인하세요!)

> php artisan make:model cacao -mc​

무엇부터 진행했었는 기억나시나요? migrations 진행합니다.
데이터베이스에 테이블을 만들어주는 과정이였지요.

어쩌고저쩌고_create_cacao_table.php

public function up(){
	Schema::create(‘cacaos’, function (Blueprint $table)  {
		$table->id();
		$table->text(‘title’);
		$table->string(‘body’);
		$table->timestamps();
	});
}

 코드 작성 후 마이그레이션을 해줍니다.

> php artisan migrate

마이그레이션이 완료된 후 테이블이 잘 생성되었는지 확인해주세요. 만약 마이그레이션을 잘못 입력해서 다시 되돌리고 싶을 경우에는 rollback 명령어 이용하면 가장 최근에 마이그레이션을 실행한 내용을 취소시킬 수 있습니다.

> php artisan migrate:rollback

resoures/views 에 cacao 디렉터리를 생성하고 view 파일을 생성합니다.
그리고 해당 모델로 가서 대량할당이 가능하도록 설정해줍니다.
app/cacao.php

class cacao extends Model{
	protected $fillable = [‘title’, ‘body’,];
}

데이터베이스의 테이블에 데이터가 비어있으니 팅커콘솔로 인서트해줍니다.

> php artisan tinker

직접 MySQL에서 값을 임의로 삽입하는 방법도 있습니다.

INSERT INTO `cacaos`(title, body) VALUES ('title1','body');
INSERT INTO `cacaos`(title, body) VALUES ('title2','body');
INSERT INTO `cacaos`(title, body) VALUES ('title3','body');
INSERT INTO `cacaos`(title, body) VALUES ('title4','body');

데이터 값을 잘 호출해오는지 테스트를 진행해야합니다.
먼저 게시판 목록 페이지로 가는 라우터 설정을 해줍니다.
routes/web.php

Route::get(‘/cacaos’, ‘CacaoController@index’);

cacao 컨트롤러에서 데이터베이스의 데이터를 불러오도록 코드를 변경합니다
App/Http/Controllers/CacaoController

namespace App\Http\Controllers;
use Illuminate\Http\Request;
 
class CacaoController extends Controller{
	protected function index(){
	$cacaos = \App\cacao::all();
	return $cacaos;
}

/cacaos 에 접속하면 입력했던 테이블에 있는 데이터들이 페이지에 출력되고 있음을 확인할 수 있습니다.

2. 리스트

CacaoController.php

class CacaoController extends Controller{
	protected function index(){
	$cacaos = cacao::all();
	return view(‘cacao.index’, compact(‘cacaos’));
	}
}​

 

index메서드에 view를 지정하고 데이터를 불러와 view에 위임합니다.
이때 compact에 들어가는 cacao는 위에서 지정한 변수 ($cacao) 입니다.

index.blade.php

<html>
<head>
  <title></title>
</head>
<body>
    <h1>게시판 목록</h1>
    <table class = "text-center" style="margin:20px; display:block;">
      <tr>
        <th>아이디</th>
        <th>제목</th>
        <th>내용</th>
        <th>관리</th>
      </tr>
      @foreach($cacaos as $cacao)
      <tr>
        <td>{{$cacao->id}}</td>
        <td>{{$cacao->title}}</td>
        <td>{{$cacao->body}}</td>
        <td>
          <button type="button">보기</button>
          <button type="button">수정</button>
          <form style="margin-left:20px; display:contents;">
            @method('DELETE')
            @csrf
            <button type="submit">삭제</button>
          </form>
        </td>
      </tr>
      @endforeach
      <tr>
        </tr>
    </table>
    <button type="button" style="margin-left:120px; display:block;">글쓰기</button>
</body>
</html>​

view 파일에서 foreach문을 사용해 데이터를 반복해서 보여주도록 합니다.
브라우저에서 /cacaos로 접속하면

전혀 예쁘지 않은 게시판 리스트가 완성되었습니다!

3. 자세히 보기

보기버튼을 눌렀을때 출력될 페이지를 만들어봅시다.
일단 먼저 보기버튼을 눌렀을때 어떤 반응이 일어날지를 정해야겠지요.
onClick를 이용해 버튼을 누르면 해당 경로로 갈 수 있도록 지정해줍시다.
index.blade.php

<button type=“button” onclick=“location.href=’cacaos/{{$cacao->id}}’”>보기</button>​

 

보여주기 위한 view파일인 show.blade.php 파일을 생성해주고 router와 Controller를 설정합시다.
show.blade.php

<h1>자세히 보기</h1>
<div style="margin-left:20px;">
  title : {{ $cacao->title }}
</div>
<div style="margin-left:20px;">
  body : {{ $cacao->body }}
</div>​

web.php

Route::get(‘/cacaos/{cacao}’, ‘CacaoController@show’);​

CacaoController.php

public function show(cacao $cacao){
	return view(‘cacao.show’, compact(‘cacao’));
}

4. 저장하기

저장 버튼을 누르면 글을 작성할 수 있는 페이지로 이동할 수 있도록 제작합니다.
먼저 저장 button에 onClick 이벤트를 추가해줍니다.
index.blade.php

<button type="button" style="margin-left:120px; display:block;" onclick="location.href='/cacaos/create'">글쓰기</button>​

 

이후 create.blade.php를 생성하고 라이터를 설정해주고~ 컨트롤러에 뷰를 지정하고~ 하는 과정을 거칩니다.
create.blade.php

<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1>글 작성</h1>
    <form method='post' action="/cacaos">
      @csrf
      <div>
        <input type="text" name="title" placeholder="제목" />
      </div>
      <div>
        <textarea name="body" placeholder="내용"></textarea>
      </div>
      <div>
        <button>글 작성</button>
      </div>
    </form>
  </body>
</html>​

web.php

Route::get(‘/cacaos/create’, ‘CacaoController@create’);​

CacaoController.php

public function create(){
	return view(‘cacao.create’));
}​
 
public function store(){
	cacao::create(request()->validate([ // 유효성검사와 데이터를 삽입함
	‘title’ => [‘required’, ‘min:3’],
	‘body’ => [required’, ‘min:3’],
	]));
 
	return redirect(‘/cacaos’);
}

 
이때 cacao 모델이 코드 상단에 선언되지 않았다면 참조가 불가능하다는 오류가 발생합니다. \App\cacao 라고 적거나 코드 상단에 use App\cacao를 선언하면 해결됩니다.

5. 수정하기

수정페이지 또한 수정버튼을 누르면 기존 내용이 적혀있는 페이지로 넘어가고 해당 페이지에서 수정이 가능한 형태로 제작을 합니다.  페이지 만드는 설명은 이제 생략하겠습니다 ㅎㅎ 🙄

index.blade.php

<button type="button" onclick="location.href='cacaos/{{$cacao->id}}/edit'">수정</button>​

edit.balde.php

<h1>수정하기</h1>
<form action="/cacaos/{{$cacao->id}}" method='post'>
  @csrf
  @method('PATCH')
  <input type="text" name="title" value="{{$cacao->title}}" /><br>
  <input type="text" name="body" value="{{$cacao->body}}" /><br>
  <button type="submit">수정</button>
</form>​

web.php

Route::get(‘/cacaos/{cacao}/edit’, ‘CacaoController@edit’);
Route::PATCH(‘/cacaos/{cacao}’, ‘CacaoController@update’);

게시판 수정 페이지로 가는 route와 update()메서드로 가는 route 설정을 해줍니다.

CacaoController.php

public function edit(cacao $cacao)
{
	cacao::create(request()->validate([
	‘title’ => [‘required’, ‘min:3’],
	‘body’ => [required’, ‘min:3’],
	]));
 
	return view(‘cacao.edit’, compact(‘cacao’));
}
public function update(Request $request, cacao $cacao)
{
	$cacao->update(request([‘title’, ‘body’]));
	return redirect(‘cacaos’);
}

edit메서드에 view를 지정하고 데이터를 view에 위임해줍니다.
update() 메서드를 작성해줍니다.

6. 삭제

삭제같은 경우는 버튼을 누르면 바로 삭제가 진행될 수 있도록 만듭니다.
index.blade.php

<td>
  <button type="button" onclick="location.href='cacaos/{{$cacao->id}}'">보기</button>
  <button type="button" onclick="location.href='cacaos/{{$cacao->id}}/edit'">수정</button>
  <form method="POST" action="/cacaos/{{$cacao->id}}" style="margin-left:20px; 
  display:contents;">
    @method('DELETE')
    @csrf
    <button type="submit">삭제</button>
  </form>
</td>​

폼 태그 안에 method를 이용해 버튼을 누르면 method가 실행될 수 있도록 합니다.

web.php

Route::DELETE(‘/cacaos/{cacao}’, ‘CacaoController@destroy’);​

삭제 method로 가는 route설정을 해줍니다.
CacaoController.php

public function destroy(cacao $cacao){
	$cacao->delete();
	return redirect(‘cacaos’);
}

 Controller에서 글이 삭제되는 로직을 작성해줍니다.

 

 

 

게시글이 너무 길어져 나눠서 쓸까 생각했지만 예전 버전이라 많이 부족한거 같아 고민끝에 한 번에 정리해서 올립니다.

요즘은 기업에서 PHP, 라라벨을 잘 안쓰는거 같더라구요. 흑흑

빨리 React(라라벨 글에서 리엑트 이야기하기)에 익숙해져서 취업이 되면 좋겠네요... 😭