cssファイルをバンドルしたい

必要なローダーをインストールする

前回のwebpackことはじめからのつづき

npm i -D css-loader style-loader

css-loaderだけでいいかとおもったけどstyle-loaderも必要とのこと

  • css-loader => cssをjsでも扱えるようにするためのもの
  • style-loader => jsを読み込み時cssの内容を展開するもの

style.cssの作成、編集

srcフォルダ内にstyle.cssを作る

バンドルされたかを確認したいだけなので簡単なのを追加

+ html,body {
+   background: green
+ }

index.jsにstyle.cssを読み込むようにする

+ import './style.css'

webpack.config.jsの追加

  output: {
    filename: 'main.js'
  },
  mode: 'development',
+ module: {
+   rules: [
+     {
+        test: /\.css$/, use: ['style-loader', 'css-loader']
+     }
+   ]
+ }
}

ビルド

npm run build

distに出力されたmain.jsを読み込むとないにstyleが展開される

webpackのことはじめ

jsファイルやらcssファイルやら画像ファイルをjsファイルにまとめてくれるものらしい
nodejsのインストールはwebpackを試すため
webpackのインストールはvueを試すため

プロジェクトフォルダを作ってフォルダに移動する

package.jsonの作成

npm init -y

webpackのインストール

npm i -D webapck webpack-cli

開発ファイル

srcフォルダを作成し中にsrcファイルの作る

mkdir src
cd mkdir
vi index.html
vi index.js

確認用にindex.jsになにか記述しておく ログを表示させる

console.log('index.js')

webpack.jsonにビルドコマンドを追加する

  "scripts": {
+   "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

webpack.config.jsの作成、編集

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js'
  },
  mode: 'development',
};

ビルド

webpack.jsonに追加したビルドコマンドを呼ぶ

npm run build

distフォルダが作られて中にmain.jsが作られる

あとはindex.htmlから出力したmain.jsを読み込むようにすればいいのかな

CentOSにNode.jsをインストールする

公式サイト

Node.js

パッケージマネージャを使用したインストール

パッケージマネージャを利用した Node.js のインストール | Node.js

インストール手順

下はバージョン10.xの場合

curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y gcc-c++ make
yum install -y nodejs

確認

node -v
npm -v

おまけ

npm => Node Package Manager
npmはnodejsをインストールすると一緒にインストールされる

PHPでMySQLのTABLEデータを表示させる2

はてブログ登録して1年たって初めてコメントもらいました。

nyan4.hatenablog.com

以前書いたMySQLのデータをテーブル表示させるやつはレコードが複数でも大丈夫だと思ってました。

コメントもらった後確認してみたらできてなかったです。
ちゃんと確認できてませんでした。
すみませんでした。

で、コメントの返答ですが下ので複数レコードも大丈夫になってるはず。
DBの接続処理は省いてます。

$sql = 'SHOW TABLES';
$stmt = $dbh->query($sql);

while ($result = $stmt->fetch(PDO::FETCH_NUM)){
    $table_names[] = $result[0];
}

$table_datas = array();
foreach ($table_names as $key => $table_name) {
    $sql2 = "SELECT * FROM $table_name;";
    $stmt2 = $dbh->query($sql2);
    $table_datas[$table_name] = array();
    while ($result2 = $stmt2->fetch(PDO::FETCH_ASSOC)){
        $table_datas[$table_name][] = $result2;  // ここの配列への追加がまちがってた
    }
}

foreach ($table_datas as $table_name => $table_data) {
    echo "<h1>$table_name</h1>";
    if (empty($table_data)) {
        continue;
    }
    echo "<table border=1 style=border-collapse:collapse;>";
    echo "<tr>";
    // カラム名を表示
    foreach ($table_data[0] as $column_name => $val) {
        echo "<th>";
        echo $column_name;
        echo "</th>";
    }
    echo "</tr>";
    echo "<tr>";
    // レコードデータの表示
    // テーブル内のレコード数分ループ
    foreach ($table_data as $record_num => $record_data) {
         // レコード内のカラム数分ループ
        foreach ($record_data as $column_name => $val) {
            echo "<td>";
            echo $val;
            echo "</td>";
        }
        echo "</tr>";
    }
    echo "</table>";
}
?>

変数名を変えてみたけどわかりやすくなってるかな、
こんな説明でいいのだろうか…
参考になったらうれしいです。

cakephpでページを新しく追加する

自分で作ったページを表示させる

hello worldてきなもの

次を追加、編集する。

  • config/routes.php
  • src/Controller/testController.php
  • src/Template/test/index.ctp

my_app_name/config/routes.phpの編集

    /**
     * Here, we are connecting '/' (base path) to a controller called 'Pages',
     * its action called 'display', and we pass a param to select the view file
     * to use (in this case, src/Template/Pages/home.ctp)...
     */
    $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);

    /**
     * ...and connect the rest of 'Pages' controller's URLs.
     */
    $routes->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);

    /**
     * /testでアクセスした場合testController.phpのindexメソッドを呼ぶ設定
     *  'controller' => 'hoge' が/my_app_name/src/Controller/hogeController.phpになるよう
     *  'action' => 'index' がhogeController.php内のメソッド名のよう
     */
+    $routes->connect('/test', ['controller' => 'test', 'action' => 'index');

my_app_name/src/Controller/testController.phpを作成

とりあえず必要最低限のコード(たぶん)。
actionで指定したメソッド内でrenderを呼ぶだけで表示することができる。

<?php
namespace App\Controller;

use Cake\Core\Configure;
class testController extends AppController
{
    public function index()
    {
        $this->render();
    }
}

my_app_name/src/Template/test/index.ctpの作成

ここで記述したものが表示される。
テストコードなので

<?php
Hello Cakephp
?>

とかにしました。
中身は普通のPHPファイルです。

httpd.confの変更

wellcomeページが出来たから大丈夫だと思ってましたが、
私の方ではこのままでは表示できませんでした。

ガイドを見直して、httpd.confの設定を変更しました。

<Directory />
   Options FollowSymLinks
-     AllowOverride None
+    AllowOverride All
</Directory>

AllwOverrideをAllに変更

変更したあとはいつものサーバーを再起動させます。

service httpd restart

ブラウザから確認

192.168.33.10/test/ でアクセスして

Hello Cakephp が表示ができたら成功かな

cakephpのインストール

cakephpのインストール

ホスト(windows)PC環境

ホスト(windows)PC操作

仮想環境作り

任意の場所にフォルダを作成しそのフォルダ内で
dataフォルダとvagrantフォルダを作成

example/
    data/       # <= 共有フォルダ  
    vagrant/    # <= vagrantのファイル

vagrantの初期化

コマンドラインからvagrantfileを作成(今回はcentos6で
cdでvagrantフォルダに移動して

vagrant init centos/6

vagrantfileの編集

vagrantfileを開いて以下を変更します

- #  config.vm.network "private_network", ip: "192.168.33.10"
+  config.vm.network "private_network", ip: "192.168.33.10"


- #  config.vm.synced_folder "../data", "/vagrant_data"
+  config.vm.synced_folder "../data", "/vagrant_data"


-  # config.vm.provider "virtualbox" do |vb|
+  config.vm.provider "virtualbox" do |vb|

+ vb.name = "cackephp" # virtualbox上での名前指定 # お好みで

- #   vb.memory = "1024"
+   vb.memory = "1024"

-  # end
+  end

vagrantの起動

cdでvagrantフォルダに移動して

vagrant up

ゲスト(centos)PC操作

ターミナルから仮想環境に接続する

rootに変更

su -

yum更新

yum update -y

必要なものを入れる

php5.6のインストール

そのまま入れようとするとphpが5.3なのでepelリポジトリ、remiリポジトリを入れる
php5.6を入れた理由は特になし(php5.6以上でも多分大丈夫だと思う

yum install -y epel-release
rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

php5.6のインストール

  • php-intl,php-xmlがないとcomposerを動かしたときにerrorが出た
  • php-pdo,php-mysqlndがないとcakephpのwelcomeページがでないでerrorがでた
yum install -y --enablerepo=remi,remi-php56 php php-intl php-mbstring php-xml php-pdo php-mysqlnd

ついでにmysqlのインストール
メモ:入れなくてもcakephpのWelcomeページは出る

yum install -y mysql mysql-server mysql-devel 

composerのインストール

composerのインストール

curl -sS https://getcomposer.org/installer | php

composerをパスが通っている場所に移動

mv composer.phar /usr/local/bin/composer

CakePHP プロジェクト作成

CakePHP プロジェクトを作成
コードはガイドから

cd /vagrant_data/
composer self-update && composer create-project --prefer-dist cakephp/app my_app_name

DocumentRootの設定

/etc/httpd/conf/httpd.confを編集して
/my_app_name/webrootをDocumentRootに設定する

- DocumentRoot "/var/www/html"
+ #DocumentRoot "/var/www/html"
+ DocumentRoot "/vagrant_data/my_app_name/webroot"

httpd起動

SElinuxを切っておく
切らないで動かしたらhttpdのdefaultページが表示された

setenforce 0

httpdの起動

service httpd start

ホストからアクセス

ブラウザから192.168.33.10にアクセスするとwelcomeページが表示される

お疲れ様でした。

dockerfileからcentosを動かすまで

前回dockerからcentosを動かすまでをやりました。
日おいたあとまた動かそうとすると手順を思い出しながらやるか手順をメモっておくとか
若干手間がかかります。

dockerfileを作っておけばそういう手順がなくなりますよ。という説明です。
(dockerfileが手順書みたいなもの)

Dockerfileを作る

#
FROM centos

#
# MAINTAINER 

#
RUN yum -y update
RUN yum -y install httpd

RUN systemctl enable httpd

Dockerfileをbuildしてimageを作る

docker build -t <name>:<tag> <path>

tagはなくてもいい
centosを入れるimageなので

docker build -t centos .

とかにする

CONTAINERの起動

docker run --privileged --name centos -d -v /vagrant_data/php/data:/var/www/html -p 80:80 centos /sbin/init
  • --name で centosの名前でCONTAINER起動
  • -v でVOLUMEの指定
  • -p でportの指定

確認

virtualboxを入れたPCから192.168.33.10でdocker内のテストwebページが見れたら成功