開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

今回は、Laravelアプリケーションに必要不可欠なCRUD操作を、LivewireとJetstreamのパッケージを使って簡単に作成する方法を紹介します。

プロジェクトの設定

新しいlaravelアプリをインストールするので、ターミナルに向かい、コマンドを入力し、新しいlaravelアプリを作成します。

composer create-project --prefer-dist laravel/laravel laravel_livewire_crud

.envでデータベースの詳細を追加する

Modelファイル、Migrationファイルの作成

php artisan make:model Student -m

例え：
app/Models/Student.phpファイルに$fillable配列を追加し、名前、メール、携帯電話などのテーブルの値を追加します。

また、学生用のmigrationテーブルを設定する必要があります。

LivewireとJetstreamのパッケージのインストール

composer require laravel/jetstream

php artisan jetstream:install livewire

さらに、アセットをコンパイルする必要があるので、両方のnpmコマンドを同時に使用して、ビルドコンパイルタスクを完了させます。

npm install && npm run dev

最後に、php artisanコマンドを使用して移行を実行します。

php artisan migrate

Livewireのcrudコンポーネントを生成するため

php artisan make:livewire crud

上記のコマンドを実行すると、2つのファイルが生成されました。

ルートの作成

Route::get('students', Crud::class);

最初のページに生徒のリストを表示したいので、render関数で全生徒のデータを取得します。

生徒を作成するため、
ボタンに wire:click=”create()” というアクションを追加します。

<button wire:click="create()"
                class="my-4 inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base font-bold text-white shadow-sm hover:bg-red-700">
                Create Student
 </button>

学生の作成をモデルフォームとしてデザインしたいので、いくつか条件を追加します。True を指定するとモデルボックスが開き、False を指定するとモデルボックスが閉じます。

生徒を保存するため、
ボタンに wire:click.prevent=”store()” というアクションを追加します。

<button wire:click.prevent="store()"  type="button"
                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base 
                            leading-6 font-bold text-white shadow-sm hover:bg-red-700 focus:outline-none 
                            focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Store
</button>

updateOrCreateを使用して、保存と更新の両方の関数を作成することにします。

学生の編集を行うには
ボタンに wire:click=”edit({{ $student->id }})” というアクションを追加します。

後学生の削除を行うには
ボタンに wire:click=”delete({{ $student->id }})” というアクションを追加します。

<button wire:click="edit({{ $student->id }})"
                                class="flex px-4 py-2 bg-gray-500 text-gray-900 cursor-pointer">Edit</button>
<button wire:click="delete({{ $student->id }})"
                                class="flex px-4 py-2 bg-red-100 text-gray-900 cursor-pointer">Delete</button>

編集と削除を行うために、生徒のデータを取得して、削除機能は生徒のデータを削除します。

その結果は

学生一覧

学生を作るために

学生を編集するには

最後までお読みいただき、ありがとうございました。

By Ami

Today I would like to share about useful packages of Nodejs. The followings are a collection of some useful packages for Nodejs. Let’s take a look.

Web Frameworks

express

Express is the most popular, fast, and minimalist web framework for node.js backends.

socket.io

Socket.IO enabled real-time bidirectional event-based communication using long-polling or webSockets with disconnection detection and auto-reconnection support.

Utility Functions

async

Async is a module with powerful utility functions for working with asynchronous JavaScript.

rxjs

RxJS is a modular set of libraries to compose asynchronous and event-based programs using observable collections and compositions in JavaScript.

lodash

Lodash is a utility library that makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

underscore

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter, etc.) without extending any core JavaScript objects.

ramda

Ramda is a practical, functional library with side-effect free functions composable with currying.

validator

Validator is a library of string validators and sanitizers.

day.js

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment-compatible API.

date-fns

Date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

jsonwebtoken

Jsonwebtoken is a library to sign, verify and decode JSON Web Tokens.

bcrypt

Bcrypt is a library to hash and verify passwords with sync, callbacks, and promise interface.

uuid

UUID is a library to create RFC4122 universally unique identifiers.

Working With File System

fs-extra

FS-extra adds file system methods that aren’t included in the native fs module and adds promise support to the fs methods.

mkdirp

Just like mkdir -p, mkdirp recursively creates the directory and all necessary subdirectories.

glob

Glob is a library to match files using multiple patterns.

Working with Emails

Nodemailler

Nodemailer is a secure framework that handles email management in your Node.js applications.

This is all for now.

Hope you enjoy that.

By Asahi

The evolution of the Web is often divided into three stages: Web 1.0, Web 2.0, and Web 3.0. The Web has evolved significantly over the years, and today’s applications are a lot different from the early days.

Web 1.0

This was the first version of the web. Most of the participants were content consumers, and the creators were developers building websites that contained information presented simply in text or image format. It lasted from approximately 1991 to 2004.

They are basically static content instead of dynamic HTML(including actions and databases). The data and content was provided from a static file system rather than a database, and the sites didn’t have a lot of interactivity at all. This can also be regarded as read only web

Web 2.0

You can think of web2 as an interactive and social web. Most of us also are also interacting with web 2 nowadays.

You don’t have to be a developer to participate to be a creator. Many apps are built to make it easy for anyone to become a creator. If you want to create an idea and share it with the world, you can simply do using many platforms. If you want to upload a video or post and millions of people can watch, interact with, and comment on it.

Web 2 is really simple, and because of its simplicity, more and more people around the world are becoming creators. The current form of the web is really cool in many ways, but there are some down sides

Web 2.0 Cons

When a company releases a popular application, the user experience is usually very sophisticated as the application continues to grow in popularity. At first, many companies don’t care about monetization. They have a strict focus on growth and new user acquisition, but in the end they started making profits.

Investors often expect a return on investment and push the companies onto advertising or selling personal data instead of choosing an organic sustainable growth.

Data breaches occur often in Web2 applications. You also have no control over the data or how the data is stored. In fact, enterprises often track and store user data without the consent of the user and are managed by the enterprise responsible platforms.

On the other hand, users living in countries that have to worry about the negative effects of freedom of speeches are also at risk. Governments and other authorities often shut down servers or freeze bank accounts if they believe that a person has expressed an opinion that is going against them.

Web 3.0

Web3 improves the Internet as we know it today and has several other benefits. Self-control, trustable, no permission, decentralized, robust, etc. With web3, developers don’t create and deploy applications that run on a single server or store data in a single database.

Web3 applications run on blockchains, distributed networks of many peer-to-peer nodes (servers), or a combination of both. These applications are often referred to as Dapps (Decentralized Applications).

You will find that cryptocurrencies are usually part of a conversation on web3. Cryptocurrencies play an important role in these protocols.

People can participate in the protocol and earn a living in different ways, both technically and non-technically. Consumers of the service often pay to use the protocol. For example, you would pay a cloud provider like AWS now for a single dedicated node. But with web3, money is sent directly to the participants in the network. In these decentralization scenarios (there are other forms of decentralization as well), many unnecessary and inefficient intermediaries are no longer needed.

Let’s look at another example of organizational structure. There are projects that are becoming more popular and anyone can participate in or invest in these projects. The company announces the launch of x tokens, offering 10% to the first builder, selling 10% to the public, and booking the rest for future payments of contributors and project fundings.

Stakeholders can use the tokens to vote for future changes in the project, and those who help build the project can make money by selling some of the holdings(tokens) after the tokens are released.

People who believe in the project can buy and hold ownership and those who think the project is going in the wrong direction can lead this by selling their stock.

There are still many stuffs if we are talking about web3 but let me stop here for now. If I have any chance, I will talk about more in future.

Yuuma

今回は、パッケージレビューをしたいと思います。
Joedixonのパッケージで、laravel translationsという名前です。翻訳パッケージはたくさんありますが、これはかなりシンプルで強力です。今回はその辺を紹介したいと思います。

取り付けはいたって簡単です。

composer require joedixon/laravel-translation

パブリケーションアセットの場合は、次のように追加します。

php artisan vendor:publish --provider="JoeDixon\Translation\TranslationServiceProvider"

そして、Publishingが完了すると、config/translation.phpという新しいファイルが作成されます。

これは、私の新しく作ったLaravelプロジェクトで、この翻訳ファイルを設定することができます。
我々は、ドライバを変更することができます => file, database
middlewareを追加 => [‘web’, ‘auth’].

インストールが完了したら、artisan serverコマンドを実行し、/languagesを呼び出します。
このページが表示されます。
新しい言語を追加し、既存の言語を編集することができます。

試しに1つだけ言語を変えてみて
ドライバ => file を選択したため、lang/en/auth.phpファイルに影響を与える可能性があります。

そして、この翻訳が公開されているため、ロールを制限することができます。 そのために、認証ミドルウェアを追加することができます。

'route_group_config' => [
        'middleware' => ['web','auth'],
    ],

そして、URLを起動すると、ログインページが表示されることが確認できます。ログイン後、languagesに移動し、/languagesを入力します。

このコマンドは、アプリケーションで利用可能なすべての言語のリストを表示します。

php artisan translation:list-missing-translation-keys

例えば、:
Log in を Hey Log In に変更すると、lang/en.json に影響する可能性があります。

ログインページに移動した後、LOGINをHey Log Inテキストに変更しました。
それは日本語、韓国語などのような他の言語を追加することができます。

おわりに
というわけで、自分でもクライアントでも使いやすいlaravelの翻訳管理パッケージの静かなデモです。 

最後までお読みいただき、ありがとうございました。

By Ami

Today I would like to share a PHP package that I wrote last weekend. This was written to make Zipping processes easily and automatically using PHP ZipArchive. Let’s take a look.

First of all, install the package with composer.

composer require waithaw/phpzipper

After creating Zip Object, you can use the following methods.

include_once "vendor/autoload.php";

use WaiThaw\PhpZipper\Zip;

$zip = new Zip();

---

These are the example file lists.

$filelists= [
    'D:\testfolder\test1.txt',
    'D:\testfolder\test1folder\test2.txt'
];

$file = 'D:\testfolder\test1.txt';

Creating a Zip file from Single file or multiple files

You can create an archive zip file from single file or multiple files.

1st parameter – output zip path

2nd parameter – a file or files to be zipped

3rd parameter – setting a password

• Zipping a single file or mutiple files with no password

$zip->createFromFiles('backup.zip', $file);

//OR

$zip->createFromFiles('backup.zip', $filelists);

---

• Zipping a single file or mutiple files with password

$zip->createFromFiles('backup.zip', $file ,'password');

//OR

$zip->createFromFiles('backup.zip', $filelists,'password');

---

Creating a Zip file from a directory including sub directories.

You can archive all files and subfolders in a directory into a zip file.

• Zipping a directory with no password

$zip->createFromDir('backup.zip','D:\testfolder');

• Zipping a directory with password

$zip->createFromDir('backup.zip','D:\testfolder','password');

Extracting a simple or password-protected zip file

• Extracting a simple zip file.

$zip->extractTo('backup.zip','D:\outputpath');

• Extracting a password-protected zip file

$zip->extractTo('backup.zip','D:\outputpath', 'password');

Downloading zip files

You can download the zip file at once archiving.

$zip->createFromFiles('backup.zip', $file)->download();

$zip>createFromDir('backup.zip','D:\testfolder')->download();

---

And you can also delete the zip file after downloaded, by passing ‘delete’ string in download() method.

$zip->createFromFiles('backup.zip', $file)->download('delete');

$zip>createFromDir('backup.zip','D:\testfolder')->download('delete');

---

This is all for now. I will continue to update this package for more features and details.

Hope you enjoy that.

By Asahi

Tweet