멍멍홈->라라벨_13. 로그인 구현을 위한 스타터키트 Breeze 설치 및 로그인 작업

728x90

♧ '멍멍홈을 라라벨로 새로 만들기' 프로젝트 목차 ♧ (보시려면 아래 더보기 를 눌러주세요.)

0. 라라벨(laravel) 개발 환경 구축하기-방법2 (Windows & 도커(docker) & sail 활용)

1. 기존 소스

2. 기존 소스를 하나의 블레이드로

3. 컨트롤러 하나 생성

4. javascript, css 정리

5. 기존 PHP 로직을 컨트롤러로

6. 블레이드 문법으로 수정

7. 외부 블레이드 파일, component 활용

8. (DB) Model 및 기타 파일 생성

9. (DB) 더미데이터를 한글로 만드는 방법

10. (DB) 모델, DB 활용 연습

11. (DB) 기존 데이터 배열을 DB로 변환

12. (DB) DB 및 모델을 이용하여 구현

13. 로그인 구현을 위한 스타터키트 Breeze 설치 및 로그인 작업

14. 로그인 창 뒷배경도 동영상이 보이도록 수정

15. 관리자 화면에서 전체 게시글 리스트 한번에 보기

16. 관리자 화면에서 게시글 수정하기

17. 관리자 화면에서 게시글 삭제하기

18. 관리자 화면에서 게시글 새로 작성하기

19. 방문자 수 구현하기 => 실패 => 성공

앞의 작업을 모두 완성한 후 또다시 만들고 싶은 것이 생겼다.

새글 작성시 웹페이지에서 직접 입력 후 저장을 하면 DB에 저장하도록 하는 기능.

물론 이 기능을 위해서는 우선 관리자로만 글을 작성해야 하며, 이를 위해서는 로그인이 필요할 것이고, 이를 구현하기 위해 직접 소스를 작성할 수도 있지만, 간단히 스타터키트로 Breeze 가 제공된다하여 공부할 겸 시도를 해보기로 한다.

0. 주의 사항

가. 처음에 필요없는 welcome.blade.php 파일을 지웠더니, 이번에 Breeze를 설치하던 중 welcome.blade.php 파일이 없다고 오류가 뜨면서 설치가 되지를 않네요. 그래서 빈 파일을 만들어 보았습니다.

나. 이후 문제 없이 설치되었다 생각하고, 살펴보니 이런... web.php 파일에 있던 내용들이 모두 사라지고, 새로운 내용들이 들어가 있네요. 기존 내용이 복잡한 것은 아니었기에 그냥 다시 추가 입력했습니다.

=> 따라서, Breeze를 설치하시려면, 아예 처음에 작업을 하시는 것을 추천드립니다.

1. Breeze 설치

composer require laravel/breeze --dev --ignore-platform-req=ext-fileinfo

php artisan breeze:install

2. Log in, Register 소스 활용

가. 첫 화면에 아래와 같이 Log in, Register 이 보이면 정상 설치 완료

나. 위 Log in, Register 부분의 소스 복사

@if (Route::has('login'))
    <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
        @auth
            <a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
        @else
            <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>

            @if (Route::has('register'))
                <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
            @endif
        @endauth
   </div>
@endif

다. 위 복사한 소스를 header.blade.php 의 적당한 장소에 붙여줍니다. 여기서는 아래와 같이 수정하여 넣었습니다.

- 위 파란색 부분이 로그인을 위한 부분을 수정해서 넣어준 부분임.

- Register 부분은 가입을 받지 않기 때문에 삭제함.

- 위 빨간색 부분은 추후 구현하기 위해 남겨둔 부분임.

    <div style="left: 0px;width:100%;">
        <table border=0 width=100% cellspacing=0 cellpadding=0>
            <tr>
                <td class='p_title'>
                    &nbsp;🐾자 멍멍쌤의 취미생활<br>
                </td>
                <td align=center valign=bottom class='p_title1'>
                    <font size=3 color=white>
                    오늘:11, 어제:22, 전체:33 (since 2003)
                    </font>
                </td>
                <td valign=bottom class='p_title1'>
                    @if (Route::has('login'))
                        <div class="hidden top-0 right-0 px-6 py-0 sm:block">
                            @auth
                                <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 dark:text-gray-500 ">🐾</a>
                            @else
                                <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 ">🐾</a>
                            @endauth
                        </div>
                    @endif
                </td>
                <td align=right valign=bottom class='p_title1'>
                    <a href='https://mungssem.kr/photo/port/port.php' target=_Blank>추억의 취미 작품집
                        보기</a>&nbsp;&nbsp;&nbsp;<br>
                </td>
                <td align=right valign=bottom class='p_title1'>
                    <a href='https://mungkhs2.cafe24.com/rb/?r=home' target=_Blank>옛날 멍멍홈 방문</a>&nbsp;&nbsp;&nbsp;<br>
                </td>
            </tr>
        </table>
    </div>

3. tailwind.css

가. 위 로그인 코드 중 class 부분에 보이는 코드들은 tailwind.css를 이용한 것입니다. 따라서 이를 제대로 활용하려면 index.blade.php 에 아래와 같이 코드를 추가시켜 주어야 합니다.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>🐾자 멍멍쌤 홈</title>

    <link href="/css/app.css" rel="stylesheet">
    
    //아랫줄 추가
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    
    <script src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js'></script>
    <script src="/js/app.js"></script>
</head>

나. 혹시 위 tailwind.css 사용시 이미지와 글씨가 같은 줄에 나오지 않는 경우가 있습니다. 이럴때는 아래처럼 코드를 수정해 주어야 합니다.

<img src='/images/ball.gif'>

위 이미지 테그에 아래와 같이 class='inline' 를 붙여줌.

<img src='/images/ball.gif' class='inline'>

4. 관리자 생성

가. 위 Register에서 정보 입력 후 관리자를 한명 생성합니다.

나. 이후 다른 회원 가입이 필요없을 경우 위 'Register' 부분 및 'Forgot your password?' 부분 등은 삭제해줌.

🍺🍺 작업한 모든 소스는 아래 링크에서 확인하실 수 있습니다. 🍺🍺

https://github.com/mmssem/munghome

GitHub - mmssem/munghome

Contribute to mmssem/munghome development by creating an account on GitHub.

github.com

728x90

저작자표시 (새창열림)

'라라벨(laravel)' 카테고리의 다른 글

멍멍홈->라라벨_15. 관리자 화면에서 전체 게시글 리스트 한번에 보기 (0)	2022.10.05
멍멍홈->라라벨_14. 로그인 창 뒷배경도 동영상이 보이도록 수정 (0)	2022.10.04
멍멍홈을 라라벨로 새로 만들기_12. (DB) DB 및 모델을 이용하여 구현 (0)	2022.10.04
멍멍홈을 라라벨로 새로 만들기_11. (DB) 기존 데이터 배열을 DB로 변환 (0)	2022.10.03
멍멍홈을 라라벨로 새로 만들기_10. (DB) 모델, DB 활용 연습 (0)	2022.10.03

1. Breeze 설치

2. Log in, Register 소스 활용

3. tailwind.css

4. 관리자 생성

'라라벨(laravel)' 카테고리의 다른 글

티스토리툴바