[Laravel]環境架設，使用docker + laradock

1.選擇使用docker + laradock在windows10的環境使用
先至docker官方網站下載docker for windows 

2.依照執行程式下載安裝
這邊我的電腦有遇到一些問題順便記錄下來， 在下載啟動docker時發生錯誤
  Hardware assisted virtualization and data execution protection must be enabled in the BIOS
要去bios那邊把模擬啟動，之後進到windows後查看工作管理員是否有正常開啟如下圖

3.至laradocker官方網站開始依照官方說明執行設定
這邊要注意的地方是下載下來的laradock資料夾放置好後，
至資料夾內.env檔找到Mysql的設定
MYSQL_VERSION=latest
改為
MYSQL_VERSION=5.7
這邊解釋一下原因，因為在最新版的mysql裡面登入資料庫密碼的強度有設定為不能太簡單並解有經過sh加密，而laradock預設的mysql密碼為"root"，將會導致無法登入mysql，在查了相關問題解法後，大部分的網友建議把mysql version降為5.7即可解決問題。

4.開啟windows命令提示字元(官方建議使用PowerShell)
選擇到laradock資料夾如下圖

docker -v 查看目前docker版本

docker-compose up -d nginx mysql phpmyadmin redis workspace  安裝相關套件(第一次執行需要一點時間下載安裝)

docker-compose start  開啟server
docker-compose down 關閉server
docker-compose restart  重啟server


5.安裝完成後開始下載laravel專案
剛從git下載下來的laravel專案並不是完整的專案，還需要以下步驟還原
(1)composer install  還原vendor目錄

(2)npm install   還原node_modules目錄

(3)cp .env.example .env

    php artisan key:generate

還原.env

6.設定nginx的config檔

在laradocker資料夾找到nginx資料夾，再找到sites資料夾，

裡面已經有一個default.conf

如果要新增一個新的網域，

請複製laravel.conf.example另存成新的.conf並修改內容如下圖

7.開啟local.你的專案名稱，來檢視看看是否完成

若完成如下圖

[Mysql]當資料量大時

當SQL查詢要join大資料的表時 可以針對要join的欄位做索引 可大幅提升查詢效能 要注意的是join起來的欄位需要相同類型

[Laravel]開始之前...

1.用composer新增專案

composer create-project laravel/laravel laravelproject

2.修改.env設定

DB_DATABASE=

DB_USERNAME=

DB_PASSWORD=

3.修改 app/Providers/AppServiceProvider.php

use Illuminate\Support\Facades\Schema;

public function boot()
{
Schema::defaultStringLength(191); //這一行新增
}

4.修正時區 config/app.php

'timezone' => 'Asia/Taipei',

5.建立登入系統

php artisan make:auth

6.建立資料表

php artisan make:migration create_users_table

php artisan migrate

7.roll back

php artisan migrate:rollback

# 建立 Controller
php artisan make:controller PhotoController --resource

php artisan make:controller PhotoController --resource --model=Photo

# 建立 model
php artisan make:model User

修改欄位 1創建一個修改欄位的class php artisan make:migration change_table_nullable 2class內容 string('column')->nullable(); }); } /** * Reverse the migrations. * * @return void */ public function down() { // DB::statement('ALTER TABLE job_main MODIFY `outsourcing_company` varchar(191) NOT NULL;'); DB::statement('ALTER TABLE job_main MODIFY `outsourcing_date` varchar(191) NOT NULL;'); } } 3執行artisan migrate php artisan migrate

[XAMPP]excel報表匯出功能錯誤

Warning: Cannot modify header information – headers already sent by
當出現這方面的警告時

請去php.ini修改
output_buffering = on

即可

[XAMPP]更改Apache網站目錄

XAMPP網站預設安裝目錄為C:\xampp\htdocs\

要改變網站目錄如下

1.找到C:\xampp\apache\conf\httpd.conf
2.修改內容如下

DocumentRoot "C:/xampp/htdocs"
改為要指定的路徑
<Directory "C:/xampp/htdocs">
改為要指定的路徑

[laravel]產生遷移檔

4.2版本
php artisan migrate:make create_users_table
5.3版本
php artisan make:migration create_users_table

以上是兩個版本的差異


資料填充
use App\User;
use Illuminate\Database\Eloquent\Model;
加上這兩行
才能找到 class User
否則會出現
Seeding: UserTableSeeder
PHP Fatal error:  Class 'User' not found
的錯誤



表單加入
https://laravelcollective.com/docs/5.4/html

[主機搬移]遇到的問題

在wordpress後台主題控制選單發生連結跑掉的問題，
後來發現是快取的關係，
清除快取後便正常顯示了。

正常的URL:
wp-admin/admin.php?page=of-advanced-menu&tab=advanced-settings-tab


不正常的URL:
wp-admin/admin.php?page=of-advanced-menu#admin-/wp-admin/admin.php?page=of-advanced-menu&tab=advanced-settings-tab

[主機]bluehost更換php version

1. Log in to your Bluehost account.
2. Under Programming click PHP Config.
3. Select the version of PHP you're interested in using.
4. Click Save Change

[woocommerce]woocommerce 3.0 product image gallery

woocommerce 3.0升級上去後，在product image gallery這邊有了非常大的變化。

2.6以前在"設定"->"商品"選項裡可以選擇的燈箱效果拿掉了，
導致商品頁的lightbox等效果通通失效。

主要是因為3.0後，woocommerce採取更多樣化的選擇提供給使用者去選擇更多的功能。

詳細資訊可看
https://woocommerce.com/2017/04/woocommerce-3-0-release/

目前解決方式如下

在主題的function.php裡面增加下列程式碼

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

回到前台商品頁
功能有出來了但是css的部分能然要設定一下

/* WooCommerce 3.0 Gallery */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

參考資料
https://createandcode.com/broken-photo-gallery-and-lightbox-after-woocommerce-3-0-upgrade/

[HTML]簡易選單製作

首先html部分

<div class="header" style="height:300px;">
</div>
<section class="section section--menu" id="Alonso">
<nav class="menu menu--alonso">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">NEWS</a></li>
<li class="menu__item"><a href="#" class="menu__link">PROJECT</a></li>
<li class="menu__item"><a href="#" class="menu__link">RESERVATION</a></li>
<li class="menu__item"><a href="#" class="menu__link">CONTECT</a></li>
</ul>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="#">NEWS</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">RESERVATION</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
</div>
</nav>
</section>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>

CSS部分

<style>
body{
padding:0;
margin:0;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
.section {
}
.menu--alonso{
display:block;
}
.section--menu {
position: relative;
}
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
-webkit-align-items: center;
        align-items: center;
-webkit-justify-content: center;
        justify-content: center;
background: burlywood;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__list .selected a{
color: #f48b95;
}

.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* mobile style */
#dl-menu{
display: none;
}
.dl-menuwrapper button {
background: #ccc;
border: none;
width: 48px;
height: 45px;
text-indent: -900em;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
background: #aaa;
}
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 5px;
background: #fff;
top: 10px;
left: 16%;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
}
.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.dl-menuwrapper li {
position: relative;
min-width: 300px;
}
.dl-menuwrapper li a {
display: block;
position: relative;
padding: 15px 20px;
font-size: 16px;
line-height: 20px;
font-weight: 300;
color: #fff;
outline: none;
}
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
.dl-menuwrapper .dl-menu {
margin: 5px 0 0 0;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
@media screen and (max-width:1025px) {
.menu__list {
display: none;
}
#dl-menu{
display: block;
width: 100%;
text-align: center;
}
}
</style>

javascript部分

<script>
jQuery(document).ready(function(){
jQuery('.menu__item').click(function(){
jQuery(this).addClass('selected');
jQuery(this).siblings('.selected').removeClass('selected');
});

var flag = false;
jQuery('.dl-trigger').click(function(){
if(flag == false){
jQuery(this).parents().find('.dl-menu').addClass('dl-menuopen');
flag = true;
}else{
jQuery(this).parents().find('.dl-menu').removeClass('dl-menuopen');
flag = false;
}
});
});
</script>
<script>
jQuery(document).ready(function(){
var hh = jQuery('.header').height();
var window_height;
jQuery(window).scroll(function() {
window_height = jQuery(document).scrollTop();
if(window_height > hh){
jQuery('.menu__list').css({position: 'fixed',top: '0', width: '100%', 'z-index': '9999', background: 'rgb(255, 255, 255)', left: '0px', height: '120px'});
}else{
jQuery('.menu__list').css({position: "relative"});
}
});
});
</script>

[Wordpress]解決Allowed memory size of XXXXXX bytes exhausted

Wordpress在安裝許多外掛之後，突然發現admin_ajax.php發生錯誤，
經過找尋原因後發現是Allowed memory size of XXXXXX bytes exhausted的問題，
由於主機是國外租用的無法修改php.ini檔，
故在wp-config.php這隻檔案加上
ini_set('memory_limit', '256M');
這段語法即可。

[css]svg動態範例

html部分:
<div id="svg_test">
<svg version="1.1" id="svg_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="967px" height="1000px" viewBox="0 0 96.718 100.027" enable-background="new 0 0 96.718 100.027" xml:space="preserve">
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M6.218,48.542c0-14.534,7.407-27.361,18.645-34.927v-0.918C13.176,20.367,5.434,33.558,5.434,48.542
c0,22.129,16.876,40.399,38.443,42.642v-0.792C22.743,88.149,6.218,70.242,6.218,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M33.83,8.239v0.835c4.54-1.671,9.416-2.628,14.527-2.628c5.115,0,9.991,0.957,14.532,2.628V8.239
c-4.548-1.64-9.425-2.58-14.532-2.58C43.251,5.659,38.376,6.599,33.83,8.239z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M90.495,48.542c0,21.695-16.518,39.607-37.652,41.85v0.792c21.569-2.247,38.441-20.513,38.441-42.642
c0-14.984-7.744-28.175-19.429-35.845v0.918C83.09,21.181,90.495,34.008,90.495,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M48.357,0.232c-5.06,0-9.938,0.788-14.527,2.232v1.397v0.232v1.391c4.57-1.548,9.443-2.417,14.527-2.417
c5.087,0,9.959,0.875,14.532,2.417V4.094V3.862V2.465C58.299,1.02,53.417,0.232,48.357,0.232z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M2.834,48.542c0-16.481,8.852-30.902,22.028-38.875V8.136V7.881V6.354C10.05,14.62,0,30.418,0,48.542
C0,73.67,19.308,94.356,43.877,96.629v-1.312v-0.222v-1.304C20.874,91.531,2.834,72.105,2.834,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M71.855,6.354v1.527V8.14v1.527c13.179,7.973,22.027,22.394,22.027,38.875c0,23.563-18.037,42.989-41.04,45.244v1.31
v0.222v1.304c24.57-2.271,43.876-22.958,43.876-48.079C96.718,30.418,86.669,14.62,71.855,6.354z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M48.357,82.788c-1.652,0-2.996,1.071-2.996,2.384v5.313v0.785v2.59v1.31v0.227v1.303v0.95
c0,1.314,1.343,2.379,2.996,2.379c1.657,0,3.003-1.064,3.003-2.379v-0.95v-1.303v-0.227v-1.31v-2.59v-0.785v-5.313
C51.36,83.859,50.014,82.788,48.357,82.788z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M29.35,0c-1.657,0-3.005,1.064-3.005,2.373v3.205v1.456v0.238v1.494v3.032v0.917v2.14c0,1.313,1.349,2.379,3.005,2.379
c1.654,0,2.999-1.066,2.999-2.379V9.617V8.781V6.029V4.638V4.404V3.009V2.373C32.349,1.064,31.004,0,29.35,0z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M67.369,17.233c1.656,0,3.004-1.066,3.004-2.379v-2.14v-0.917V8.765V7.271V7.033V5.577V2.373
C70.373,1.064,69.025,0,67.369,0c-1.655,0-2.999,1.064-2.999,2.373v0.637v1.395v0.234v1.391v2.751v0.836v5.237
C64.37,16.167,65.713,17.233,67.369,17.233z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M31.079,45.283c4.079-1.162,7.878-3.426,10.91-6.469c2.961-2.959,5.179-6.657,6.368-10.618
c1.196,3.96,3.411,7.658,6.374,10.618c3.027,3.043,6.837,5.307,10.904,6.469c4.065,1.152,8.412,1.261,12.3-0.103
c-3.868-1.364-7.261-2.765-10.354-4.591c-3.082-1.787-5.836-3.91-8.279-6.341c-2.442-2.439-4.564-5.193-6.36-8.272
c-1.824-3.08-3.229-6.486-4.584-10.341c-1.355,3.855-2.762,7.261-4.583,10.341c-1.793,3.079-3.917,5.833-6.361,8.272
c-2.447,2.432-5.198,4.555-8.281,6.341c-3.088,1.826-6.486,3.227-10.351,4.591C22.668,46.544,27.014,46.435,31.079,45.283z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M59.301,59.688c-2.442-2.439-4.564-5.192-6.36-8.271c-1.824-3.082-3.229-6.487-4.584-10.342
c-1.355,3.855-2.762,7.261-4.583,10.342c-1.793,3.079-3.917,5.832-6.361,8.271c-2.447,2.433-5.198,4.55-8.281,6.341
c-3.088,1.82-6.486,3.227-10.351,4.59c3.887,1.368,8.232,1.259,12.297,0.113c4.079-1.169,7.878-3.433,10.91-6.477
c2.961-2.96,5.179-6.658,6.368-10.617c1.196,3.959,3.411,7.657,6.374,10.617c3.027,3.044,6.837,5.308,10.904,6.477
c4.065,1.146,8.412,1.255,12.3-0.113c-3.868-1.363-7.261-2.77-10.354-4.59C64.499,64.237,61.745,62.12,59.301,59.688z"/>

</svg>
</div>

css部分:
<style>
#svg_test{
text-align: center;
}
#svg_1{
fill: #000000;
width: 500px;
height: 500px;
stroke: #000000;
}
#svg_test2{
text-align: center;
}
#svg_2{
margin: 0 auto;
}
.path {
  fill-opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-name: DrawLine, FillIn;
  animation-duration: 10s, 10s;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes DrawLine {
  to { stroke-dashOffset: 0; }
}

@keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

@keyframes FillIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@keyframes fill{
0% {
fill: black;
}
50% {
fill: white;
}
100% {
fill: black;
}
}
</style>

[site5]自訂php.ini

1.在 File Manager>public_html目錄下新增存.user.ini文件
2.用ftp下載下來後修改內容
3.在空白文件輸入memory_limit = 128M等等指令後儲存檔案
4.上傳回public_html目錄下
即可修改php.ini的內容

參考網址
https://kb.site5.com/php/how-to-make-custom-php-changes-using-a-user-ini-file/

[photoshop]複製圖層到新檔

變成複製圖案的大小

影像->修剪->確定

[css]英文字強制換行

1. word-break: break-all;

[wordpress]woocommerce貨號問題

舊版的woocommerce貨號會另外有張wp_ps_product_sku來存放
新版的woocommerce貨號會存放在wp_postmeta

要搜尋相關貨號如下

SELECT * FROM `wp_postmeta` WHERE `meta_value` = '要查詢的貨號'

[CSS]calc()介紹

當要將layout切成3等分時，以往的做法通常是針對每個div去下width: 33.3%;來實現

現在可直接下width: calc(100%/3);即可自動切成3等分

另外此方法相當彈性，可加減乘除。

例:
div{
width: calc(100%/3-5px);
}
以上div寬度變成33.3%在減5px

最後補充，不僅可以使用在width上面，padding、margin亦可使用。
例:
div{
width: calc(100%/3-5px);
margin-left: calc(5px*3/2);
}

[php]西曆轉成民國

<?php
$date = date('Y/m/d');
$date_array = explode("/", $date);
$date_array[0] = $date_array[0] - 1911;
$date_array = $date_array[0] . '/' . $date_array[1] . '/' . $date_array[2];
echo $date_array;
?>

[wordpress]連結google calendar api的小外掛

1.先註冊成為google api 使用者(網路上教學很多，不多敘述)
2.先前往https://developers.google.com/google-apps/calendar/overview?hl=zh-TW參考php的Quickstart
3.承上，會使用Composer下載相關google calendar api的程式碼(注1.)
4.進入要設定分享的日曆進入日曆設定>>共用此日曆新增第1步所註冊的google api使用者
5.

建立一組API金鑰

6.
<?php
ini_set("display_errors", "On");
error_reporting(E_ALL & ~E_NOTICE);
require_once __DIR__ . '/vendor/autoload.php';//步驟3所下載的google calendar api
define('APPLICATION_NAME', 'Google Calendar API PHP Function');
define('SCOPES', implode(' ', array(Google_Service_Calendar::CALENDAR_READONLY)));

function getClient() {
$client = new Google_Client();
$client->setApplicationName(APPLICATION_NAME);
$client->setScopes(SCOPES);
$client->setDeveloperKey('XXXXXXXXX');//步驟5所建立的金鑰
$client->setAccessType('online');

return $client;
}

$client = getClient();
$service = new Google_Service_Calendar($client);
$calendarId = 'XXXXXX@group.calendar.google.com';//步驟4所要共用的日曆ID
$optParams = array(
'orderBy' => 'startTime',
'singleEvents' => TRUE,
);
$calEvents = $service->events->listEvents($calendarId, $optParams)->getItems();
?>
以上程式碼是簡易的抓取日曆上的資料
注1:Composer用法請參考[xampp]安裝laravel這篇文章

[javascript]簡單製作浮動視窗置底功能

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
  if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()){
jQuery('#warnings').css("position", "static");
jQuery(window).scrollTop(jQuery(document).height());
}else{
jQuery('#warnings').css("position", "fixed");
}
  });
});
</script>


jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()
// 這段是判斷scrollbar是否已經到最底部，當滑到最底時改為固定在最底下否則以浮動的方式固定在網頁的最下方


CSS部分

#warnings {

1. position: fixed;
2. bottom: 0;
3. z-index: 999;

}