WBDSGNR - Real Life Implement: February 2019

Saturday, 23 February 2019

js : parse json COMPLETED

<!DOCTYPE html>

<html>

<body>

<script>



var gethttp = new XMLHttpRequest();

gethttp.onreadystatechange = function() {

  if (this.readyState == 4 && this.status == 200) {

    var load = JSON.parse(this.responseText);

    //select from json

    var x = load.nama;

    var y = load.task;

    // var y = load.pets[1].name;

    //render and to html

    document.querySelector("#nama").innerHTML = x;

    document.querySelector("#alamat").innerHTML = y;

  }

};

// gethttp.open("GET", "./numerologi/json.txt", true);

gethttp.open("GET", "seed/sprout", true);

gethttp.send();

</script>





<b id="nama"></b></br>

<b id="alamat"></b>

</body>

</html>

//htaccess for apache

RewriteEngine on
RewriteCond %{THE_REQUEST} /([^.]+)\.txt [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.txt -f
RewriteRule ^ %{REQUEST_URI}.txt [NC,L]

PHP : Security using htaccess

I would just move the includes folder out of the web-root, but if you want to block direct access to the whole includes folder, you can put a .htaccess file in that folder that contains just:

deny from all

That way you cannot open any file from that folder, but you can include them in php without any problems.

In this htaccess tutorial, we are going to show how you can prevent the direct access of file/URL of your website. Sometimes website owner doesn’t want that user can access their zip, CSS, etc file directly.

To prevent the direct access, you need to add the below script in the .htaccess file.

.htaccess

RewriteEngine on

# script to  stop direct link of zip and css file
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example[NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example.*$ [NC] 
RewriteRule \.(zip|css)$ http://www.example.com[R,L]

You can add multiple file extensions by ORing the pipe(|) symbol.

(gif|zip|png|js|css|bmp)

References

PHP : convert to json

Many web applications expect external data in JSON format, hence converting MySQL data to JSON is something that web developers encounter on a regular basis. JSON (JavaScript Object Notation) is fast becoming the most popular data format in server/browser communication. It is light weight, human readable and easy to generate and parse.

Data from MySQL database can be easily converted into JSON format using PHP. The below example uses Sakila sample database that comes with standard MySQL installation. It fetches the first 3 rows of actor table into an associative array using mysqli_fetch_assoc(). Then the array is encoded into JSON using json_encode.

<?php

// Initialize variable for database credentials
$dbhost = 'hostname';
$dbuser = 'username';
$dbpass = 'password';
$dbname = 'sakila';

//Create database connection
  $dblink = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

//Check connection was successful
  if ($dblink->connect_errno) {
     printf("Failed to connect to database");
     exit();
  }

//Fetch 3 rows from actor table
  $result = $dblink->query("SELECT * FROM actor LIMIT 3");

//Initialize array variable
  $dbdata = array();

//Fetch into associative array
  while ( $row = $result->fetch_assoc())  {
 $dbdata[]=$row;
  }

//Print array in JSON format
 echo json_encode($dbdata);
 
?>

Result:


[
 {
 "actor_id":"1",
 "first_name":"PENELOPE",
 "last_name":"GUINESS",
 "last_update":"2006-02-15 04:34:33"
 },
 { 
 "actor_id":"2",
 "first_name":"NICK",
 "last_name":"WAHLBERG",
 "last_update":"2006-02-15 04:34:33"
 },
 {
 "actor_id":"3",
 "first_name":"ED",
 "last_name":"CHASE",
 "last_update":"2006-02-15 04:34:33"
 }
]

As you can see, the result is a valid JSON. You may use this in combination with Jquery/AJAX to pass database data to a web application that expects data in JSON.

js : same concept as jquery .load

document.getElementById("demo")
.innerHTML='<object type="text/html" data="index.html" ></object>';

js if else : input

<script>

function analyzeColor3(myColor) {

 if (myColor == "Blue") {

  alert("Just like the sky!");

  }

 else if (myColor == "Red") {

  alert("Just like shiraz!");

 }

 else {

  alert("Suit yourself then...");

 }

}

</script>

<h3>Favorite Color</h3>

<label>

 <input type="radio" name="fav_color3" value="Blue" onclick="analyzeColor3(this.value);"> Blue

</label>

<label>

 <input type="radio" name="fav_color3" value="Red" onclick="analyzeColor3(this.value);"> Red

</label>

<label>

 <input type="radio" name="fav_color3" value="Green" onclick="analyzeColor3(this.value);"> Green

</label>

<label>

 <input type="radio" name="fav_color3" value="None" onclick="analyzeColor3(this.value);"> None

</label>

Sunday, 17 February 2019

Javascript : Loop Content

The for Loop
One of the most common ways to create a loop is by using the for statement
to create what is known as a for loop. A for loop allows you to repeatedly run
some code until an expression you specify returns false. That probably doesn’t
make a whole lot of sense, so to help clarify this definition, let’s look at an
example.

If we had to translate our earlier saySomething example using for, it would look
as follows:

var jumlah = 10;

function tulisSesuatu() {
document.writeln("hello!");
}

for (var i = 0; i < count; i++) {
tulisSesuatu();
}

Friday, 15 February 2019

Web Designer Information

Essential Information

Degree Level	Associate degree; bachelor's preferred
Degree Field(s)	Computer technology, website design, graphic design
License/Certification	Certificates available
Experience	Professional portfolio
Key Skills	Computer programming and graphic design; computer proficiency; ability to work on a team
Job Outlook (2014-2024)	27% growth
Median Annual Salary (2015)	$64,970 (for web developers)

Source: U.S. Bureau of Labor Statistics

A web designer develops and creates websites and associated applications. Web designers work in a variety of industries and often as independent contractors. Education requirements can vary, but web designers can get entry-level work with an associate's degree. Bachelor's degrees provide students with an expanded and advanced skill set that can lead to better job prospects or career advancement.

Job Description

A web designer creates the look, layout, and features of a website. The job involves understanding both graphic design and computer programming. Once a website is created, a designer helps with maintenance and additions to the website. They work with development teams or managers for keeping the site up-to-date and prioritizing needs, among other tasks.

The U.S. Bureau of Labor Statistics reported in 2015 that the median hourly wage for web developers, who perform the same duties as web designers, was $31.23, or $64,970 annually. The 2014-2024 projected job growth for web developers was 27%, per the BLS. According to the agency, the median income for graphic designers in 2015 was $46,900 ($22.55 hourly). The BLS projected job growth of 1% between 2014 and 2024 for this occupation.

Duties

A web designer's job duties cover all aspects of creating a website. Upon meeting with clients and assessing their needs, web designers help create and maintain the product. Their duties include, but aren't limited to, the following:

Writing and editing content
Designing webpage layout
Determining technical requirements
Updating websites
Creating back up files
Solving code problems

Requirements

According to O*Net Online in 2016, 43% of web developers held a bachelor's degree, 20% had an associate's degree, and 13% had a post-secondary certificate. Web designers need education in computer technology and website design to be competitive in the job market.

An associate's degree program related to web design, such as an Associate of Applied Science in Web Graphic Design, provides a student with a foundation in the design and technical aspects of creating a website. Students learn web design skills and build professional portfolios that highlight their skills and abilities. Common topics include:

Fundamentals of design imaging
Basic web design
Animation
Multimedia design
Content management
Editing for video and audio
Multimedia programming and technology

A bachelor's degree in multimedia or web design allows students to learn advanced skills needed for professional web design. Students develop artistic and creative abilities in addition to technical skills. Degree programs, such as a Bachelor of Science in Web Design and Interactive Media, cover:

Databases
Webpage scripting
Programming
Digital imaging
Multimedia design
Web development

Tuesday, 12 February 2019

Jquery: Popup with timer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type='text/css'>
#exepopup {
background-color: #fff;
position: fixed;
top: 30%;
z-index: 9999;
display: none;
padding: 0px;
left: 50%;
border: 5px solid rgba(82, 82, 82,
0.7);
-webkit-background-clip: padding-box;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
width: 75%;
height: 500px;
margin-left: -7%;
margin-top: 0px;
overflow: hidden;

}

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

#exepopup {
background-color: #fff;
position: fixed;
top: 30%;
z-index: 9999;
display: none;
padding: 0px;
left: 50%;
border: 5px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
width: 320px;
height: 460px;
margin-left: -248px;
margin-top: 0px;
overflow: hidden;
}
}

#exepopup span {
font-size: 20px !important;
font-weight: bold !important;
}

#exepopup h1 {
background: #6d84b4;
border: 1px solid #3b5998 !important;
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 700 ! important;
padding: 5px !important;
margin: 0 !important;
/* font-family: '"lucida grande",tahoma,verdana,arial,sans-serif !important; */
overflow: hidden !important;
}

.exepopupdata {
font-size: 12px !important;
font-weight: normal ! important;
/* height: 265px !important; */
padding: 1px !important;
background: #6d84b4 ! important;
/* border-bottom: 2px solid #ddd; */
overflow: hidden !important;
}

#exepopupfooter {
text-align: left;
background: #F2F2F2 !important;
height: 56px ! important;
padding: 10px 10px 10px 10px !important;
overflow: hidden !important;
}

#exepopupclose {
float: right;
background-color: #eee !important;
border: 1px solid #ccc !important;
color: #111 !important;
font-weight: bold !important;
padding: 5px 8px 5px 8px !important;
text-decoration: none ! important;
display: inline-block !important;
position: relative !important;
font-size: 18px !important;
margin: 1px ! important;
}

#exepopupclose:active {
top: 1px;
left: 1px;
}

#facebook_like_button_holder {
position: relative;
width: 35px;
height: 35px;
color: #fff;
background: #4267b2;
border-radius: 50%;
}

#facebook_like_button_holder iframe {
position: absolute;
top: 0px;
height: 35px !important;
width: 35px !important;
}

#fake_facebook_button {
pointer-events: none;
position: absolute;
width: 36px;
height: 36px;
left: 0;
top: 0;
}

/* for Tablet & Small Laptop */
</style>
<script type='text/javascript'>
jQuery(document).ready(function () {
function exepopupfunc() {
var sec = 6//popup timer
var timer = setInterval(function () {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
}, 1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop() + 50;
jQuery("#exepopup").css({ "top": exepopuptop });
}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 268;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({ opacity: "1", left: "0", left: exepopupleft }, 0).show();
jQuery("#exepopupclose").click(function () {
jQuery("#exepopup").animate({ opacity: "0", left: "-5000000" }, 1000).show();
});
});
</script>

<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="exepopup">
<h1>Sponsored By : ( Iklan Anda Disini )
<div class="exepopupdata" style="float:right;">

<div id="facebook_like_button_holder">

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsuperpantas&width=96&layout=button&action=like&size=small&show_faces=true&share=true&height=65&appId=1275927729128671" width="51" height="65" style="border:none;overflow:hidden;border-radius:20%;margin-top:7px" scrolling="no"
frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

<div id="fake_facebook_button">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrV3yrE9B6ttBy9kzzGwYvfubb0XTC8Qux_u7U_H8ZTO8KY9T5k2QJ5bUtm9wfmdWyMht32tT21CS7jcxGmjjPMIYl_YPy5y41wvuwpFVSl0OnD_lxCxTU6C9QtnwC3sTHA1slvCOEk9W4/s400/close-2.png" />
</div>

</div>

</div>

</h1>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHBA3gN3vc1gF4evilDU5_cUwhnduc-xyxShTWSh2cUXEGfPv6VIrIsb6Uhs93eA-SzRLpTjd68GfN4y63SnlPI6irU3YDjJO5_ts5LN6vOLl16nvVxzuYrXQgEylA6OAEeLmUxsTZJjQ/s1600/mencanak.png"
width="100%" />

<div id="exepopupfooter">like Superpantas Page atau tunggu sebentar <span>10</span> Seconds...!!!

</div>
</div>

PHP : Prevent Direct Url Open

<?php
/* at the top of 'check.php' */
if ( $_SERVER['REQUEST_METHOD']=='GET' && realpath(__FILE__) == realpath( $_SERVER['SCRIPT_FILENAME'] ) ) {
/*
Up to you which header to send, some prefer 404 even if
the files does exist for security
*/
header( 'HTTP/1.0 403 Forbidden', TRUE, 403 );

/* choose the appropriate page to redirect users */
die( header( 'location: /error.php' ) );

}
?>

<?php

if (!isset($_SERVER['HTTP_REFERER'])){ 

    echo "uh?"; } 

    else { 

}

?>

Monday, 11 February 2019

Js: Load random url

<script type="text/javascript">
var pages = [
"./room1",
"./room2",
"./room3"
];

function randomPage() {
return pages[Math.round(Math.random() * (pages.length - 1))];
}

location.href= randomPage();
</script>

PHP : Randomly open list of url

<?php

/**

 * Created by PhpStorm.

 * User: Azathoth

 * Date: 29. 3. 2016

 * Time: 14:54

 */

$addresses = [

        './room1',

        './room2',

        './room3',

        './room2',

        './room3',

        './room1'

];

$size = count($addresses);

$randomIndex = rand(0, $size - 1);

$randomUrl = $addresses[$randomIndex];

header('Location: ' . $randomUrl, true, 303);

?>

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>