技術情報

Laravel フォーム入力内容の復元

入力フォームを設置する場合に編集モードでは、DBに登録されている値を初期値として表示、
またバリデーションエラーになった場合はフォームに入力した値を復元したい場合があります。
そのような場合は、Laravelではold関数を使用することで簡単に対応できますので
その方法をシェアしたいと思います。

old関数について

{{ old(‘name’) }}

old関数の第2引数にデフォルト値が設定できます。DBに登録されている値を
初期値として表示したい場合に便利です。

{{ old(‘name’, ‘デフォルト値’) }}


テキストボックスの使用例

最もシンプルなテキストボックスでの使用例です。

<input type="text" name="name" id="name" value="{{ old('name', $recdata['name']) }}">


ラジオボタンの使用例

ラジオボタンは複数の選択肢の中からひとつだけ選択できる入力フォーマットです。
選択しているボタンの属性に「checked」をつけ加えるためold関数の値から条件分岐を設定しています。


@foreach ($list as $item)
<span><input type="radio" name="gender" id="gender{{$item->code}}" value="{{$item->code}}"
{{ old('gender', $recdata['gender'])==$item->code ? 'checked':'' }}>
<label for="gender{{$item->code}}" class="radio">{{$item->value}}</label></span>
@endforeach


プルダウンメニューの使用例

プルダウンメニューは複数の選択肢の中からひとつだけ選択できる入力フォーマットです。
選択しているリストアイテムの属性に「selected」をつけ加えるためold関数の値から条件分岐を設定しています。


<select name="pref" id="pref">
<option value="">都道府県を選択</option>
@foreach ($prefs as $pref)
  <option value="{{$pref->code}}" 
  {{ old('pref', $recdata['pref'])==$pref->code ? 'selected':'' }}>
  {{$pref->value}}</option>
@endforeach
</select>


チェックボックスの使用例

チェックボックスは複数の選択肢の中から複数選択可能な入力フォーマットです。
複数選択可能なため配列になっています。
選択しているチェックボックスの属性に「checked」をつけ加えるためold関数の値から条件分岐を設定しています。


@foreach ($list as $item)
<span><input type="checkbox" name="fav_player[]" id="fav_player{{$item->code}}" value="{{$item->code}}"
@if (is_array(old("fav_player", $recdata['fav_player'])) && in_array($item->code, old('fav_player', $recdata['fav_player']))) checked @endif>
<label for="fav_player{{$item->code}}" class="checkbox">{{$item->value}}</label></span>
@endforeach



木曜日担当:nishida



Deleting .env file back from Git

Sometimes , we accidentally pushed a file with some username , password or secret tokens etc. It has a variety security concerns for your project and this should be removed back from Git.

Git ignore

First thing you need to do is to add the file you don’t want to push to git at .gitignore file. Add it in .gitignore , commit and push it.

# Secret file
.env

But this will not change any effects to .env as the file is already pushed before and .gitignore doesn’t untracked the already committed changes

Deleting the file

So we have to remove the specific file , .env in our case from the git remote repo entirely. We can use the following command.

git rm -r --cached .env

If we push the changes , the .env file will be remove from the remote repository

Git History

However, one more thing is left which is git histories. We can check the .env file contents also in git histories. So we need to remove the specific git history as well to hide the .env contents.

To remove the file altogether, we can use like following.

git filter-branch --index-filter "git rm -rf --cached --ignore-unmatch .env" HEAD

When you push this time, you have to use –force option.

git push --force

If we look at our history, we can still see the commits that include .env file but the content is empty.

That’s all for now.

Yuuma



JavaScript HandSonTable Renderer Memo

I would like to share about how to renderer as your desire cells when you use HandSonTable. HandSonTable can’t directly insert html elements into cells. But after declaration renderer:html in our table of cell, we can use html elements as your desire. Second ways is to create custom renderer in cells properties with our own way.

Firstly we will create simple html file. In this file we will import handsontable.min.js and handsontable.min.css. We can get these file script from this site cdnjs.com.

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" />

To insert our table, create a div with id attribute and call this id with JS querySelector.

<div id="example1" class="hot "></div>
const container = document.querySelector('#example1');

Usage of HandSonTable

const hot = new Handsontable(container, {
data : data 
});
const data = [
    { id: 1, name: 'Suga', isActive: true, date: '2021-11-25' },
    { id: 2, name: 'Jimin', isActive: false,  date: null },
    { id: 3, name: 'JHope', isActive: true,  date: null },
    { id: 4, name: 'V', isActive: false, date: null },
  ];

If you want to add colsHeader, set to true => colHeaders : true

And if you want to add strict cell type and render columns, we can set inside columns.

  columns: [
    { data: 'id', type: 'text' },
    // 'text' is default, you don't actually need to declare it
    { data: 'name', renderer: yellowRenderer },
    // use default 'text' cell type but overwrite its renderer with yellowRenderer
    { data: 'isActive', type: 'checkbox' },
    { data: 'date', type: 'date', dateFormat: 'YYYY-MM-DD' },
  ],

I will add another custom renderer named with greenRenderer but this greenRenderer will not add all the cell, just add some row. So I will use this greenRenderer inside a cell.

 cells(row, col, prop) {
    if (row === 3 && col === 0) {
      this.renderer = greenRenderer;
    }
  }

yellowRenderer function => this function will add all the cell with background color yellow.

const yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.backgroundColor = 'organe';
};

greenRenderer function => this function will add some of cell with background color red.

const greenRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);

  td.style.backgroundColor = 'purple';
};

If you want to set custom colWidths , then set colWidths to your desire value.

colWidths : 100

Hope you enjoyed about this article!

By Ami



Django & Laravel

Today I would like to share about advantages and disadvantages between Django and Laravel framework. First of all, as we know, each framework has each property and market. So this article just describes about the pros and cons.

What is Django?

Django is a web framework operating with Python programming language. Django is more suitable for implementing such technologies as AI(Artificial Intelligence) and ML(Machine Learning). Django follows the MVT(model view template) architectural pattern. It is adaptable to almost any project in various industries and includes various ready-made feature packages.

What is Laravel?

Laravel is a web framework that runs on PHP and maintains the MVC (model view controller) architectural pattern. It involves lots of additional libraries that make the development process more simple and supports the object-oriented approach. Laravel is supported by comprehensive documentation and detailed tutorials.

Advantages of Django

  1. is easily adjustable to any project;
  2. scalability;
  3. SEO tools included;
  4. quick prototype creating;
  5. generous dev community support and extensive documentation;
  6. easy data management

Disadvantages of Django

  1. Knowledge of full system is required to work
  2. creating API by yourself
  3. not very suitable for small projects
  4. Uses routing pattern specify its URL

Advantages of Laravel

  1. fast development
  2. clean and user-friendly architecture
  3. growing developer community
  4. a built-in command-line Artisan
  5. large cloud storage for files
  6. an easy way to build API
  7. ability to operate on numerous file systems simultaneously

Disadvantages of Laravel

  1. the syntax is difficult for beginners
  2. having to deal with standards
  3. no shared hosting support included
  4. unnecessary queries on databases

That is all for now. Hope you enjoy it.

By Asahi



Let’s create flutter UI without wasting too much time!

This time I would like to share about to create flutter design in mobile apps easily and quickly drag and drop. This name is flutter flow site that I found out.

Let’s take a look the site!

Firstly, we will create free account and after creation complete, we will see this page.

In the left side activity bar, we will see all of widgets, layouts, most popular form design etc. that you want to desire creation.

After running project or without running project, you can get your creation design code.And also if you want to get apk that also available. The below image is my creation of flutter code simple.

Hope you enjoyed my sharing article!

By Ami




アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム