WBDSGNR - Real Life Implement

Saturday, 9 February 2019

JQUERY : ADD TEXT ANYWHERE IN INPUT WHEN CLICK

    jQuery("#btn").on('click', function() {
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = "stuff";
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />

JS: Append some text inside textarea

Masukkan text dalam textarea

<textarea class="form-control" id="exampleFormControlTextarea1" name="message"
ROWS=5 COLS=10 WRAP=virtual></textarea>

<button class="btn btn-success btn-sm" TYPE="button" NAME="insert" VALUE="Bold"
onClick="this.form.message.value=this.form.message.value.concat('Bold Bold');"><b>Bold</b></button>

Friday, 8 February 2019

Whatsapp: Styling Code

* for bold
_ for underline
~ cross strike
%0A newline

PHP: add word on every end of word

<?php

$text = "The quick brown fox jumped over the lazy dog.";

$newtext = wordwrap($text, 5, "%20\n");

echo $newtext;

?>

Thursday, 7 February 2019

MySql : Form Submission For Not localhost

<body>
<div id = "main" class="container card">

<?php
//trigger when post submit
if(isset($_POST["submit"])){

//make connection to db
$servername = "localhost";
$username = "yourDBuser";
$password = "YourDBpass!";
$dbname = "yourDBname";

// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);

//declare value first
$artist = $_POST['artist'];
$image = $_POST['image'];
$description = $_POST['description'];
$facebook = $_POST['facebook'];

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

//make query

$sql = "INSERT INTO publish SET
`artist`='".$artist."',
`image`='".$image."',
`facebook`='".$facebook."',
`date`=NOW()
";

// $sql = "INSERT INTO publish SET (artist, image, facebook, date)
// VALUES ('$artist', '$image', '$facebook'";

if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
}
?>

</div>
</body>

</html>

Tuesday, 5 February 2019

UI : Password Auto Complete Off Disable

<input id="passfld" type="password" autocomplete="off" />

JS: Browser not save Password Detail

<script>

                function checkBeforeLogin()

                {

                  if(document.loginForm.username.value=="")

                  {

                    alert("Enter Username");

                    document.loginForm.username.focus();

                    return false;

                  }

                  if(document.loginForm.password.value=="")

                  {

                    alert("Enter Your Password");

                    document.loginForm.password.focus();

                    return false;

                  } 

                  return true;

                }

                </script>

Thursday, 31 January 2019

PHP : Connect PHP with mysql SUCCESS

<!-- use this if want to include connection from saperate file

 <?php
 //include 'dbh.php';
 
?> -->

<!-- php below is the copy from dbh.php. Use php include if you want to saperate connector with index file -->
<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajax";

$conn = mysqli_connect($servername, $username, $password,$dbname);

?>


<!DOCTYPE html>
<html>
<head>
 <title>Jquery Ajax</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 //jquery code here
</script>
</head>
<body>


<div id="comment">
 
 <!-- coding here -->

 <?php
$sql = "SELECT * FROM comments LIMIT 3"; //change LIMIT number to show up how many data to echo
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0){
 while ($row = mysqli_fetch_assoc($result)) {
  echo "<p>";
  echo $row['author'];
  echo "<br/>";
  echo $row['message'];
  echo "<br/>";
  echo "</p>";
 }

   

  } else {
   echo "Tak ada comments!";

  }

 ?>

</div>


<button>Show comment</button>

</body>
</html>

...

change to this to display latest or newer data from mysql

$sql = "SELECT * FROM comments order by id DESC LIMIT 4"

in this case data select latest by id. If there are date row on mysql change into that string.

MYSQL : SQL command

create table comments (
id int(11) mot null auto_increment primary key,
author text not null,
message text not null
)

// this will create database row and column

insert into comments (author, message) values ('hafiz', 'The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries.
Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released.');

insert into comments (author, message) values ('muhaza', 'The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries.as they are released.');

//this how to add value as author and message

Sunday, 13 January 2019

Blogger : Basic Template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
</b:skin>
</head>

<body>

<b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
</b:section>

<b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

</body>

</html>

Monday, 7 January 2019

JQUERY : Bootstrap popup modal with timer

<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Context here</p>
</div>
</div>
</div>
</div>

// jquery

$('#overlay').modal('show');

setTimeout(function() {
$('#overlay').modal('hide');
}, 5000);

Wednesday, 2 January 2019

3) Angular : Data Binding

Thursday, 27 December 2018

2) Angular : 3 Must Component file

component need at least this 3 component file

1. customers.component.ts

import { Component, OnInit } from '@angular/core';

@Component ({

selector: 'app-customers',

templateUrl:'./customers.component.html'

})

export class CustomersComponent implements OnInit{

title: string;

people: any[];

constructor(){}

ngOnInit() {

this.title = 'Customers';

this.people = [

{ id: 1, name: 'john Doe', city: 'Phoenix', orderTotal: 9.99, customerSince: new Date(2014, 7, 10) },

{ id: 2, name: 'Jane Doe', city: 'Chandler', orderTotal: 19.99, customerSince: new Date(2017, 2, 22)},

{ id: 3, name: 'Michelle Thomas', city: 'Seattle', orderTotal: 99.99, customerSince: new Date(2002, 10, 31)},

{ id: 4, name: 'Jim Thomas', city: 'New York', orderTotal: 599.99, customerSince: new Date(2002, 10, 31)},

];

}

}

2. customers.module.ts - membolehkan selector dirender pada html

import { NgModule }      from '@angular/core';

import { CommonModule } from '@angular/common';

import { CustomersComponent }  from './customers.component';

@NgModule({

imports:      [ CommonModule ],

declarations: [ CustomersComponent ],

exports: [ CustomersComponent ] // buang bootstrap dan ganti dengan ini

})

export class CustomersModule { }

3. costumers.component.html - tempat keluar render

<h1> {{ title }}</h1>

<br>

Customers Go here

1) Angular : App Component Ts

import { Component, OnInit } from '@angular/core';

@Component({ 

  selector: 'app-root',

  template: `

    <h1>{{ title }}</h1>

  `

})

export class AppComponent implements OnInit {

  title: string;

  constructor() { }

  ngOnInit() {

    // We call a service that gets us the data

    this.title = 'Hello World';

  }

}

Friday, 30 November 2018

Halftone setup for A3

Thursday, 29 November 2018

Photoshop Select Only Black

short way: Ctrl+Alt+2 and then Ctrl+Shift+i

the long way: ctrl+click the RGB channel in the Channels panel and then go to Select->Inverse

and there are a ton of other ways as well including using the magic wand tool, quick select tool, Select->Color Range(with localized off), etc

Tuesday, 13 November 2018

APK TOOL

https://ibotpeaches.github.io/Apktool/install/

JQUERY : Lets play with variation + Object

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Famous discoveries</title>
</head>
<body>

<h1>Famous discoveries</h1>

<h2 id="math-heading">Math discoveries</h2>

<ul>
<li>323–283 BC – Euclid: wrote a series of 13 books on geometry called The Elements</li>
<li>Al-Khawarizmi (780-850): wrote the first major treatise on Algebra titled "Al-jabr wal-muqabaleh"</li>
</ul>

<h2 id="science-heading">Science discoveries</h2>
<ul>
<li>1543 – Copernicus: discovered the heliocentric model of the solar system.
</li>
<li>1672 – Sir Isaac Newton: discovers that white light is a spectrum of a mixture of distinct coloured rays.</li>
</ul>

<a href="https://en.wikipedia.org/wiki/Timeline_of_scientific_discoveries">Read about more discoveries on Wikipedia.</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

var math = $("#math-heading");
math.text(math.text() + "!! WOW!");
var science = $("#science-heading");
science.text(science.text() + " Walla!")

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

Sunday, 11 November 2018

DIVI : Search Placeholder

Tukar divi search Placeholder. Letak code ni di bahagian Integration > Head di divi option

<script>
jQuery(function($){
    $('.et-search-field').attr('placeholder', 'RECHERCHE').css('opacity','1'); 
});
</script>
<style>
.et-search-field { opacity: 0; }
</style>

Saturday, 10 November 2018

CSS : Center Everything (Image) In Center Of Pages

.centered { position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); }

Monday, 5 November 2018

Media query

/* for Big PC & Display */

@media only screen and (min-width: 1900px) {

    .tps-section {

        height: 1080px;

      }

}

/* for Laptop and PC */

@media only screen and (min-width: 1366px) and (max-width: 1900px) {

    .tps-section {

        height: 786px;

      }

}

/* for Tablet & Small Laptop */

@media only screen and (min-width: 991px) and (max-width: 1366px) {

}

/* for mobile & tablet */

@media only screen and (min-device-width : 360px) and (max-width: 991px) {

    .tps-section .tps-wrapper h1 a{

        padding-top: 25%;

        padding-left:8px;

        padding-right:8px;

        line-height: 16px;

}

.tps-section {

    height: 300px;

  }

}

/* End Mobile Query */

Tuesday, 30 October 2018

What in the world veni vidi vici

Berapa banyak telah dihapuskan
mengapa kita tak bersatu
Berapa lama hendak diagungkan
sedangkan mereka membunuh

hanyut selesa berada ditempatmu
duduk berdiam diri dari atas bangku

Telah lama kita dipalsukan
cerita yg benar ditutup
Sudah menyelinap umpama asap
racunnya telah dihidu

telah ditutup telinga mata dan hati
terikat pada istilah weni widi wiki

cuba dihitungkan harian
cuba dikira perbuatan
apa yang telah kita lakukan
selama ini...

what in the world, the money we spending..
what in the world, the life we living..
what in the world, the written we reading
what in the world what in the world?

What in the world, the tought we thingking
what in the world, the word we speaking
what in the world, the love we hating
what in the world what in the world!

Thursday, 25 October 2018

JS : Contenteditable Save data at local

 //editable cookies enable

 $(function(){
    var liveEdit = document.getElementById('live-edit');

    $(liveEdit).blur(function(){
      localStorage.setItem('liveEditData', this.innerHTML);
    });

    //when the page loads

    if ( localStorage.getItem('liveEditData')){
      liveEdit.innerHTML = localStorage.getItem('liveEditData');
    }
  });

    //end function of contenteditable

  $(function(){
    var editUser = document.getElementById('edit-user');

    $(editUser).blur(function(){
      localStorage.setItem('editUserData', this.innerHTML);
    });

    //when the page loads

    if ( localStorage.getItem('editUserData')){
      editUser.innerHTML = localStorage.getItem('editUserData');
    }
  });

      //end function of contenteditable

Thursday, 11 October 2018

JAVASCRIPT : BOOTSTRAP DROPDOWN PILL OR ACCORDION USING DROPDOWN

<div class="dropdown">
    <a class="btn btn-danger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Senarai Pegawai
    </a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <ul class="nav nav-pills flex-column list-unstyled" role="tablist">
            <li class="nav-item list-unstyled">
                <a class="nav-link active umum" data-toggle="pill" href="#semua-unit">SEMUA UNIT</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-satu">UNIT SATU</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-dua">UNIT DUA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-tiga">UNIT TIGA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-empat"> UNIT EMPAT</a>
            </li>
        </ul>
    </div>
</div>

<div style="margin-top:50px"></div>

<!-- Tab panes -->
<div class="tab-content">
    <div id="welcome" class=" tab-pane fade">

        <h1>SELAMAT DATANG KE DIREKTORI PEGAWAI</h1>

    </div>



    <div id="semua-unit" class=" tab-pane active">

        Semua unit loading...

    </div>




    <div id="unit-satu" class="tab-pane fade">

        Coming soon

    </div>

    <!-- start business data-->

    <div id="unit-dua" class="tab-pane fade">


        Coming soon

    </div>

    <div id="unit-tiga" class=" tab-pane fade">

        Coming soon

    </div>

    <div id="unit-empat" class=" tab-pane fade">

        Coming soon

    </div>
    <!--improvement tab-->
</div>
<!--tab content-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Wednesday, 3 October 2018

CHARTJS : CHANGE LABEL SIZE

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'radar',

    // The data for our dataset
    data: {
        labels: ["Entrepreneur Capability", "Business Capacity", "Product Strength", "Technological Potential", "User Performance", ],
        datasets: [{
            label: "BUSINESS HEALTH SCORE",
            backgroundColor: '#c72b34bf',
            borderColor: '#c72b34bf',
            data: [10, 20, 40, 60, 50, ],

        }]
    },

    // Configuration options go here
    options: {
        scale: {
            pointLabels: {
                fontSize: 18,
            }
        }
    }
});

Tuesday, 2 October 2018

DIVI : Message Pattern

My name is %%Name%%,
my message is %%Message%%
and email address is %%Email%%.

add %%id%% to get the input value.

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/