ビデオ管理アプリケーションをつくる

19841 ワード
udemy Symfony PHP PHP テキストリンク

はじめに

phpの現場に入る前に予習しようとしてこの教材を買ったけど結局難しくて挫折してプロジェクトで半年死ぬような目にあったけどいまなら雪辱をはらす

参考

composer create-project でプロジェクトを作成すると、
最新の Symfony が組み込まれるため、記述通りには動かないケースが出てきます。「Unrecognized option "cookie_samesite" under "framework.session"」というエラーが表示された場合は、config/packages/framework.yaml ファイルを開き、そこにある「cookie_samesite: lax」という文をコメントアウトして下さい。これで server:run で実行できるようになります。

プロジェクト作成
# run this if you are building a traditional web application
> symfony new my-project --full
> cd my-project

my-project> symfony check:requirements
  Symfony Requirements Checker
  > PHP is using the following php.ini file:
  C:\php\php.ini
  > Checking Symfony requirements:
  ...................................

   [OK]                                         
   Your system is ready to run Symfony projects

確認

my-project> symfony server:start
  Tailing Web Server log file 
  (C:\Users\yoshi\.symfony\log\7e6fb0ddf9da9c70d237a54d719757b699a859e0.log)
Tailing PHP-CGI log file (C:\Users\yoshi\.symfony\log\7e6fb0ddf9da9c70d237a54d719757b699a859e0\79ca75f9e90b4126a5955a33ea6a41ec5e854698.log)

   [OK] Web server listening                                                                                              
        The Web server is using PHP CGI 7.4.9                                                                             
        https://127.0.0.1:8000

baseテンプレートの削除

my-project/templates/base.html.twig
(全部削除）

コントローラ作成

FrontControllerと名付ける
my-project> php bin/console make:controller
 Choose a name for your controller class (e.g. GrumpyChefController):
 > FrontController

  created: src/Controller/FrontController.php
  created: templates/front/index.html.twig

    Success! 

  Next: Open your new controller class and add some pages!

my-project/templates/front/index.html.twig は削除する
my-project/templates/front の中身を入れ替える（gitを見て）

baseテンプレートに転記

転記元: my-project/templates/front/includes/_header.php
転記元: my-project/templates/front/includes/_footer.php
転記先: my-project/templates/base.html.twig
マージするってこっちゃな。マージし終わったら転記元ファイルは削除。

my-project/templates/base.html.twig
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/styles.css">

    <style>
        .form-control {
            background-color: #f8f5f5;
        }
    </style>

    <link rel="stylesheet" href="assets/css/fontawesome.min.css">

    <title>Symfony 4 course app - video sharing service</title>

</head>

<body class="text-center">
<div class="container-fluid">

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
</body>
</html>

ファイルの拡張子を変えていく

さっきgitからコピーしてきたやつ
「.php」>「.html.twig」

参照を差し替える

my-project/templates/front/index.html.twig
- <?php include('includes/_header.php'); ?>
- <?php include('includes/_menu.php'); ?>
+ {% extends 'base.html.twig' %}
+ {% block main %}
  <h1 class="text-info mb-5 mt-4">Where the best videos happens</h1>
  <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
  </div>
+ {% endblock %}
- <?php include('includes/_footer_links.php'); ?>
- <?php include('includes/_footer.php'); ?>
my-project/templates/base.html.twig
 :
  <div class="container-fluid">
+   {% block main %}
+   {% endblock %}
  </div>
 :
my-project/src/Controller/FrontController.php
    /**
-    * @Route("/front", name="front")
+    * @Route("/", name="main_page")
     */
    public function index(): Response
    {
-       return $this->render('front/index.html.twig', [
-           'controller_name' => 'FrontController',
-       ]);
+       return $this->render('front/index.html.twig');
    }

確認

CSSはまだ効いていません

publicフォルダにassetsをコピー

（gitから持ってきて）

templateフォルダにadminをコピー

（gitから持ってきて）

cssやfontawesome、jsの参照を変える

my-project/templates/base.html.twig
    <!-- Bootstrap CSS -->
-   <link rel="stylesheet" href="assets/css/styles.css">
+   <link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">
　　　:

-   <link rel="stylesheet" href="assets/css/fontawesome.min.css">
+   <link rel="stylesheet" href="{{ asset('assets/css/fontawesome.min.css') }}">
     :

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
-   <script src="assets/js/jquery.js"></script>
-   <script src="assets/js/popper.js"></script>
-   <script src="assets/js/bootstrap.js"></script>
+   <script src="{{ asset('assets/js/jquery.js') }}"></script>
+   <script src="{{ asset('assets/js/popper.js') }}"></script>
+   <script src="{{ asset('assets/js/bootstrap.js') }}"></script>

確認


カスタムブロックをつくる

まぁこのへんは自由に、ってやつよな

      :
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">
+   {% block customstylesheets %}{% endblock %}
      :
-   <title>Symfony 4 course app - video sharing service</title>
+   <title>{% block title %}Symfony 4 course app - video sharing service{% endblock %}</title>
      :
  <div class="container-fluid">
+   {% block menu %}
+       <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
+           <h5 class="my-0 mr-md-auto font-weight-normal"><a href="index.php">Awesome Videos</a></h5>
+           <form method="POST" class="form-inline my-0 mr-md-auto" action="search_results.php">
+               <input class="form-control mr-sm-2" type="search" placeholder="video title" aria-label="Search video">
+               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search video</button>
+           </form>
+           <nav class="my-2 my-md-0 mr-md-3">
+               <a class="p-2 text-dark" href="videolist.php">Funny</a>
+               <a class="p-2 text-dark" href="videolist.php">Scary</a>
+               <a class="p-2 text-dark" href="videolist.php">Unbelievable</a>
+               <a class="p-2 text-dark" href="videolist.php">Inspirational</a>
+               <a class="p-2 text-dark" href="videolist.php">Motivating</a>
+               <a class="p-2 text-dark" href="admin/my_profile.php">My account</a>
+           </nav>
+           <a class="btn btn-outline-primary mr-2" href="pricing.php">Sign up</a>
+           <a class="btn btn-outline-primary" href="login.php">Sign in</a>
+       </div>
+   {% endblock %}
    {% block main %}
    {% endblock %}
+   {% block footer_links%}
+       {% block footer_links%}
+       <footer class="pt-4 my-md-5 pt-md-5 border-top">
+           <div class="row">
+               <div class="col-12 col-md">
+                   <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
+               </div>
+               <div class="col-6 col-md">
+                   <h5>Features</h5>
+                   <ul class="list-unstyled text-small">
+                       <li><a class="text-muted" href="#">Live streaming</a></li>
+                       <li><a class="text-muted" href="#">Video player</a></li>
+                       <li><a class="text-muted" href="#">Monetization</a></li>
+                       <li><a class="text-muted" href="#">Hosting</a></li>
+                       <li><a class="text-muted" href="#">Privacy</a></li>
+                       <li><a class="text-muted" href="#">Analytics</a></li>
+                       <li><a class="text-muted" href="#">Speed test</a></li>
+                   </ul>
+               </div>
+               <div class="col-6 col-md">
+                   <h5>Resources</h5>
+                   <ul class="list-unstyled text-small">
+                       <li><a class="text-muted" href="#">Help center</a></li>
+                       <li><a class="text-muted" href="#">Blog</a></li>
+                       <li><a class="text-muted" href="#">Guidelines</a></li>
+                       <li><a class="text-muted" href="#">Developers</a></li>
+                   </ul>
+               </div>
+               <div class="col-6 col-md">
+                   <h5>About</h5>
+                   <ul class="list-unstyled text-small">
+                       <li><a class="text-muted" href="#">Team</a></li>
+                       <li><a class="text-muted" href="#">Contact</a></li>
+                       <li><a class="text-muted" href="#">Jobs</a></li>
+                       <li><a class="text-muted" href="#">Partners</a></li>
+                       <li><a class="text-muted" href="#">Terms</a></li>
+                   </ul>
+               </div>
+           </div>
+       </footer>
+   {% endblock %}
 </div>
  :
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
+ {% block customjavascript %}{% endblock %}

確認

nice menu and footer!