layout.blade.php 레이아웃 파일
<!doctype html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> {{-- jquery.js 로드 --}}
<meta name="csrf-token" content="{{ csrf_token() }}"> {{-- jquery ajax 사용을 위해 필수 --}}
<title>타이틀</title>
</head>
<body>
<div class="container">
@yield('content')
@yield('scripts') <!-- 스크립트 섹션 포함 - 스크립트 사용을 위해 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
주석은 안먹힐수 있으니 실 적용시 주의
1. jquery.js 로드한다. head에 작성
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
2. contents 부분처럼 scripts 를 가져온다. @yield('content') 아래 작성
@yield('scripts') <!-- 스크립트 섹션 포함 - 스크립트 사용을 위해 -->
3. jquery ajax 사용을 위해 토큰을 출력한다. head에 작성
<meta name="csrf-token" content="{{ csrf_token() }}"> {{-- jquery ajax 사용을 위해 필수 --}}
memo_insert.blade.php
{{-- layout 으로 --}}
{{@extends('layout')}} <<<<<< layout.blade.php 부르는 부분
{{-- 아래 html 을 @yield('content') 에 보낸다고 생각하시면 됩니다. --}}
@section('content')
<h2 class="mt-4 mb-3">Memo Create</h2>
<form >
{{-- 라라벨은 CSRF로 부터 보호하기 위해 데이터를 등록할 때의 위조를 체크 하기 위해 아래 코드가 필수 --}}
@csrf
<div class="mb-3">
<label for="memo_9999_name" class="form-label">Name</label>
<input type="text" name="memo_9999_name" class="form-control" id="memo_9999_name" autocomplete="off">
</div>
<div class="mb-3">
<label for="memo_9999_contents" class="form-label">Content</label>
<textarea rows="10" cols="40" name="memo_9999_contents" class="form-control" id="memo_9999_contents" autocomplete="off"></textarea>
</div>
<button type="button" id="btn_formSubmit" class="btn btn-primary">Submit</button>
</form>
<input type="text" id="url_go_list" value="{{ $arr_return_data['url_go_list'] }}">
<input type="text" id="url_go_submit" value="{{ $arr_return_data['url_go_submit'] }}">
<input type="text" id="url_go_view" value="{{ $arr_return_data['url_go_view'] }}">
@endsection
@section('scripts') <<<<<< [jquery사용필수] 스크립트 사용시 필수 layout.blade.php 에서 @yield('scripts') 에 출력된다.
<script>
jQuery("button").bind(
"click",function()
{
console.log( "this.id => " + this.id );
switch(this.id)
{
case "btn_go_list": window.location.href = jQuery("#url_go_list").val(); break;
case "btn_formSubmit": submitForm(); break;
case "btn_formReset":
if(confirm("The current page is initialized") == true)
{
window.location.reload( true );
}// end if
break;
}// end switch
}
);
function submitForm()
{
// pageLoading();
// let memo_9999_pk = jQuery("#memo_9999_pk").val();
let memo_9999_name = jQuery("#memo_9999_name").val();
let memo_9999_contents = jQuery("#memo_9999_contents").val();
// let memo_9999_regdt = jQuery("#memo_9999_regdt").val();
var targetUrl = jQuery("#url_go_submit").val();
jQuery.ajax({
/// <<<<<< [jquery ajax 사용필수] sss
headers: {
'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
},
/// <<<<<< [jquery ajax 사용필수] eee
url:targetUrl,
type:"POST",
async: false,
data:{
// memo_9999_pk:memo_9999_pk
memo_9999_name:memo_9999_name
,memo_9999_contents:memo_9999_contents
// ,memo_9999_regdt:memo_9999_regdt
},
dataType: "json",
success: function (rtn_arr)
{
// PopupDiv_hidden();
//console.log( msg );
if(rtn_arr.SQL_Result=="FAIL")
{
switch (rtn_arr.error_type)
{
//
case "validation":
alert(rtn_arr.msg);
jQuery("#"+rtn_arr.error_focus).focus();
break;
default:
// 실패
alert("DB PROCESS ERROR : DB 처리 오류 관리자에게 문의하세요.");
//location.reload();
break;
}// end switch
}
else
{
var get_memo_9999_pk = "/memo_9999_pk/"+rtn_arr.SQL_Result_Data.memo_9999_pk;
// window.location.href = jQuery("#url_go_view").val()+get_memo_9999_pk;
}// end if
}
});
return false;
}// end function
</script>
@endsection <<<<<< [jquery사용필수] 열었으면 닫아주자. --스크립트 사용시 필수 layout.blade.php 에서 @yield('scripts') 에 출력된다.
1. 이부분은 layout 연결하는 부분 jquery 와 상관 없음.
{{@extends('layout')}} <<<<<< layout.blade.php 부르는 부분
2. script 를 감싸준다.
@section('scripts') <<<<<< [jquery사용필수] 스크립트 사용시 필수 layout.blade.php 에서 @yield('scripts') 에 출력된다.
<script>
....
</script>
@endsection <<<<<< [jquery사용필수] 열었으면 닫아주자. --스크립트 사용시 필수 layout.blade.php 에서 @yield('scripts') 에 출력된다.
3. headers 에 csrf-token값을 같이 전송하는 추가
jQuery.ajax({
/// <<<<<< [jquery ajax 사용필수] sss
headers: {
'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
},
/// <<<<<< [jquery ajax 사용필수] eee
url:targetUrl,
type:"POST",
'php 헛다리 > Laravel9 헛다리' 카테고리의 다른 글
| 라라벨9 adminLte 02 - 사용예 (대시보드 생성) (1) | 2024.10.09 |
|---|---|
| 라라벨9 adminLte 01 - 설치 (2) | 2024.10.09 |
| 라라벨9 view 설정 (1) | 2024.10.09 |
| 라라벨9 route 설정 (1) | 2024.10.09 |
| 라라벨9 컨트롤러 생성 - controller (2) | 2024.10.09 |
