はじめに
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をコピー
templateフォルダにadminをコピー
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">© 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!
