멍멍홈을 라라벨로 새로 만들기_7. 외부 블레이드 파일, component 활용

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

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

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. 방문자 수 구현하기 => 실패 => 성공

---

1. @include() 

가. index.blade.php 에서 아래 소스 부분을 별도 header.blade.php 파일 생성 후 붙여넣기를 한다.

    <div style="left: 0px;width:100%;">
        <table border=0 width=100% cellspacing=0 cellpadding=0>
            <tr>
                <td class='p_title'>
                    &nbsp;🐾자 멍멍쌤의 취미생활1<br>
                </td>
                <?php
                /*
                    <td align=center valign=bottom>
                    <font size=3 color=white>
                    <?echo "오늘:".$tosum.", 어제:".$yessum.", 전체:".$total." (since 2003)";?>
                    </font>
                    </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>

 

나. index.blade.php 에는 아래와 같은 코드를 삽입해준다.

@include('header')

 

다. index.blade.php 에서 아래 소스 부분을 별도 layerhelp.blade.php 파일 생성 후 붙여넣기를 한다.

@for ($j = 1; $j < sizeof($arr); $j++)
    <div id='divLayer_{{ $arr[0][0] }}_{{ $j }}' class='overLayer'>
        <br>
        <div class='content'>
            <strong><span id='content'>제목</span></strong>
            <br><br>
            {!! $arr[$j][6] !!}
        </div>
    </div>
@endfor

 

라. index.blade.php 에는 아래와 같은 코드를 삽입해준다.

@include('layerhelp')

 

 

2. component 활용

가. 먼저 resource/views 밑에 components 폴더를 만들어준다.

 

나. index.blade.php 에서 아래 소스 부분을 별도 newpanel.blade.php 파일 생성 후 붙여넣기를 한다. 특히, 맨 윗줄에 @props(['new_arr'])를 꼭 입력해 준다.

@props(['new_arr'])

<div class='p_new' style="left: 0px;width:100%;">
    <br>
    <table border=0 width=90% align=center>
        <tr>
            <td>
                <p align=center class='p_title'>
                    <b>
                        < 최근 업그레이드 현황>
                    </b>
                </p>
            </td>
        </tr>
    </table>
    <table border=0 width=90% align=center>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style='text-indent:-3em; padding:10px 10px 10px 60px;'>
                @for ($k = 0; $k < sizeof($new_arr); $k++)
                    <p>
                        <a href='{{ $new_arr[$k][3] }}' target='_Blank' class='data'
                            idx='{{ $new_arr[$k][7] }}_{{ $new_arr[$k][8] }}'>
                            <img src='/images/ball.gif'>

                            {{ $new_arr[$k][2] }} V{{ $new_arr[$k][1] }} ({{ $new_arr[$k][0] }})

                        </a>

                        @if ($new_arr[$k][4] != '')
                            <a href='{{ $new_arr[$k][4] }}' target='_Blank'><img src='/images/youtube1.png'
                                    width=50></a>
                        @endif
                        => {{ $new_arr[$k][5] }}
                    </p>
                @endfor
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

 

다. index.blade.php 에는 아래와 같은 코드를 삽입해준다.

<x-newpanel :new_arr="$new_arr"/>

 

라. index.blade.php 에서 아래 소스 부분을 별도 panel.blade.php 파일 생성 후 붙여넣기를 한다. 특히, 맨 윗줄에 @props(['arr','k','timenow'])를 꼭 입력해 준다.

@props(['arr','k','timenow'])

<div class='p{{ $arr[0][0] }}' style='left: 0px;width:100%;'>
    <br>
    <table border=0 cellspacing=0 cellpadding=0 width=90% align=center class=aa>
        <tr>
            <td>
                <p align=center class='p_title'>
                    <b>
                        {{ $arr[0][1] }}
                    </b>
                </p>
            </td>
        </tr>
    </table>
    <table border=0 width=90% align=center>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style='text-indent:-3em; padding:10px 10px 10px 60px;'>
                @for ($i = 1; $i < sizeof($arr); $i++)
                    <p>
                        <a href='{{ $arr[$i][3] }}' target='_Blank' class='data'
                            idx='{{ $arr[0][0] }}_{{ $i }}'>
                            <img src='/images/ball.gif'>
                            @php
                                $timetarget = $arr[$i][0];
                                $dateDifference = abs(strtotime($timenow) - strtotime($timetarget));
                                $days = floor($dateDifference / (60 * 60 * 24));
                            @endphp
                            @if ($days < 30)
                                <img src='/images/new.gif' width=30>
                            @endif
                            {{ $arr[$i][2] }} V{{ $arr[$i][1] }} ({{ $arr[$i][0] }})
                        </a>

                        @if ($arr[$i][4] != '')
                            <a href='{{ $arr[$i][4] }}' target='_Blank'><img src='/images/youtube1.png' width=50></a>
                        @endif
                        => {{ $arr[$i][5] }}
                    </p>
                @endfor

                <br>
            </td>
        </tr>
    </table>
</div>

 

마. index.blade.php 에는 아래와 같은 코드를 삽입해준다.

<x-panel :arr="$arr" :k="$k" :timenow="$timenow"/>

 

 

3. 최종 index.blade.php 소스

<html>

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

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

    <link href="/css/app.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>

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <div id="background" class="player"
        data-property="{
            videoURL: '{{ $select_movie }}',
            mute: true,
            showControls: false,
            useOnMobile: true,
            quality: 'highres',
            containment: 'body',
            loop: true,
            autoPlay: true,
            stopMovieOnBlur: false,
            startAt: 0,
            opacity: 1
        }">
    </div>

    @include('header')

    <p><br></p>

    <x-newpanel :new_arr="$new_arr"/>

    <p><br></p>

    @for ($k = 1; $k <= $arr_count; $k++)

        @php
            $arr = ${"arr_$k"};
        @endphp

        <x-panel :arr="$arr" :k="$k" :timenow="$timenow"/>

        <!--레이어 도움말-->
        @include('layerhelp')

        <p><br></p>
    @endfor

    <p align=center>&nbsp;</p>
    <p align=center>&nbsp;</p>
    <p align=center>&nbsp;</p>

</body>
</html>

 

소감 => 앞으로 컴포넌트를 제대로 재활용할 수 있도록 설계를 잘 해야겠음.

 

---

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

https://github.com/mmssem/munghome

GitHub - mmssem/munghome