CodeHoon

안녕하세요 상훈입니다.

Laravel(라라벨) 의 style을 Bootstrap 의 css로 자동 지정하게 하는 방법을 포스팅하겠습니다.

* 필요사항 : Npm, Composer, Laravel

1. 프로젝트 생성
2. 프로젝트 내로 이동
3. ui설치
4. Bootstrap으로 ui를 지정
5. npm install 를 통한 최신버전 설치
6. 확인(route + view + css 적용 확인)

1. 프로젝트 생성

$ composer create-project laravel/laravel 프로젝트이름

2. 프로젝트 내로 이동

$ cd 프로젝트 이름

3. ui 설치

$ composer require laravel/ui

4. Bootstrap으로 ui를 지정

$ php artisan ui bootstrap

5. npm install

$ npm install 

6. 확인(view + css 적용 확인 + route )

- view

새로운 view 파일 한개를 생성합니다.  저는 test.blade.php 로 하겠습니다.

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<input type="text" class="form-control">
<button class="btn btn-primary">save</button>

cdn을 따오는 것이 아닌 asset() 을 이용한 default css 경로 지정입니다.

- web.php

Route::get('/test', function () {
    return view('test');
});

7. LAST - 결과확인

$ php artisan serve
// 다른 bash
$ npm install & npm run watch

localhost:8000/test 로 접속하면,

css가 적용되어져 있는 것을 확인하실 수 있습니다.

이상입니다.

참고

안녕하세요 상훈입니다.

Simple-Book-App 강좌 완료 하였습니다. 실제 걸린 시간은 저것의 xN 하면 되고...

저는 아무것도 모르는 감자입니다!! 하하.

사용한 UI Format 은 BootStrap , 그리고 FontAwesome 입니다!

BackEnd 언어는 Laravel(PHP) 입니다.

원래는 Front Framework로 Vue.js를 넣으려고 했으나,

아직 그 단계는 아니고 Laravel에 Bootstrap, Fontawesome 정도만 얹어서 진행하게 되었습니다.

구성 내용으로는 기본적인 CRUD를 적용하였습니다.

추가, 수정, 삭제, 상세보기(를 안했네요). 상세히 볼게 이미지 말고는 없어서 딱히 할 것도 없습니다. ㅎㅎ

기존에 알고 있던 내용도 있었고, 처음 보는 내용도 있었습니다.
$message, route(' ', data), if를 이용한 기존 데이터 존재유무에 따른 UI 등등...

Bootstrap을 이용하여 NavBar를 구성하였고,

Font-Awesome을 이용하여 아이콘(icon)을 가져오기도 하였습니다. 

그런데, 이상하게도 이미지의 경로를 못잡아서 해당 내용이 제대로 뜨질 않고
alt 에 작성해놓은 내용만 표기가 되더라구요.. 왜그러는걸까.... ㅠㅠ

이부분은 조금 더 공부해봐야 할 것 같습니다. [ 화이팅..! 미래의 상훈! ]

안녕하세요 상훈입니다.

Laravel - validation 부분에서 Request를 이용하여 Controller에 아무것도 작성하지 않은 채로 유효성 조건을 작성할 수 있는 방법을 포스팅하겠습니다.

1. Request 생성, 작성
2. Controller에서 조건 작성

생각보다 짧고 간단합니다!

테이블을 먼저 소개하겠습니다. 

이 중에서 3가지, Name, Description, Category 만 유효성 검사를 하도록 하겠습니다.

$ php artisan make:Request 파일명

 - 말 그대로 Request를 생성하는 명령어 입니다.

App/Http/Requests/파일명.php

로 해당 내용이 생성되어졌을 것입니다. 확인해주세요!

이제 Request의 내용을 작성하도록 하겠습니다.

ex) name 이라는 컬럼은 '필수', '최소 2글자', '최대 120글자' 로 설정하였습니다. 

사용하시는 Controller로 돌아와서,

  - use로 해당 Request를 추가해주고,

원래 Form의 내용을 전송 받을 때 Request 사용하던 것을 Request파일명으로 변경합니다.

그럼 끝!!!
확인해볼까요?

title에 작성한 내용은 유효성 검사를 통과하여 danger 문구가 없지만,
나머지 값들은 작성하지 않았기에 danger가 출력되었습니다.

감사합니다.

혹시 Html 부분을 모르시겠다? 하시는 분들만 봐주세요

@if($errors->has('name'))
  <span class="text-danger">{{ $errors->first('name') }}</span><br>
@endif

has('name') 부분과 first('name') 부분만 태그의 이름과 동일하게 변경해주시면 됩니다.

이상입니다.

안녕하세요 상훈입니다. 

라라벨에서 게시글의 페이징 처리하는 방법에 대해 포스팅하겠습니다.

먼저, ui 설정하고, 진행하겠습니다. [ 이미 하신 분들은 건너뛰어도 무방합니다. ] 

$ composer require laravel/ui
$ php artisan ui bootstrap
$ npm install & npm run dev

1. Route
2. Controller
3. view

1. Route

Route::get('/', function () {
    $posts = Post::paginate(1);
    return view('home', compact('posts'));
});

 - table:posts의 데이터를 home.blade.php 경로로 보내준다고 선언합니다.

2. Controller

 - 컨트롤러에서는 바로 home.blade.view를 return 시켜줍니다.

 public function index()    {        
     return view('home');    
 }

3. View

<div class="card">
  <div class="card-body">
    @foreach($posts as $post)
      <p>{{ $post->title }}</p>
      <p>{{ $post->description }}</p>
    @endforeach
  </div>
  {{ $posts->links() }}
</div>

결과물

안녕하세요 상훈입니다.

테이블 데이터를 업데이트 하는 2가지 방법을 포스팅하겠습니다.

// Router : web.php
Route::get('/posts/update/{id}', 'PostController@update');

// Controller
PostController

//table 
posts

//column 
title, body

1. save() 메서드 사용하는 방법

 - 정공법이지만, 불필요하고 깔끔하지 않습니다. 2번을 추천합니다. 

  PostController

public function update ($id) {
        $post = Post::find($id);
        $post->title = "updated title";
        $post->body = "updated body";
        $post->save();
    }

입니다. $id 값을 라우팅으로 받아오면, 해당하는 id를 가진 데이터를 조회하고, 직접 하나씩 바꿔주는 겁니다.

그리고 마지막에는 저장까지. 아주 정공법이죠. 비효율적이기도 하구요.

2번으로 넘어가겠습니다.

2. update() 메서드 사용하는 방법

Post::where('id', $id)->update([
            'title'=>'updated title2',
            'body'=>'updated body2'
        ]);

update 엘로퀀트(Eloquent)를 사용하여 해당 테이블의 컬럼의 id를 조회하고 업데이트하는 과정입니다.

자동으로 save.

이제 저장해주시고, uri를 통해 접속해주시면, table에 데이터가 변경되었음을 확인하실 수 있습니다.

이상입니다.

안녕하세요 상훈입니다.

라라벨에서 slug 메서드를 이용해 무작위 데이터 생성하는 방법을 포스팅하겠습니다.

1. 라우팅 

Route::get('posts/store', 'PostController@store');

 - posts/store에 url을 타고 들어가면 데이터가 생성되도록 컨트롤러를 설정하도록 하겠습니다.

class PostController extends Controller
{
    // store post
    public function store () {
        $post = new Post;
        $post->title = "a new title";
        $post->body = "a new body";
        $post->slug = Str::slug($post->title);
        $post->user_id = 1;
        $post->save();
    }

}

 - slug: title과 똑같은 내용을 입력하겠다.

해당 uri에 접근하면, 자동으로 데이터가 입력됩니다.

자동으로 user_id도 증가한것을 확인하실 수 있습니다.

이상입니다.

안녕하세요 상훈입니다.

라라벨 - migration에서 명령어로 테이블의 컬럼을 추가하는 방법을 포스팅하겠습니다.

기본적인 테이블은 posts 라는 이름의 테이블로, 게시글을 저장하는 곳입니다.

그 안에 데이터가 이렇게 있다고 가정하고 컬럼을 추가하는 과정을 그려보도록 하겠습니다.

1. bash에서 migration 생성 (명령커맨드) 

php artisan make:migration add_user_id_to_posts_table

 - add   : 추가하겠다.

 - user_id  : 무엇을 ( user_id 라는 이름의 컬럼을)
   

** 자유롭게 작성해주셔도 무방합니다.

 - to  :  어떤 테이블에 

 - posts_table  :  적용하고자 하는 테이블명

2.  up() & down() 에 아래와 같이 작성

public function up()
    {
        Schema::table('posts', function (Blueprint $table) {
            $table->integer('user_id');

        });
    }

    public function down()
    {
        Schema::table('posts', function (Blueprint $table) {
            // rollback할 때
            $table->dropColumn('user_id');
        });
    }

3. migrate 실행

php artisan migrate

4. 테이블 확인

데이터에 default 값이 들어간 컬럼이 생성되었습니다. 

이상입니다.

안녕하세요 상훈입니다.

오늘은 제 생애 첫 강의 결제를 하였습니다. [ 할인 ] 을 하 였기 때문.

-> 15000원!! Event!!! (다른 할인 이벤트 하기만해봐 그냥)

강의 제목은

Udemy - [ Laravel classified ads web application from scratch ]

입니다. 무슨 뜻이냐면, 라라벨...ㅇ...... 제목 별로 신경안썼습니다.

제목보다는 내용이 중요한 법! 

강의 내용은 Laravel - Vue.js 같이 배우는 내용입니다.

현재 5% 까지 진행하였습니다.

이런식으로 웹어플리케이션을 만들어본다고 합니다.

현재까지(5%) 진행한 내용

1. 기본 설치
2. 라라벨 기본 배우기(라우팅까지)

공부를 하면서 살짝 현타가 왔는데, 왜냐하면 예전에 혼자 맨땅에 헤딩을 하면서 공부했던 라라벨8의 내용을 복습하는 느낌이었습니다. 

그 당시에 CRUD공부까지 다 했었는데, 그때 공부했던 방향과 유사하게 진행합니다. 앞으로 많은 강의가 남아있으니, 점차 난이도가 높아질 것으로 예상합니다.

그래도 처음 했을 때의 막막함은 안느껴지고,

MVC Framework 특유의 왔다갔다하면서 코딩해야하는 부분에서 울렁거리지 않았습니다. 

강의 개수는 총 197개, 강의 시간은 총 23시간 정도 됩니다   (언제 다듣냐)

 꽤.. 많네요 

강사님은 솔직히 영어 발음이 좋지 않아서 종종 뭐라고 말씀하시는지 안들릴 때가 많습니다. 만약 들으려고 하신다면 참고 바랍니다. 

강의 추천은 여기서 마치도록 하겠습니다. 감사합니다.