WBDSGNR - Real Life Implement

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

Tuesday, 28 August 2018

hide component in angular 4

hide component in angular 4

<app-header *ngIf="1==2"> </app-header>

Sunday, 26 August 2018

Javascript : Click Event Example

<div style="background-color:#D94A38;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center;" onclick="clickMeEvent(this)">Click Me</div>

<script type="application/javascript">
function clickMeEvent(obj) {
  if (obj.innerHTML == "Click Me") {
    obj.innerHTML = "Click Me<br>Click Me Again";
    return;
  }
  if (obj.innerHTML == "Click Me<br>Click Me Again") {
    obj.innerHTML = "Thank You";  
    return; 
  }
  if (obj.innerHTML == "Thank You") {
  obj.innerHTML = "Goodbye";  
    return; 
  }
  if (obj.innerHTML == "Goodbye") {
    obj.style.display = "none";
    return;
  }
}
</script>

Friday, 3 August 2018

React : if else statement

IF ELSE statement boleh dikatakan penting untuk membuat keputusan dalam programming..
react tidak mempunyai shortcut seperti mana framework yang lain ia menggunakan skill javascript yang ori cuma dengan gaya react

1. if else

if (coinToss() === 'heads') {
  img = (
    <img src={pics.kitty} />
  );
} else {
  img = ( 
    <img src={pics.doggy} />
  );
}

..

if coinToss = heads
img = img pics.kitty,
else
img = img pics.doggy

import React from 'react';
import ReactDOM from 'react-dom';

function coinToss() {
  // This function will randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
  doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
};
let img;

// if/else statement begins here:
if (coinToss() === 'heads') {
  img = (
    <img src={pics.kitty} />
  );
} else {
  img = ( 
    <img src={pics.doggy} />
  );
}

ReactDOM.render(img, document.getElementById('app'));

..

2. Or using ternary Operator

1	const img = <img src={ pics[coinToss() === 'heads' ? 'kitty' : 'doggy'] } />;

..

scenario : if coinToss = head it should display kitty else its doggy

HOW TO WRITE OR ITS STRUCTURE?

import React from 'react';
import ReactDOM from 'react-dom';

function coinToss () {
  // Randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
  doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
};

const img = <img src={ pics[coinToss() === 'heads' ? 'kitty' : 'doggy'] } />;

ReactDOM.render(
 img, 
 document.getElementById('app')
);

..

2. USING && CONDITION

import React from 'react';
import ReactDOM from 'react-dom';




// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      { !judgmental &&<li> Nacho Cheez Straight Out The Jar</li>}
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

ReactDOM.render(
 favoriteFoods, 
 document.getElementById('app')
);

Thursday, 2 August 2018

Javascript : Create function

Function ibarat menulis resepi atau rukun. Contoh, senaraikan rukun iman?

rukunIman
percaya kepada Allah,
percaya kepada Rasul,
percaya kepada Malaikat,
percaya kepada Al-kitab,
percaya kepada hari akhirat,
percaya kepada qada dan qadar,

Bila ditulis dalam kaedah javascript ia akan menjadi seperti ini

function rukunIman(){
  percaya kepada Allah;
  percaya kepada Rasul;
  percaya kepada Malaikat;
  percaya kepada Al-kitab;
  percaya kepada hari akhirat;
  percaya kepada qada dan qadar;
}

..

Atau function lebih kepada buat seketul sandwich

function makeSandwich(){
 Get one slice of bread;
 Add turkey;
 Put a slice of bread on top;
}

..

Macam mana kalau nak buat option add turkey kepada benda atau isi lain?

..

function makeSandwich(filling){
 Get one slice of bread;
 Add filling;
 Put a slice of bread on top;
}

makeSandwich('burger')

..
ibaratnya, pelanggan datang dan mintak sandwich isi burger, jadi kita beri option kepada pelanggan untuk pilih isi apa.. refer filling

Function memberi peranan atau jawatan kepada sesuatu

function sayHiTo(peserta){
  console.log('hai', peserta);
}

sayHiTo ('muhaza')

..
Secara automatik muhaza akan diberi jawatan peserta atau peserta itu bernama muhaza

Revision : Javascript element

1. VARIABLE

Untuk simpan data dalam istilah javascript, kita guna variable atau var. Var perlu diberi nama..

var todos = ['item 1', 'item 2', 'item 3']

..
dalam kes ini variable diberi nama todos

2. VIEW DATA / VARIABLE

selepas data disimpan dengan sebarang nama, (declare by a name) ia boleh diseru keluar atau dipapar kembali ke browser dengan menggunakan prompt..

alert(todos) @ console.log(todos)

..

3. ADD NEW VALUE INTO VARIABLE

Dah set value dalam variable, boleh tambah value dengan kaedah .push

todos.push('new todo')

..

4. CHANGE VALUE INSIDE VARIABLE

Value sedia ada masih boleh diubah dengan pilih dan ganti

todos[0] = 'changed!'

..

5. DELETE VARIABLE VALUE

Value sedia ada boleh dipilih dan dipadam dengan kaedah splice

todos.splice(0,1)

React : Create Attribute

Dengan React kita boleh buat/bina attribute yang pelbagai

const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
}; 

const panda = (
  <img 
    src={pics.panda} 
    alt="Lazy Panda" />
);

const owl = (
  <img 
    src={pics.owl} 
    alt="Unimpressed Owl" />
);

const owlCat = (
  <img 
    src={pics.owlCat} 
    alt="Ghastly Abomination" />
);

..

contoh diatas adalah attribute untuk pics yang memiliki value name dan value.

React : How to render DOM to browser

Cara 1: Direct render html pada ReactDOM

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
ReactDOM.render(<h1>Render me!</h1>,
document.getElementById('app'));

..

Langkah diatas render tanpa menggunakan variable. Render me! akan di-render dalam id pada index.html.

Cara 2 : Dengan menggunakan variable

import React from 'react';
import ReactDOM from 'react-dom';

let renderMe = <h1> Render me! </h1>;
// Write code here:
ReactDOM.render(renderMe,
document.getElementById('app'));

..

Langkah diatas render menggunakan variable renderMe akan menghasilkan Render me! pada browser tetapi dengan memanggil variable.

Cara 3 : Render variable dalam ReactDOM guna misai {}

import React from 'react';
import ReactDOM from 'react-dom';

const theBestString = 'tralalalala i am da best';

ReactDOM.render(<h1>{theBestString}</h1>, document.getElementById('app'));

..
Boleh panggil variable dengan guna misai

Wednesday, 1 August 2018

React : Result to 'sometime' kadang-kadang

Guna react untuk dapatkan kebarangkalian option akan keluar. ambil contoh macam menu..
Kadang-kadang hari ni ada ais krim, kadang-kadang takde..

import React from 'react';
import ReactDOM from 'react-dom';

// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      { !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

ReactDOM.render(
 favoriteFoods, 
 document.getElementById('app')
);

{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }


..akan keluar kadang-kadang dengan kebarangkalian keluar sebanyak 0.5 atau  50%





My Favorite Foods

Sushi Burrito
Rhubarb Pie
Broiled Grapefruit








{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }



..tak keluar.







My Favorite Foods

Sushi Burrito
Rhubarb Pie
Nacho Cheez Straight Out The Jar
Broiled Grapefruit






{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }



..keluar.









Result keluar seperti ini kerana adanya variable 


// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

Tuesday, 31 July 2018

React : Structure, environment and cli

Create folder and add npm init

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init

React using babel ES6 so we need babel to make it functional

C:\Users\username\Desktop\reactApp>npm install -g babel
C:\Users\username\Desktop\reactApp>npm install -g babel-cli

We will use webpack bundler in these tutorial. Let's install webpack and webpack-dev-server.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save

Since we want to use React, we need to install it first. The --save command will add these packages to package.json file.

C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save

As already mentioned, we will need some babel plugins, so let's install it too.

C:\Users\username\Desktop\reactApp>npm install babel-core
C:\Users\username\Desktop\reactApp>npm install babel-loader
C:\Users\username\Desktop\reactApp>npm install babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

Create the Files

Let's create several files that we need. It can be added manually or using the command prompt.

C:\Users\username\Desktop\reactApp>touch index.html
C:\Users\username\Desktop\reactApp>touch App.jsx
C:\Users\username\Desktop\reactApp>touch main.js
C:\Users\username\Desktop\reactApp>touch webpack.config.js

Alternative way to create files that we need

C:\Users\username\Desktop\reactApp>type nul >index.html
C:\Users\username\Desktop\reactApp>type nul >App.jsx
C:\Users\username\Desktop\reactApp>type nul >main.js
C:\Users\username\Desktop\reactApp>type nul >webpack.config.js

Set Compiler, Server and Loaders

Open webpack.config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8080 port. You can choose any port you want.

And lastly, we are setting babel loaders to search for js files, and use es2015and react presets that we installed before.

webpack.config.js

var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

Open the package.json and delete "test" "echo \"Error: no test specified\" && exit 1" inside "scripts" object. We are deleting this line since we will not do any testing in this tutorial. Let's add the start command instead.

"start": "webpack-dev-server --hot"

Before the above step, it will required webpack-dev-server. To install webpack-dev-server, use the following command.

C:\Users\username\Desktop\reactApp>npm install webpack-dev-server -g

Now, we can use npm start command to start the server. --hot command will add live reload after something is changed inside our files so we don't need to refresh the browser every time we change our code.

https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

Reactjs : Html & Js structure

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Hello World</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin="anonymous">
  </head>
  <body>
    

    <div id='root'></div>
  
   
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    
 
    <script src="scripts.js" type="text/babel"></script>

    <script>
    
      const theBestString = 'Tralalala yada yada';

      ReactDOM.render(<h1>{ theBestString }</h1>, document.getElementById('root'));

    </script>
    
  </body>
</html>

React : ReactDOM

React Get Element By Id

import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
const myList = ( <ul>
<li>Mama</li>
<li>Baba</li>
</ul>);
ReactDOM.render(
myList,
document.getElementById('app'));

https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a

Add class in div at reactjs selector

import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
const myDiv = (<div className="big">I AM A BIG DIV</div>);
ReactDOM.render(myDiv, document.getElementById('app'));

ReactDom required self-closing tag if not result might be error on render

const profile = (
<div>
<h1>I AM JENKINS</h1>
<img src="images/jenkins.png" />
<article>
I LIKE TO SIT
<br/>
JENKINS IS MY NAME
<br/>
THANKS HA LOT
</article>
</div>
);

How to add pure javascript inside react jsx?
a: add curly braces

...
ReactDOM.render(<h1>{2+3}</h1>,
document.getElementById('app'));

everything inside curly braces treated as regular javascript

How to use variable for javascript inside JSX?
a: Simple as declare variable and call it using curlyBraces

...

const theBestString = 'tralalalala i am da best';
ReactDOM.render(<h1>{ theBestString }</h1>, document.getElementById('app'));

Using Variable to add image or content

const pics = {
panda: "http://bit.ly/1Tqltv5",
owl: "http://bit.ly/1XGtkM3",
owlCat: "http://bit.ly/1Upbczi"
};
const panda = (
<img
src={pics.panda}
alt="Lazy Panda" />
);
const owl = (
<img
src={pics.owl}
alt="Unimpressed Owl" />
);
const owlCat = (
<img
src={pics.owlCat}
alt="Ghastly Abomination" />
);

You can save data by declare variable and display by combine it.

const goose = 'https://s3.amazonaws.com/codecademy content/courses/React/react_photo-goose.jpg';
// Declare new variable here:
const gooseImg = ( <img src={goose} /> );
ReactDOM.render(gooseImg,
document.getElementById('app'));

id app will display an images from variable gooseImg that is an images from link inside variable goose

----------------------------------------------------------

note: ... equal to
import React from 'react';
import ReactDOM from 'react-dom';

Monday, 30 July 2018

Javascript Source

http://www.jsmadeeasy.com

Sunday, 29 July 2018

Javascript : Properties & method

Properties and Methods

The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().

length property --> If you want to know the number of elements in an array, you can use the length property.
prototype property --> If you want to add new properties and methods, you can use the prototype property.
reverse method --> You can reverse the order of items in an array using reverse method.
sort method --> You can sort the items in an array using sort method.
pop method --> You can remove the last item of an array using pop method.
shift method --> You can remove the first item of an array using shift method.
push method --> You can add a value as the last item of array.

<html>
<head>
 <title>Arrays!!!</title>
 <script type="text/javascript">
  var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
  Array.prototype.displayItems=function(){
   for (i=0;i<this.length;i++){
    document.write(this[i] + "<br />");
   }
  } 
  document.write("students array<br />");
  students.displayItems();
  document.write("<br />The number of items in students array is " + students.length + "<br />");
  document.write("<br />The SORTED students array<br />");
  students.sort();
  students.displayItems();
  document.write("<br />The REVERSED students array<br />");
  students.reverse();
  students.displayItems();
  document.write("<br />THE students array after REMOVING the LAST item<br />");
  students.pop();
  students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
  students.displayItems();
 </script>
</head>
<body>
</body>
</html>

https://www.guru99.com/learn-arrays-in-javascript.html