WBDSGNR - Real Life Implement: September 2018

Saturday, 29 September 2018

Wordpress : Change Port of Localhost

Search this line

define('DB_COLLATE', '');

add this after/below it

define( 'DB_HOST', '127.0.0.1:3307' );

Next go to phpMyAdmin database and open wp_options

click to open large

Change this port number

Then it settle, you should able to serve on port that you've change to.

Friday, 28 September 2018

Wordpress : Unable to download plugin in localhost

If you using appserve or easyphp this could be the solution for you.. suddenly your wordpress in localhost inform you that

Download failed.: No working transports found
Installation Failed

👋😅😤😣😝😝😝

Editing php.ini file

The php.ini file contains a list of many extensions with some of them disabled by default. The only one I had to enable was the openssl extension.

Here are the steps to enable that extension:

Open File Explorer and locate the php folder of the EasyPHP application. On Windows 10, it should be:
C:\Program Files (x86)\EasyPHP-Devserver-16.1\eds-binaries\php
You will see two folders inside, one for PHP version 5.6.19 and one for the 7.0.4 version. Select the one the Apache server is using. If you are unsure, open the EasyPHP Dashboard and check the PHP number under "HTTP SERVER".
Open php.ini file in your favorite text editor and search for php_openssl.dll text. You should see that the extension is commented out:
```
;extension=php_openssl.dll
```
Uncomment that line by removing ; character and save the changes.
All that is left is to restart the Apache server and we are done.

After going through the steps above, the WordPress site on my development server was able to update plugins without any problem. If you still have issues, try also to enable curl extension extension=php_curl.dll.

Note: To restart the Apache, right-click on the EasyPHP notification icon, then select Open Dashboardto stop / start the Apache server.

https://www.howtosolutions.net/2017/01/easyphp-wordpress-no-working-transports-found-error/

WORDPRESS : Increase media file size

paste this code inside .htaccess

php_value upload_max_filesize 64M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

still not success?

Ok maybe in your theme function.php add this at the bottom

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

Ok c'mon.. still not success? maybe you can create php.ini save it at root of the folder same in your index.php

paste this inside php.ini

upload_max_filesize = 25M
post_max_size = 13M
memory_limit = 15M

Localhost to internet

There are couple of good free service that let you do the same. Ideal for showing something quickly for testing:

Thursday, 27 September 2018

JQUERY : DOM manipulation / Change id content using jquery

Same as javascript getElementById("");

FOR TEXT

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<div id="demo">
   <p>The initial text</p>
</div>


<script>
$(document).ready(function(){
  $('#demo').text('The replaced text.');
});
</script>
</body>
</html>

FOR HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<div id="demo">
   <p>The initial text</p>
</div>


<script>
$(document).ready(function(){
  $('#demo').html('<b>The replaced text.</b>');
});
</script>
</body>
</html>

PHP : Enable and disable Permission to access external .php file

Add this to the page that you want to only be included

<?php
if(!defined('MyConst')) {
   die('Direct access not permitted');
}
?>

then on the pages that include it add

<?php
define('MyConst', TRUE);
?>

Sunday, 23 September 2018

PHP navbar using if condition & form to view content

<div class="navigation-bar" style="margin:1em 30%;">
<form action="" method="POST" style="display:inline;">
<input type="submit" value="Hello World" name="about" class="btn">
</form>
<form action="" method="POST" style="display:inline;">
<input type="submit" value="How Are You" name="how" class="btn">
</form>
<form action="" method="POST" style="display:inline;">
<button type="submit" value="How Are You" name="home" class="btn"> Home </button>
</form>
</div>
<br>
<?php
if (isset($_POST["about"]))
{
echo "Hello World";
};
if (isset($_POST["how"]))
{
echo "hello world How are you today";
};
if (isset($_POST["home"])) {
include "ifelse.php";
}
?>

Friday, 14 September 2018

VUE: Using @blur event with component methods interact with root method

See the Pen Vue : guna $emit @blur dalam template & root methods by muhaza (@muhaza) on CodePen.

wait!.. the example on load...

Wednesday, 12 September 2018

VUE : Component Structure

In html

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Component No1</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
    <style>
    body{
        padding-top:40px;
    }
    </style>


</head>

<body>


    <div id="root" class="container">

        <componentName title="Hello World" body="lorem ipsum dolar sit amet."></componentName>        <componentName title="Success" body="creating component by using props on components"></componentName>
        
     

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="component.js"></script>

</body>

</html>

In JS

Vue.component('componentName', {

    props: ['componentProps',],

    data(){
        return{
            componentCondition: true, //boolean
        }

    },
    
    template: `
    <article class="message is-warning" v-show="inVisible">
    <div class="message-header">

      {{ title }} 
      <button type="button" @click="clickMethod">x</button>

    </div>
    <div class="message-body">
      {{ body }}

      </div>
    </article>
    `,

    methods:{
        clickMethod(){
            this.componentCondition = false; //methods is events+data= result

        }
    }
});

new Vue({
    el:'#root' //div id on html
});

Tuesday, 11 September 2018

VUEJS : Todo

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


</head>

<body>



    <div id="root">

        <ul>
            <li v-for="name in names" v-text="name"></li>
        </ul>

        <input id="input" type="text" v-model="newName">
        <button v-on:click="addName"> Add Name</button>
        

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        var dev = new Vue({
            el: '#root',
            

            data: {
                names: ['hafiz', 'muhaza', 'spikey'],
                newName:'',
            },

            methods:{
                addName() {
                    this.names.push(this.newName);
                }
            }

        })



    </script>

</body>

</html>

..

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/3

Saturday, 1 September 2018

Javascript : .innerHtml & .textContent

 <span id="mangsa">Dokument syarikat</span>
            
  
    <script>
        var kuliPencuri = document.getElementById("mangsa");

        var bosPencuri = function() {

            kuliPencuri.innerHTML = `<b>Dokument syarikat</b>`;
            
        };

        kuliPencuri.addEventListener("click", bosPencuri);

        
        </script>

..

This will show result as HTML render.

 <span id="mangsa">Dokument syarikat</span>
            
  
    <script>
        var kuliPencuri = document.getElementById("mangsa");

        var bosPencuri = function() {

            kuliPencuri.textContent = "Dokument Palsu";
            
        };

        kuliPencuri.addEventListener("click", bosPencuri);

        
        </script>

..

This will show raw HTML not rendered

http://xahlee.info/js/js_textContent_innerHTML_innerText_nodeValue.html