【Laravel】土台作りとサーバの起動

laravel new

laravel newはアプリケーションの土台を作るためのコマンドです。

laravel new アプリ名

バージョンは最新バージョンになります。 バージョンの指定はできません。

composerコマンドでバージョンを指定してインストール

バージョンの指定をするにはcomposerコマンドを使用します。 今回は現時点(2020年5月29日)でLTSである6系をダウンロードします。

$ composer create-project --prefer-dist laravel/laravel プロジェクト名 "6.*"

バージョンの確認をします。

php artisan -V

$ cd プロジェクト名/
$ php artisan -V
Laravel Framework 6.18.16

サーバの起動とアプリへのアクセス

アプリの土台が完成したらターミナルでサーバを起動します。

$ php artisan serve
Laravel development server started: http://127.0.0.1:8000

アプリへのアクセスはhttp://localhost:8000/からアクセスできます。

サーバの停止

サーバの停止はターミナルでcontrol + cで停止します。

 MAMPを使ってローカル環境を作る

PHPの開発環境には大きく分けて2つ、XAMPP（ザンプ）とMAMP（マンプ）があります。

XAMPは「クロスプラットフォーム」、「Apache」、「MariaDB(MySQL)」、「PHP」、「Peal」の頭文字を取ったもの。

MAMPは「Macintosh」、「Apache」、「MySQL」、「PHP」の頭文字を取ったもの。

両方ともWindows、MacOSで使用できます。

歴史的にMacではMAMPの使用が長かったみたいなので、今回はMAMPを使ってローカル環境を作っていきます。

www.mamp.info

上記よりダウンロードして起動します。

User/application/MAMP/htdockフォルダ内にlaravelappを入れます。

MAMPのStert Serverを押して、右上のApache Server、MySQL Serverが緑になっていることを確認します。

この時点でlocalhost:8888/laravelapp/public/でトップページが表示されます。

MAMPのPreferencesからPortsのApache Portの初期値8888から80に書き換えます。

これでポート番号が省略でき、localhost/laravelapp/public/アクセスできます。

【Laravel】インストール時のエラー、zip展開できない 

$ composer global require laravel/installer

とするとこんなエラーが出ました。

  Problem 1
    - laravel/installer v3.0.1 requires ext-zip * -> the requested PHP extension zip is missing from your system.
    - laravel/installer v3.0.0 requires ext-zip * -> the requested PHP extension zip is missing from your system.
    - Installation request for laravel/installer ^3.0 -> satisfiable by laravel/installer[v3.0.0, v3.0.1].


Installation failed, deleting ./composer.json.

laravel/installerはPHPのzipの拡張機能を必要としているよ。

でもあなたのsystemにはそれが無いじゃない。

と言っているようです。

どうやらMacにプリインストールされているPHPではzipを展開するext-zipが入っていないらしい。

$ php --ri zip
Extension 'zip' not present.

たしかに無い。

HomebrewでPHPを再インストールします。

$ brew install php@7.3

パスを通します。

$ brew link php@7.3

ターミナルを再起動させて再度Laravelのインストールを行います。

$ composer global require laravel/installer

無事インストールされました。

`chmod`は`chage mode`という意味 

$ chmod a+x /usr/local/bin/composer

chmodとはLinaxコマンドの一つ。

change modeという意味。パーミッションを設定する。

aがすべての権限。

xが実行権限。

a+xはすべてのユーザに実行権限を与える。

これで、いつでもcomposerを呼び出すことができる。

画像アップロード、プレビュー、取り消し 

<%= link_to blogs_path, remote: true, onClick: "deleteNewMarker();" do %>
  <%= fa_icon 'chevron-left' %>
<% end %>

<%= form_with(model: blog) do |form| %>
  <div class="field">
    <%= form.text_area :content, class: 'form-control', id: 'text', placeholder: t(%q[What's happening?]) %>
  </div>

  <div class="field test">
    <%= form.label :image %>
    <%= form.file_field :image, id: 'image_form', class:'form-control' %>
  </div>

  <div class="blogs_image" id="blog_form_image">
    <%= image_tag blog.image.url, id: 'image_preview'%>
  </div>

  <div id="image_clear" class="btn btn-link" style="display: none;">取り消し</div>

  <%= form.hidden_field :lat %>
  <%= form.hidden_field :lng %>

  <div class="actions">
    <%= form.submit class: 'btn btn-primary pull-right', id:"submit" %>
  </div>
<% end %>

<script>
  $(function() {
    if ( $('#text').val().length == 0 ) {
      $('#submit').attr('disabled', 'disabled');
    }
    $('#text').bind('keydown keyup keypress change', function() {
      if ( $(this).val().length > 0 ) {
        $('#submit').removeAttr('disabled');
      } else {
        $('#submit').attr('disabled', 'disabled');
      }
    });
  });

  $(function() {
    function readURL(input) {
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
    $('#image_preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image_form").change(function(){
        readURL(this);
    });
  });

  $(function() {
    $('input[type=file]').change(function() {
      $('#image_clear').show();
    });

    $('#image_clear').click(function() {
      $('input[type=file]').val('');
      $(this).hide();
      $('#blog_form_image').html("<%= j(image_tag blog.image.url, id: 'image_preview')%>");
    });
  });
</script>

【Rails】flashを使う 

<% if notice %>
  <div class="alert alert-info role="alert">
    <%= notice %><button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
<% end %>

<% if alert %>
  <div class="alert alert-danger" role="alert">
    <%= alert %><button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
<% end %>
$(function(){
  setTimeout("$('.alert').fadeOut('slow')", 3000);
});
.alert {
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
}