입문 PHP Laravel AI: Claude

🎓 온라인 수강 신청 폼 - 강좌 선택부터 결제 안내까지

리포지토리명 course-enrollment-form-laravel

53 0건 제출 04-16

문제 설명

📚 프로젝트 소개

교육 기관이나 학원, 온라인 강의 플랫폼에서 사용할 수 있는 수강 신청 폼을 만듭니다. 사용자는 개설된 강좌 목록을 확인하고, 원하는 강좌를 선택하여 수강 신청서를 작성합니다. 신청이 완료되면 자동으로 신청 내역을 확인할 수 있는 페이지로 이동합니다.

✅ 필수 기능

강좌 목록 페이지: 개설된 강좌 리스트 (제목, 강사명, 수강료, 정원) 표시
수강 신청 폼: 이름, 이메일, 전화번호, 선택한 강좌 입력
신청 내역 저장: SQLite 데이터베이스에 신청 정보 저장
신청 완료 페이지: 신청한 강좌 정보 & 결제 안내 메시지 표시
반응형 UI: Tailwind CSS로 모바일/데스크톱 모두 깔끔하게

🎁 선택 추가 기능 (보너스)

강좌 검색 기능 (강좌명, 강사명으로 필터링)
정원 초과 시 "마감" 배지 표시
신청 내역 목록 페이지 (관리자용 간단 리스트)
이메일 형식 유효성 검사 (Laravel Validation)
신청 시 자동으로 고유 신청번호 생성

🎯 학습 목표

Laravel 13.x 프로젝트 초기 설정 (SQLite 연결)
Blade 템플릿으로 폼 & 리스트 UI 구성
라우트와 컨트롤러로 요청 처리
Eloquent 모델로 데이터베이스 CRUD 조작
Tailwind CSS로 실용적인 UI 디자인

제약 조건

• Laravel 13.x 프레임워크 사용 (최신 버전 필수)
• Blade 템플릭 엔진으로 UI 구성 (React/Vue 등 SPA 금지)
• SQLite 데이터베이스 사용 (설정 간단, 파일 기반)
• Tailwind CSS로 스타일링 (CDN 또는 Vite 빌드)
• 라우트는 web.php에 정의
• 컨트롤러는 app/Http/Controllers에 작성
• 모델은 app/Models에 작성
• 마이그레이션 파일로 테이블 스키마 관리

프롬프트 레시피

아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1

Step 1

mkdir course-enrollment-form-laravel && cd course-enrollment-form-laravel

이 폴더에서 Laravel 13.x 프로젝트를 시작합니다.

Laravel 13.x 프로젝트를 생성하고 초기 설정을 완료해주세요.

**요구사항:**
1. Laravel 13.x 최신 버전으로 프로젝트 생성 (composer create-project laravel/laravel . 또는 Laravel installer 사용)
2. .env 파일에서 데이터베이스를 SQLite로 설정:
   - DB_CONNECTION=sqlite
   - DB_DATABASE 경로를 database/database.sqlite로 지정
   - database/database.sqlite 파일 생성 (touch database/database.sqlite 또는 빈 파일 생성)
3. Tailwind CSS 설정:
   - npm install -D tailwindcss postcss autoprefixer
   - npx tailwindcss init -p
   - tailwind.config.js의 content 배열에 Blade 파일 경로 추가: './resources/**/*.blade.php', './resources/**/*.js'
   - resources/css/app.css에 Tailwind 디렉티브 추가 (@tailwind base; @tailwind components; @tailwind utilities;)
4. Vite 빌드 설정 확인 (vite.config.js에서 Laravel 플러그인 사용)
5. npm install && npm run dev 실행하여 Tailwind 빌드 확인

**확인 방법:**
- php artisan serve 실행 시 Laravel 기본 화면이 정상적으로 표시되어야 함
- database/database.sqlite 파일이 존재해야 함
- npm run dev 실행 시 Tailwind CSS가 정상적으로 빌드되어야 함

기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스 파일이 준비되며, Tailwind CSS가 설정되어 개발 서버가 정상 작동합니다.

2

Step 2

수강 신청 데이터를 저장할 데이터베이스 테이블을 설계하고 생성해주세요.

**요구사항:**
1. 마이그레이션 파일 생성:
   - php artisan make:migration create_courses_table (강좌 테이블)
   - php artisan make:migration create_enrollments_table (수강 신청 테이블)

2. **courses 테이블 스키마** (database/migrations/xxxx_create_courses_table.php):
   - id: bigint, primary key, auto increment
   - title: string, 강좌명 (예: "웹 개발 기초", "파이썬 데이터 분석")
   - instructor: string, 강사명
   - price: integer, 수강료 (원 단위)
   - capacity: integer, 정원
   - enrolled_count: integer, 현재 신청 인원 (기본값 0)
   - timestamps (created_at, updated_at)

3. **enrollments 테이블 스키마** (database/migrations/xxxx_create_enrollments_table.php):
   - id: bigint, primary key, auto increment
   - course_id: bigint, foreign key → courses.id (onDelete cascade)
   - name: string, 신청자 이름
   - email: string, 신청자 이메일
   - phone: string, 신청자 전화번호
   - enrollment_number: string, 고유 신청번호 (예: "ENR-20250101-0001")
   - timestamps

4. 마이그레이션 실행:
   - php artisan migrate

5. 시더(Seeder) 생성하여 테스트 강좌 데이터 추가:
   - php artisan make:seeder CourseSeeder
   - CourseSeeder에서 5개 정도의 샘플 강좌 데이터 삽입 (제목, 강사, 수강료, 정원 다양하게)
   - DatabaseSeeder에서 CourseSeeder 호출
   - php artisan db:seed

**확인 방법:**
- php artisan migrate 실행 후 에러 없이 완료
- database/database.sqlite 파일을 SQLite 뷰어로 열어 courses, enrollments 테이블 확인
- php artisan db:seed 실행 후 courses 테이블에 샘플 데이터가 삽입되어 있어야 함

기대 결과: courses와 enrollments 테이블이 생성되고, courses 테이블에 샘플 강좌 데이터 5개가 삽입되어 있습니다.

3

Step 3

강좌 목록을 보여주는 메인 페이지와 수강 신청 폼 페이지를 만들어주세요.

**요구사항:**
1. **모델 생성**:
   - php artisan make:model Course (이미 있다면 스킵)
   - php artisan make:model Enrollment
   - Course 모델에서 fillable 속성에 ['title', 'instructor', 'price', 'capacity', 'enrolled_count'] 추가
   - Enrollment 모델에서 fillable 속성에 ['course_id', 'name', 'email', 'phone', 'enrollment_number'] 추가
   - Course와 Enrollment 간 관계 설정:
     - Course 모델: public function enrollments() { return $this->hasMany(Enrollment::class); }
     - Enrollment 모델: public function course() { return $this->belongsTo(Course::class); }

2. **컨트롤러 생성**:
   - php artisan make:controller CourseController
   - CourseController에 index() 메서드 작성: 모든 강좌 목록을 가져와 courses.index 뷰로 전달
   - CourseController에 enroll() 메서드 작성: 특정 강좌 ID를 받아 해당 강좌 정보를 courses.enroll 뷰로 전달

3. **라우트 설정** (routes/web.php):
   - GET / → CourseController@index (강좌 목록 페이지)
   - GET /courses/{id}/enroll → CourseController@enroll (수강 신청 폼 페이지)

4. **Blade 뷰 생성**:

   **resources/views/layout.blade.php** (공통 레이아웃):
   - <!DOCTYPE html> 기본 구조
   - <head>에 Tailwind CSS 로드 (@vite(['resources/css/app.css', 'resources/js/app.js']))
   - <body>에 상단 네비게이션 바 (사이트 로고 "수강신청 시스템", 홈 링크)
   - @yield('content')로 본문 영역 지정
   - 푸터 (© 2025 수강신청 시스템)

   **resources/views/courses/index.blade.php** (강좌 목록 페이지):
   - @extends('layout')
   - 페이지 제목: "개설 강좌 목록"
   - 강좌 리스트를 카드 형태로 표시 (Tailwind grid, md:grid-cols-2, lg:grid-cols-3)
   - 각 카드:
     - 강좌명 (텍스트 크기 lg, 굵게)
     - 강사명 (회색 텍스트)
     - 수강료 (원 단위, 천 단위 콤마 표시)
     - 정원 정보: "정원 {{$course->capacity}}명 / 신청 {{$course->enrolled_count}}명"
     - 정원 초과 시 "마감" 배지 표시 (빨간 배경, 흰 글씨)
     - "수강 신청" 버튼 (파란 배경, 흰 글씨, 정원 초과 시 비활성화 & 회색)
     - 버튼 클릭 시 /courses/{id}/enroll로 이동 (a 태그)

   **resources/views/courses/enroll.blade.php** (수강 신청 폼 페이지):
   - @extends('layout')
   - 페이지 제목: "수강 신청서 작성"
   - 선택한 강좌 정보 표시 (강좌명, 강사명, 수강료) - 읽기 전용 박스
   - 신청 폼 (POST /enrollments):
     - @csrf
     - hidden input: course_id (선택한 강좌 ID)
     - 이름 입력 (required)
     - 이메일 입력 (required, type="email")
     - 전화번호 입력 (required)
     - 제출 버튼: "신청 완료" (파란 배경, 흰 글씨)
   - Tailwind로 폼 스타일링 (input 박스, 라벨, 간격 등)

**확인 방법:**
- php artisan serve로 서버 실행
- 브라우저에서 http://localhost:8000 접속 시 강좌 목록 페이지가 표시되어야 함
- 강좌 카드가 그리드로 정렬되고, 수강료에 천 단위 콤마가 표시되어야 함
- "수강 신청" 버튼 클릭 시 /courses/{id}/enroll 페이지로 이동하고 폼이 표시되어야 함

기대 결과: 강좌 목록 페이지와 수강 신청 폼 페이지가 Tailwind CSS로 깔끔하게 디자인되어 표시되며, 사용자가 강좌를 선택하고 신청 폼으로 이동할 수 있습니다.

4

Step 4

수강 신청 폼 제출 처리 로직과 신청 완료 페이지를 구현해주세요.

**요구사항:**
1. **컨트롤러 메서드 추가** (CourseController):
   - store() 메서드 작성:
     - POST /enrollments 요청 처리
     - 요청 데이터 유효성 검사 (Laravel Validation):
       - name: required, string, max:255
       - email: required, email
       - phone: required, string
       - course_id: required, exists:courses,id
     - 유효성 검사 실패 시 에러 메시지와 함께 이전 페이지로 리다이렉트 (withErrors, withInput)
     - 선택한 강좌의 정원 확인:
       - enrolled_count >= capacity인 경우 "정원 초과" 에러 메시지와 함께 리다이렉트
     - 고유 신청번호 생성:
       - 형식: "ENR-" + 오늘 날짜(Ymd) + "-" + 4자리 랜덤 숫자
       - 예: "ENR-20250601-1234"
     - Enrollment 모델로 신청 데이터 저장
     - 해당 강좌의 enrolled_count 1 증가 (Course::find($course_id)->increment('enrolled_count'))
     - 신청 완료 페이지로 리다이렉트 (/enrollments/{id}/success)

   - success() 메서드 작성:
     - GET /enrollments/{id}/success 요청 처리
     - 신청 ID로 Enrollment 데이터 조회 (with('course')로 강좌 정보도 함께)
     - courses.success 뷰로 전달

2. **라우트 추가** (routes/web.php):
   - POST /enrollments → CourseController@store
   - GET /enrollments/{id}/success → CourseController@success

3. **Blade 뷰 생성**:

   **resources/views/courses/success.blade.php** (신청 완료 페이지):
   - @extends('layout')
   - 페이지 제목: "수강 신청 완료"
   - 성공 메시지: "✅ 수강 신청이 완료되었습니다!"
   - 신청 정보 박스 (연두색 배경):
     - 신청번호: {{$enrollment->enrollment_number}}
     - 강좌명: {{$enrollment->course->title}}
     - 강사: {{$enrollment->course->instructor}}
     - 수강료: {{number_format($enrollment->course->price)}}원
     - 신청자 이름: {{$enrollment->name}}
     - 이메일: {{$enrollment->email}}
     - 전화번호: {{$enrollment->phone}}
   - 결제 안내 메시지:
     - "아래 계좌로 수강료를 입금해주세요."
     - 은행: 국민은행
     - 계좌번호: 123-456-789012
     - 예금주: (주)수강신청시스템
     - 입금 시 신청번호를 입력해주세요.
   - "강좌 목록으로 돌아가기" 버튼 (홈으로 이동)

   **resources/views/courses/enroll.blade.php 수정**:
   - 유효성 검사 에러 메시지 표시 (@error 디렉티브 사용)
   - 각 입력 필드 아래에 에러 메시지 표시 (빨간 텍스트)

**확인 방법:**
- 수강 신청 폼에서 이름, 이메일, 전화번호 입력 후 "신청 완료" 버튼 클릭
- 유효성 검사 통과 시 신청 완료 페이지(/enrollments/{id}/success)로 리다이렉트
- 신청 정보(신청번호, 강좌명, 신청자 정보)가 정확히 표시되어야 함
- database/database.sqlite에서 enrollments 테이블에 신청 데이터가 저장되어 있어야 함
- courses 테이블의 enrolled_count가 1 증가해야 함
- 이메일 형식 오류 시 에러 메시지가 표시되어야 함
- 정원 초과 강좌 신청 시 에러 메시지가 표시되어야 함

기대 결과: 수강 신청 폼 제출 시 유효성 검사가 수행되고, 신청 데이터가 데이터베이스에 저장되며, 신청 완료 페이지에서 신청 정보와 결제 안내가 표시됩니다. 정원 초과 시 신청이 차단됩니다.

제출된 작품 (0)

로그인 후 제출

아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.

아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!