Monthly Archives: April 2020

Stack in October – placeholder

If you want to inject some content from page to layout, october doesn’t have “stack”, use “placeholder” instead.

Layout:

{% placeholder scripts %}

Page:

{% put scripts %}
<script type="text/javascript">
//Some scripts here
</script>
{% endput %}

Reference:

Official Layout Usage
https://octobercms.com/docs/cms/layouts

Track remote branch

把目前使用中，而且沒有git的資料夾track remote branch

連線的PC or server要有SSH Key, 並且把Public key的內容貼到Bitbucket的Repo設定裡
1. Step by step tutorial: https://confluence.atlassian.com/bitbucket/set-up-an-ssh-key-728138079.html
Git commands to track remote branch
1. git init
2. git add . git commit -m ‘some comment’
3. git remote add origin git@gitserver:/opt/git/project.gitReference
4. Maybe git checkout master will do.

Fix “detached HEAD” error

https://gitbook.tw/chapters/faq/detached-head.html

Fix “refusing to merge unrelated histories” error:

git pull origin master --allow-unrelated-histories

Reference:

https://stackoverflow.com/questions/24916708/track-existing-folder-from-remote-git-repo
Track Remote Branch https://stackoverflow.com/questions/520650/make-an-existing-git-branch-track-a-remote-branch
Common commands related to remote https://backlog.com/git-tutorial/tw/reference/remote.html

Classic ASP on Windows Server 2016

To parse XML

server.createObject("MSXML2.DOMDocument.4.0")

1	server.createObject("MSXML2.DOMDocument.4.0")

Required:

Microsoft Core XML Services (MSXML) 6.0
https://www.microsoft.com/en-us/download/details.aspx?id=3988
Change script to 6.0
https://stackoverflow.com/questions/16167111/activex-component-cant-create-object-msxml2-domdocument

set domT = server.createObject("MSXML2.DOMDocument.6.0")

1

set domT = server.createObject("MSXML2.DOMDocument.6.0")
Install MSXML 4.0 Service Pack 3 if above steps still fail.
https://www.microsoft.com/en-us/download/confirmation.aspx?id=15697

CI with PHP 7

Solution for this error:

Only variable references should be returned by reference

https://stackoverflow.com/questions/28348879/only-variable-references-should-be-returned-by-reference-codeigniter

It seems CI could run on PHP 7 just solve this error.

Handling Ajax Response Errors From Laravel Form Request Validation: lalavalidate.js

//A jquery plugin to handle error response from server and the server side
//use Laravel form validator to verify fields.
(function( $ ){
    var settings = {
        default_msg: '請檢查必填欄位', 
        show_default_msg: true,
        err_class_name: 'lala_error'
    }

    $.fn.lalavalidate = function(methodOrOptions) {
        //If methodOrOptions is a method name
        //console.log(methodOrOptions);
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist.' );
        }    
    };

    var methods = {
        init : function(options) {
            settings = $.extend(settings, options);
            var err_class_name = settings.err_class_name;
            //console.log(settings);return;

            return this.each( function() {
                var $form = $(this);
                
                $form.find('input, select, textarea').each(function(){
                    var $e = $(this);
                    var type = $e[0].type;

                    if(type == 'radio' || type == 'checkbox'){
                        //console.log(type);
                        var name = $e.attr('name');
                        var $last = $form.find('[name="' + name + '"]:last');

                        $e.on('focus', function(){
                            var $err = $last.parent().find('.' + err_class_name);
                            if($err.length > 0){
                                $err.remove();
                            }
                        });
                    }else{
                        $e.on('focus', function(){
                            var $parent = $e.parent();
                            var $err = $parent.find('.' + err_class_name);
                            if($err.length > 0){
                                $err.remove();
                            }
                        });
                    }
                });
            });
        },
        show_errors: function(response){
            //console.log(response);
            return this.each( function() {
                var $this = $(this);

                //Process responseJSON first
                if (typeof response.responseJSON != 'undefined') {
                    var json = response.responseJSON;
                    var errors = json.errors;
                    //console.log(errors);
                    if(settings.show_default_msg == true){
                        alert(settings.default_msg);
                    }

                    display_field_errors($this, errors);
                }else if(typeof response.responseText != 'undefined') {
                    alert(response.responseText);
                }else{
                    alert(response);
                }
            });
        }
    };

    function display_field_errors($form, errors){
        var err_class_name = settings.err_class_name;

        for(var key in errors){
            var err = errors[key];
            var $el = $form.find('[name="' + key + '"]');

            if($el.length != 0){
                var type = $el[0].type;

                if(type == 'radio' || type == 'checkbox'){
                    var $last = $el.last();
                    var $err = $last.parent().find('.' + err_class_name);
                    if($err.length > 0){
                        $err.remove();
                    }

                    var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');
                    $last.parent().append($error);
                }else{
                    var $err = $el.parent().find('.' + err_class_name);
                    if($err.length > 0){
                        $err.remove();
                    }

                    var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');
                    $el.parent().append($error);
                }
            }
        }
    }

})( jQuery );

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

//A jquery plugin to handle error response from server and the server side

//use Laravel form validator to verify fields.

(function( $ ){

var settings = {

default_msg: '請檢查必填欄位',

show_default_msg: true,

err_class_name: 'lala_error'

}

$.fn.lalavalidate = function(methodOrOptions) {

//If methodOrOptions is a method name

//console.log(methodOrOptions);

if ( methods[methodOrOptions] ) {

return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));

} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {

// Default to "init"

return methods.init.apply( this, arguments );

} else {

$.error( 'Method ' + methodOrOptions + ' does not exist.' );

}

};

var methods = {

init : function(options) {

settings = $.extend(settings, options);

var err_class_name = settings.err_class_name;

//console.log(settings);return;

return this.each( function() {

var $form = $(this);

$form.find('input, select, textarea').each(function(){

var $e = $(this);

var type = $e[0].type;

if(type == 'radio' || type == 'checkbox'){

//console.log(type);

var name = $e.attr('name');

var $last = $form.find('[name="' + name + '"]:last');

$e.on('focus', function(){

var $err = $last.parent().find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

});

}else{

$e.on('focus', function(){

var $parent = $e.parent();

var $err = $parent.find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

});

}

});

show_errors: function(response){

//console.log(response);

return this.each( function() {

var $this = $(this);

//Process responseJSON first

if (typeof response.responseJSON != 'undefined') {

var json = response.responseJSON;

var errors = json.errors;

//console.log(errors);

if(settings.show_default_msg == true){

alert(settings.default_msg);

}

display_field_errors($this, errors);

}else if(typeof response.responseText != 'undefined') {

alert(response.responseText);

}else{

alert(response);

}

});

}

};

function display_field_errors($form, errors){

var err_class_name = settings.err_class_name;

for(var key in errors){

var err = errors[key];

var $el = $form.find('[name="' + key + '"]');

if($el.length != 0){

var type = $el[0].type;

if(type == 'radio' || type == 'checkbox'){

var $last = $el.last();

var $err = $last.parent().find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');

$last.parent().append($error);

}else{

var $err = $el.parent().find('.' + err_class_name);

if($err.length > 0){

$err.remove();

}

var $error = $('<div class="' + err_class_name + '" style="display:block;color:#ff0000;">' + err[0] + '</div>');

$el.parent().append($error);

}

})( jQuery );

Usage:

$(document).ready(function () {
    $('#iform').lalavalidate();
        
    $('#iform').ajaxForm({
        dataType: 'json',
        beforeSubmit: function (arr, $form, options) {
            if ($('#agree').prop('checked') == false) {
                alert('勾選同意使用條款及合約後才可送出表單');
                return false;
            }

            var pass1 = $('[name="password"]').val();
            var pass2 = $('[name="rpassword"]').val();
            if (pass1 != pass2) {
                alert('請輸入相同的密碼');
                return false;
            }
        },
        success: function (data, statusText, xhr, $form) {
            //console.log(data);
            if (typeof data.status == 'undefined') {
                alert(data);
            } else if (data.status == 'fail') {
                alert(data.message);
            } else {
                //console.log(data);
                alert('註冊成功，請至您的電子郵件信箱收取確認信');
                window.location.href = base_url;
            }
        },
        error: function (data) {
            //console.log(data);
            $('#iform').lalavalidate('show_errors', data);
        }
    });
});

$(document).ready(function () {

$('#iform').lalavalidate();

$('#iform').ajaxForm({

dataType: 'json',

beforeSubmit: function (arr, $form, options) {

if ($('#agree').prop('checked') == false) {

alert('勾選同意使用條款及合約後才可送出表單');

return false;

}

var pass1 = $('[name="password"]').val();

var pass2 = $('[name="rpassword"]').val();

if (pass1 != pass2) {

alert('請輸入相同的密碼');

return false;

}

success: function (data, statusText, xhr, $form) {

//console.log(data);

if (typeof data.status == 'undefined') {

alert(data);

} else if (data.status == 'fail') {

alert(data.message);

} else {

//console.log(data);

alert('註冊成功，請至您的電子郵件信箱收取確認信');

window.location.href = base_url;

}

error: function (data) {

//console.log(data);

$('#iform').lalavalidate('show_errors', data);

}

});

Google reCaptcha

.env

RECAPTCHA_SITE_KEY=xxxxx
RECAPTCHA_SECRET=xxxxxx

1 2	RECAPTCHA_SITE_KEY=xxxxx RECAPTCHA_SECRET=xxxxxx

Front

<script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>

<script>
grecaptcha.ready(function() {
    grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'signup'}).then(function(token) {
        //Hidden field
        var recaptchaResponse = document.getElementById('recaptchaResponse');
        recaptchaResponse.value = token;
    });
});
</script>

grecaptcha.ready(function() {

grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'signup'}).then(function(token) {

//Hidden field

var recaptchaResponse = document.getElementById('recaptchaResponse');

recaptchaResponse.value = token;

});

</script>

Backend

    private function verify_recaptcha($response){
        $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
        $recaptcha_secret = env('RECAPTCHA_SECRET');
        $recaptcha_response = $response;

        // Make and decode POST request:
        $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
        $recaptcha = json_decode($recaptcha);
        //logg($recaptcha);

        // Take action based on the score returned:
        if($recaptcha->success == false){
            $errors = $recaptcha->{'error-codes'};
            //logg($errors);
            $this->err = implode(', ', $errors);
            return false;
        }else{
            if ($recaptcha->score >= 0.5) {
                // Verified - send email
                return true;
            } else {
                // Not verified - show form error
                $this->err = 'Score is too low';
                return false;
            }
        }
    }

    public function signup_save(SignupSave $req)
    {
        $data = $req->input();
        //logg($data);

        $captcha_response = $data['recaptcha_response'];
        if($captcha_response == false){
            return $this->fail_response('reCaptcha Error');
        }else{
            $result = $this->verify_recaptcha($captcha_response);
            if($result == false){
                return $this->fail_response($this->err);
            }
        }
    }

private function verify_recaptcha($response){

$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';

$recaptcha_secret = env('RECAPTCHA_SECRET');

$recaptcha_response = $response;

// Make and decode POST request:

$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);

$recaptcha = json_decode($recaptcha);

//logg($recaptcha);

// Take action based on the score returned:

if($recaptcha->success == false){

$errors = $recaptcha->{'error-codes'};

//logg($errors);

$this->err = implode(', ', $errors);

return false;

}else{

if ($recaptcha->score >= 0.5) {

// Verified - send email

return true;

} else {

// Not verified - show form error

$this->err = 'Score is too low';

return false;

}

public function signup_save(SignupSave $req)

{

$data = $req->input();

//logg($data);

$captcha_response = $data['recaptcha_response'];

if($captcha_response == false){

return $this->fail_response('reCaptcha Error');

}else{

$result = $this->verify_recaptcha($captcha_response);

if($result == false){

return $this->fail_response($this->err);

}

Google Verify API response examples

Type: object<br/><pre>stdClass Object
(
    [success] => 1
    [challenge_ts] => 2020-04-20T15:48:54Z
    [hostname] => localhost
    [score] => 0.9
    [action] => signup
)
</pre>


Type: object<br/><pre>stdClass Object
(
    [success] => 
    [error-codes] => Array
        (
            [0] => timeout-or-duplicate
        )

)
</pre>

Type: object<br/><pre>stdClass Object

(

[success] => 1

[challenge_ts] => 2020-04-20T15:48:54Z

[hostname] => localhost

[score] => 0.9

[action] => signup

)

</pre>

Type: object<br/><pre>stdClass Object

(

[success] =>

[error-codes] => Array

(

[0] => timeout-or-duplicate

)

</pre>

Reference:

reCAPTCHA v3 Example for PHP
https://stevencotterill.com/articles/adding-google-recaptcha-v3-to-a-php-form
Official
https://developers.google.com/recaptcha/docs/v3
Admin Console
https://www.google.com/recaptcha/admin

webpack.mix.js example

Commands

npm run dev
npm run watch

1 2	npm run dev npm run watch

Example

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

//Run npm watch

mix.sass('resources/sass/admin_custom.scss', 'public/assets/admin/css');


mix.sass('resources/postcss/style.scss', 'public/assets/front/css').options({
    postCss: [
        require('precss')(),
        require('postcss-color-function')(),
        require('postcss-color-alpha')(),
        require('lost')()
    ],
    processCssUrls: false
});

mix.scripts([
    'resources/js/libs/jquery-2.1.4.min/*.js',
    'resources/js/libs/blazy.min/*.js',
    'resources/js/libs/mustache.min/*.js',
    'resources/js/libs/packery.pkgd.min/*.js',
    'resources/js/libs/imagesloaded.pkgd.min/*.js',
    'resources/js/libs/slick.min/*.js',
    'resources/js/libs/sly.min/*.js',
    'resources/js/plugins/*.js'
], 'resources/js/plugins.concat.js');

mix.scripts([
    'resources/js/plugins.concat.js',
    'resources/js/order/init.js',
    'resources/js/order/matchmedia.js',
    'resources/js/global/*',
    'resources/js/main/*',
], 'public/assets/front/js/all.js');

mix.copyDirectory('resources/images/', 'public/assets/front/images/');
mix.copyDirectory('resources/fonts/', 'public/assets/front/fonts/');

const mix = require('laravel-mix');

|--------------------------------------------------------------------------

| Mix Asset Management

|--------------------------------------------------------------------------

| Mix provides a clean, fluent API for defining some Webpack build steps

| for your Laravel application. By default, we are compiling the Sass

| file for the application as well as bundling up all the JS files.

//Run npm watch

mix.sass('resources/sass/admin_custom.scss', 'public/assets/admin/css');

mix.sass('resources/postcss/style.scss', 'public/assets/front/css').options({

postCss: [

require('precss')(),

require('postcss-color-function')(),

require('postcss-color-alpha')(),

require('lost')()

processCssUrls: false

});

mix.scripts([

'resources/js/libs/jquery-2.1.4.min/*.js',

'resources/js/libs/blazy.min/*.js',

'resources/js/libs/mustache.min/*.js',

'resources/js/libs/packery.pkgd.min/*.js',

'resources/js/libs/imagesloaded.pkgd.min/*.js',

'resources/js/libs/slick.min/*.js',

'resources/js/libs/sly.min/*.js',

'resources/js/plugins/*.js'

], 'resources/js/plugins.concat.js');

mix.scripts([

'resources/js/plugins.concat.js',

'resources/js/order/init.js',

'resources/js/order/matchmedia.js',

'resources/js/global/*',

'resources/js/main/*',

], 'public/assets/front/js/all.js');

mix.copyDirectory('resources/images/', 'public/assets/front/images/');

mix.copyDirectory('resources/fonts/', 'public/assets/front/fonts/');

footerCallback manipulation

Ajax Get summary info with data (dataSrc)

            "ajax": {
                'url': base_url + 'admin/order/all',
                'data': function(d){
                    var $c = $('.buttons_panel');
                    d.from = get_value('from', $c);
                    d.to = get_value('to', $c);
                    d.status = get_value('status', $c);
                    d.pay_method = get_value('pay_method', $c);
                },
                'dataSrc': function(data){
                    summary = data.extra;
                    return data.data;
                }, 
                "cache": false,
            },

"ajax": {

'url': base_url + 'admin/order/all',

'data': function(d){

var $c = $('.buttons_panel');

d.from = get_value('from', $c);

d.to = get_value('to', $c);

d.status = get_value('status', $c);

d.pay_method = get_value('pay_method', $c);

'dataSrc': function(data){

summary = data.extra;

return data.data;

"cache": false,

footerCallback

            "footerCallback": function(row, data, start, end, display) {
                var api = this.api(), data;

                $( api.column( 7 ).footer() ).html(
                    summary['sell_qty']
                );

                $( api.column( 9 ).footer() ).html(
                    summary['buy_qty']
                );

                $( api.column( 10 ).footer() ).html(
                    '$'+ summary['subtotal']
                );

                $( api.column( 11 ).footer() ).html(
                    '$'+ summary['amount']
                );
            }

"footerCallback": function(row, data, start, end, display) {

var api = this.api(), data;

$( api.column( 7 ).footer() ).html(

summary['sell_qty']

);

$( api.column( 9 ).footer() ).html(

summary['buy_qty']

);

$( api.column( 10 ).footer() ).html(

'$'+ summary['subtotal']

);

$( api.column( 11 ).footer() ).html(

'$'+ summary['amount']

);

}

tfoot

<tfoot data-count="{{ $col_count }}">
                <tr role="row">
                    @for($i = 0; $i < $col_count; $i++)
                      <th></th>
                    @endfor
                </tr>
            </tfoot>

@for($i = 0; $i < $col_count; $i++)

@endfor

</tr>

</tfoot>

Reference:

dataSrc:
https://datatables.net/reference/option/ajax.dataSrc
dataSrc example:
http://live.datatables.net/sagujiza/1/edit

display property of tfoot

The “display” property must be “table-footer-group”, if you use “block”, all columns in tfoot will be merged in 1 column.

Return view html by Ajax

view()->render()

https://stackoverflow.com/questions/28634712/how-can-i-return-a-view-from-an-ajax-call-in-laravel-5

M	T	W	T	F	S	S
« Mar				May »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Monthly Archives: April 2020

Stack in October – placeholder

Track remote branch

Classic ASP on Windows Server 2016

CI with PHP 7

Handling Ajax Response Errors From Laravel Form Request Validation: lalavalidate.js

Google reCaptcha

webpack.mix.js example

footerCallback manipulation

display property of tfoot

Return view html by Ajax