LAMPIRANrepository.unika.ac.id/21178/8/14.N2.0017 BONIFACIUS C. I... · 2020-03-11 · 55 (lanjutan) padding: 10px; text-align: center; text-decoration: none; display: inline-block;

45

LAMPIRAN

Lampiran 1

Kode Penambahan Tombol Roulette dan Penukaran Badge pada Home

<?php

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License

// along with Moodle. If not, see <http://www.gnu.org/licenses/>.

/**

* My Moodle -- a user's personal dashboard

*

* - each user can currently have their own page (cloned from system and then customised)

* - only the user can see their own dashboard

* - users can add any blocks they want

* - the administrators can define a default site dashboard for users who have

* not created their own dashboard

*

* This script implements the user's view of the dashboard, and allows editing

* of the dashboard.

46

(lanjutan)

*

* @package moodlecore

* @subpackage my

* @copyright 2010 Remote-Learner.net

* @author Hubert Chathi <[email protected]>

* @author Olav Jordan <[email protected]>

* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

*/

require_once(__DIR__ . '/../config.php');

require_once($CFG->dirroot . '/my/lib.php');

redirect_if_major_upgrade_required();

// TODO Add sesskey check to edit

$edit = optional_param('edit', null, PARAM_BOOL); // Turn editing on and off

$reset = optional_param('reset', null, PARAM_BOOL);

require_login();

$hassiteconfig = has_capability('moodle/site:config', context_system::instance());

if ($hassiteconfig && moodle_needs_upgrading()) {

redirect(new moodle_url('/admin/index.php'));

}

$strmymoodle = get_string('myhome');

if (isguestuser()) { // Force them to see system default, no editing allowed

// If guests are not allowed my moodle, send them to front page.

47

(lanjutan)

if (empty($CFG->allowguestmymoodle)) {

redirect(new moodle_url('/', array('redirect' => 0)));

}

$userid = null;

$USER->editing = $edit = 0; // Just in case

$context = context_system::instance();

$PAGE->set_blocks_editing_capability('moodle/my:configsyspages'); // unlikely :)

$header = "$SITE->shortname: $strmymoodle (GUEST)";

$pagetitle = $header;

} else { // We are trying to view or edit our own My Moodle page

$userid = $USER->id; // Owner of the page

$context = context_user::instance($USER->id);

$PAGE->set_blocks_editing_capability('moodle/my:manageblocks');

$header = fullname($USER);

$pagetitle = $strmymoodle;

}

// Get the My Moodle page info. Should always return something unless the database is broken.

if (!$currentpage = my_get_page($userid, MY_PAGE_PRIVATE)) {

print_error('mymoodlesetup');

}

// Start setting up the page

$params = array();

$PAGE->set_context($context);

$PAGE->set_url('/my/index.php', $params);

$PAGE->set_pagelayout('mydashboard');

48

(lanjutan)

$PAGE->set_pagetype('my-index');

$PAGE->blocks->add_region('content');

$PAGE->set_subpage($currentpage->id);

$PAGE->set_title($pagetitle);

$PAGE->set_heading($header);

if (!isguestuser()) { // Skip default home page for guests

if (get_home_page() != HOMEPAGE_MY) {

if (optional_param('setdefaulthome', false, PARAM_BOOL)) {

set_user_preference('user_home_page_preference', HOMEPAGE_MY);

} else if (!empty($CFG->defaulthomepage) && $CFG->defaulthomepage == HOMEPAGE_USER) {

$frontpagenode = $PAGE->settingsnav->add(get_string('frontpagesettings'), null,

navigation_node::TYPE_SETTING, null);

$frontpagenode->force_open();

$frontpagenode->add(get_string('makethismyhome'), new moodle_url('/my/', array('setdefaulthome'

=> true)),

navigation_node::TYPE_SETTING);

}

}

}

// Toggle the editing state and switches

if (empty($CFG->forcedefaultmymoodle) && $PAGE->user_allowed_editing()) {

if ($reset !== null) {

if (!is_null($userid)) {

require_sesskey();

if (!$currentpage = my_reset_page($userid, MY_PAGE_PRIVATE)) {

print_error('reseterror', 'my');

}

49

(lanjutan)

redirect(new moodle_url('/my'));

}

} else if ($edit !== null) { // Editing state was specified

$USER->editing = $edit; // Change editing state

} else { // Editing state is in session

if ($currentpage->userid) { // It's a page we can edit, so load from session

if (!empty($USER->editing)) {

$edit = 1;

} else {

$edit = 0;

}

} else {

// For the page to display properly with the user context header the page blocks need to

// be copied over to the user context.

if (!$currentpage = my_copy_page($USER->id, MY_PAGE_PRIVATE)) {

print_error('mymoodlesetup');

}

$context = context_user::instance($USER->id);

$PAGE->set_context($context);

$PAGE->set_subpage($currentpage->id);

// It's a system page and they are not allowed to edit system pages

$USER->editing = $edit = 0; // Disable editing completely, just to be safe

}

}

// Add button for editing page

$params = array('edit' => !$edit);

$resetbutton = '';

50

(lanjutan)

$resetstring = get_string('resetpage', 'my');

$reseturl = new moodle_url("$CFG->wwwroot/my/index.php", array('edit' => 1, 'reset' => 1));

if (!$currentpage->userid) {

// viewing a system page -- let the user customise it

$editstring = get_string('updatemymoodleon');

$params['edit'] = 1;

} else if (empty($edit)) {

$editstring = get_string('updatemymoodleon');

} else {

$editstring = get_string('updatemymoodleoff');

$resetbutton = $OUTPUT->single_button($reseturl, $resetstring);

}

$url = new moodle_url("$CFG->wwwroot/my/index.php", $params);

$button = $OUTPUT->single_button($url, $editstring);

$PAGE->set_button($resetbutton . $button);

} else {

$USER->editing = $edit = 0;

}

echo $OUTPUT->header();

echo $OUTPUT->custom_block_region('content');

echo $OUTPUT->footer();

// Trigger dashboard has been viewed event.

51

(lanjutan)

$eventparams = array('context' => $context);

$event = \core\event\dashboard_viewed::create($eventparams);

$event->trigger();

$con = mysqli_connect("localhost:3307","bn_moodle","16a0e8c071","bitnami_moodle");

// Check connection

if (mysqli_connect_errno())

{

echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

$userid = $USER->id;

$sql="SELECT mdl_role_assignments.userid, mdl_role_assignments.roleid, mdl_role.archetype FROM

mdl_role_assignments, mdl_role WHERE mdl_role_assignments.userid = '$userid' AND

mdl_role_assignments.roleid = mdl_role.id AND mdl_role.archetype = 'student'";

$result=mysqli_query($con, $sql);

//$total=mysqli_num_rows($result);

echo "<script type='text/javascript'>

function roulette(){

document.formroulette.target = 'myActionWin';

window.open('','myActionWin','width=750,height=650,toolbar=0');

document.formroulette.submit();

}

</script>";

echo "<form action='roulette.php' class='button' id='roulettebutton' name='formroulette' method='post'

target='_blank'>";

echo "<input type='hidden' name='id' id='id' value='".$USER->id."'>";

52

(lanjutan)

echo "<input type='button' onclick='roulette()' value='Roulette !'>";

echo "</form>";

echo "<script type='text/javascript'>

function badgelist(){

document.formbadgelist.target = 'myActionWin';

window.open('','myActionWin','width=750,height=650,toolbar=0');

document.formbadgelist.submit();

}

</script>";

echo "<form action='badgelist.php' class='button' id='rewardbutton' name='formbadgelist' method='post'

target='_blank'>";

echo "<input type='hidden' name='id' id='id' value='".$USER->id."'>";

echo "<input type='button' onclick='badgelist()' value='Reward Exchange'>";

echo "</form>";

//echo "total=" .$total."<br>";

//var_dump($row);

//echo $userid;

//var_dump($_SESSION['USER']);

//button to call roulette.html

// echo "<center><br/>";

// echo '<input type="button" style="width:150px;height:30px" value="Roulette!"

onclick="window.location=\'roulette.php?id='.$USER->id.'\'"/>';

// echo '<br></center>';

53

Lampiran 2

Kode halaman/jendela roulette (roulette.php)

<html>

<head>

<style>

#head1{

font-family: "Times New Roman", Times, serif;

text-align: center;

position: absolute;

top: 0;

left: 200px;

}

#head2{

font-family: Arial, Helvetica, sans-serif;

text-align: center;

position: absolute;

top: 25px;

left: 90px;

}

#show{

position: absolute;

top: 75px;

left: 105px;

}

#canvas{

position: absolute;

54

(lanjutan)

top: 110px;

left: 85px;

}

#spin{

z-index:10;

position: absolute;

top: 155px;

left: 281px;

}

#spin2{

z-index:10;

position: absolute;

top: 260px;

left: 30px;

}

#close{

z-index:10;

position: absolute;

top: 520px;

left: 255px;

}

.button {

background-color: #008CBA; /* Blue */

border: none;

color: white;

55

(lanjutan)

padding: 10px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 20px;

margin: 4px 2px;

cursor: pointer;

font-weight: 600;

}

// canvas {

// padding-left: 0;

// padding-right: 0;

// margin-left: auto;

// margin-right: auto;

// display: block;

// width: 800px;

// }

.button1 {border-radius: 30px;}

</style>

</head>

<body>

<h2 id="head1" align="center">GRADE ROULETTE!</h2>

<h3 id="head2" align="center">Now you can exchange your point for amazing prize!</h3>

<input align="center" type="button" value="Spin 20P" class="button button1" id='spin'

onclick="SubtractStatus1()" /><br></br>

56

(lanjutan)



<canvas id="canvas" width="500" height="500"></canvas>

<script src="roulette.js"></script>

<p id="status"></p>

<div id="show">

<?php

$host = "localhost";

$port = 81;

$con=mysqli_connect("localhost:3307","bn_moodle","16a0e8c071","bitnami_moodle");

// Check connection


{


}

// print_r($_SESSION,TRUE);

// var_dump($_GET);

// return 0;

$result = mysqli_query($con,"SELECT * FROM modtbl_scoreboard WHERE user_id =

".$_POST['id'].";");

57

(lanjutan)

echo "<table style= 'text-align:center;' border='1'>

<tr>

<th>User ID</th>

<th>Email</th>

<th>Your Point</th>

<th>Your Roulette Token</th>

</tr>";

while($row = mysqli_fetch_array($result))

{

echo "<tr>";

echo "<td>" . $row['user_id'] . "</td>";

echo "<td>" . $row['email'] . "</td>";

echo "<td>" . $row['total_point'] . "</td>";

$totalpoint = $row['total_point'];

echo "<td>" . $row['roulette_token'] . "</td>";

echo "</tr>";

echo "</table>";

}

mysqli_close($con);

// echo "<div id='point'>" . $totalpoint . "</div>";

// "<script>check();</script>";

echo "<input type='hidden' id='point' value='$totalpoint' />";

?>

</div>

</body>

58

(lanjutan)

<left><br/>

<input id="close" type="button" style="width:150px;height:30px" value="Close"

onclick="window.close();"/>

<br></left>

</html>

Lampiran 3

Kode javascript pengolahan data di halaman roulette

var options = ["100", "0", "20", "2", "30", "45", "0", "25", "7", "5", "9", "10", "50", "45", "0", "2", "45",

"0", "75", "0", "20", "2", "7", "6", "8", "0", "35", "0"];

var startAngle = 0;

var arc = Math.PI / (options.length / 2);

var spinTimeout = null;

var spinArcStart = 10;

var spinTime = 0;

var spinTimeTotal = 0;

var ctx;

document.getElementById("spin").addEventListener("click", spin);

//document.getElementById("spin2").addEventListener("click", spin2);

function byte2Hex(n) {

var nybHexString = "0123456789ABCDEF";

return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);

}

59

function RGB2Color(r,g,b) {

(lanjutan)

return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);

}

function getColor(item, maxitem) {

var phase = 0;

var center = 128;

var width = 127;

var frequency = Math.PI*2/maxitem;

red = Math.sin(frequency*item+2+phase) * width + center;

green = Math.sin(frequency*item+0+phase) * width + center;

blue = Math.sin(frequency*item+4+phase) * width + center;

return RGB2Color(red,green,blue);

}

function drawRouletteWheel() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var outsideRadius = 150;

var textRadius = 120;

var insideRadius = 90;

ctx = canvas.getContext("2d");

ctx.clearRect(0,0,500,500);

ctx.strokeStyle = "black";

ctx.lineWidth = 2;

ctx.font = 'bold 12px Helvetica, Arial';

60

(lanjutan)

for(var i = 0; i < options.length; i++) {

var angle = startAngle + i * arc;

//ctx.fillStyle = colors[i];

ctx.fillStyle = getColor(i, options.length);

// if(var options == ["ZONK!"]){

// ctx.fillStyle = "#FF0000";

// }

ctx.beginPath();

ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);

ctx.arc(250, 250, insideRadius, angle + arc, angle, true);

ctx.stroke();

ctx.fill();

ctx.save();

ctx.shadowOffsetX = -1;

ctx.shadowOffsetY = -1;

ctx.shadowBlur = 0;

ctx.shadowColor = "rgb(220,220,220)";

ctx.fillStyle = "black";

ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,

250 + Math.sin(angle + arc / 2) * textRadius);

ctx.rotate(angle + arc / 2 + Math.PI / 2);

var text = options[i];

ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

ctx.restore();

}

61

//Arrow

(lanjutan)


ctx.beginPath();

ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));

ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));

ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));



ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));


ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));

ctx.fill();

}

}

function spin() {

if(check1() == true){

document.getElementById("spin").disabled = true;

document.getElementById("spin").style.backgroundColor = "grey"; /*grey*/

//document.getElementById("spin2").disabled = true;

//document.getElementById("spin2").style.backgroundColor = "grey"; /*grey*/

spinAngleStart = Math.random() * 10 + 10;

spinTime = 0;

spinTimeTotal = Math.random() * 3 + 4 * 1000;

rotateWheel();

62

}

(lanjutan)

}

/* function spin2() {



document.getElementById("spin").style.backgroundColor = "grey"; /*grey*/ /*

document.getElementById("spin2").disabled = true;

document.getElementById("spin2").style.backgroundColor = "grey"; /*grey*/ /*


spinTime = 0;


rotateWheel();

}

}

*/

function rotateWheel() {

spinTime += 30;

if(spinTime >= spinTimeTotal) {

stopRotateWheel();

return;

}

63

var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);

(lanjutan)

startAngle += (spinAngle * Math.PI / 180);

drawRouletteWheel();

spinTimeout = setTimeout('rotateWheel()', 30);

}

function stopRotateWheel() {

clearTimeout(spinTimeout);

var degrees = startAngle * 180 / Math.PI + 90;

var arcd = arc * 180 / Math.PI;

var index = Math.floor((360 - degrees % 360) / arcd);

ctx.save();

// ctx.font = '20px Georgia';

// ctx.fillText("You Got", 10, 50);

document.getElementById("spin").disabled = false;

document.getElementById("spin").style.backgroundColor = "#4CAF50"; /*grey*/

/* document.getElementById("spin2").disabled = false;

document.getElementById("spin2").style.backgroundColor = "#4CAF50"; /*grey*/

// ajax pakai get utk kirim text ke server

// document.getElementById("spin").style.display = "none";

// document.getElementById("spin2").style.display = "none";


var text = options[index]

ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);

SendRouletteVal();

64

(lanjutan)

ctx.restore();

}

function easeOut(t, b, c, d) {

var ts = (t/=d)*t;

var tc = ts*t;

return b+c*(tc + -3*ts + 3*t);

}

function SendRouletteVal(){




var text = options[index];

var xhttp = new XMLHttpRequest();

var url = "terima.php?point=" + text + "";

// var data = "id=3";

// url += '?' + data; //xx += yy itu sama dengan xx = xx + yy

xhttp.onreadystatechange = function() {

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

document.getElementById("show").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", url, true);

xhttp.send();

65

}

(lanjutan)

function SubtractStatus1() {

// alert(check());


document.getElementById("status").innerHTML = "[Grade -20P.]";


var url = "subtractgrade.php?subtract=20" ;





}

};


xhttp.send();

}else{

alert("Insufficient point.");

}

}

/* function SubtractStatus2() {

66

(lanjutan)


document.getElementById("status").innerHTML = "[Grade -35P.]";


var url = "subtractgrade.php?subtract=35" ;





}

};


xhttp.send();

}else{


}

} */

function check1(){

var poin = parseInt(document.getElementById("point").value);

// alert (poin > 20);

if(poin < 20){

return false;

}else{

return true;

}

67

(lanjutan)

}

function check2(){



if(poin < 50){

return false;

}else{

return true;

}

}


Lampiran 4

Kode pengolahan nilai dari variable tertentu menggunakan metode AJAX (terima.php)

<?php

require_once(__DIR__ . '/../config.php');

require_once($CFG->dirroot . '/my/lib.php');


// Check connection


{


68

}

(lanjutan)

if($_GET['point'] == "0"){

echo "Better luck next time!";

$result = mysqli_query($con,"UPDATE modtbl_scoreboard SET roulette_token =

roulette_token + '".$_GET['point']."' WHERE user_id = '".$USER->id."';");

$show = mysqli_query($con,"SELECT * FROM modtbl_scoreboard WHERE user_id =

".$USER->id.";");


<tr>

<th>User ID</th>

<th>Email</th>

<th>Your Point</th>


</tr>";

while($row = mysqli_fetch_array($show))

{

echo "<tr>";






echo "</tr>";

echo "</table>";

}

69

mysqli_close($con);

(lanjutan)

}elseif($_GET['point'] == "100"){

echo "JACKPOT! You are very lucky! You got ".$_GET['point']." Roulette Point !!";




".$USER->id.";");


<tr>

<th>User ID</th>

<th>Email</th>

<th>Your Point</th>


</tr>";


{

echo "<tr>";






echo "</tr>";

echo "</table>";

}

mysqli_close($con);

70

(lanjutan)

}elseif($_GET['point'] == "abort"){

echo "<p>Point subtraction aborted. Roulette token remains unchanged. </p> Earn good grades to

earn more points.";


".$USER->id.";");


<tr>

<th>User ID</th>

<th>Email</th>

<th>Your Point</th>


</tr>";


{

echo "<tr>";






echo "</tr>";

echo "</table>";

}

mysqli_close($con);

}else{

71

echo "Congratulations! You got ".$_GET['point']." Roulette Point !!";

(lanjutan)




".$USER->id.";");


<tr>

<th>User ID</th>

<th>Email</th>

<th>Your Point</th>


</tr>";


{

echo "<tr>";






echo "</tr>";

echo "</table>";

}

mysqli_close($con);

}


72

?>

Lampiran 5

Kode mengirimkan nilai variable menggunakan metode AJAX (kirim.php)

<!DOCTYPE html>

<html>

<body>

<div id="demo">

<h2>The XMLHttpRequest Object</h2>

<button type="button"

onclick="loadDoc('terima.php?id=1', myFunction)">Change Content

</button>

</div>

<script>

function loadDoc(url, cFunction) {

var xhttp;

xhttp=new XMLHttpRequest();



cFunction(this);

}

};


xhttp.send();

}

function myFunction(xhttp) {

73

(lanjutan)

document.getElementById("demo").innerHTML =

xhttp.responseText;

}

</script>

</body>

</html>

Lampiran 6

Kode pengoperasian pengurangan nilai mahasiswa

<!DOCTYPE html>

<html>

<body>

<div id="demo">

<h2>The XMLHttpRequest Object</h2>

<button type="button"

onclick="loadDoc('terima.php?id=1', myFunction)">Change Content

</button>

</div>

<script>

function loadDoc(url, cFunction) {

var xhttp;

xhttp=new XMLHttpRequest();



cFunction(this);

}

74

(lanjutan)

};


xhttp.send();

}

function myFunction(xhttp) {

document.getElementById("demo").innerHTML =

xhttp.responseText;

}

</script>

</body>

</html>

Lampiran 7

Kode halaman penukaran badge

<html>

<head>

<style>

#head1{

font-family: "Times New Roman", Times, serif;

text-align: center;

position: absolute;

top: 0;

left: 200px;

}

#head2{


text-align: center;

position: absolute;

top: 25px;

75

(lanjutan)

left: 50px;

}

#head3{


text-align: center;

position: absolute;

top: 150px;

left: 50px;

}

#show{

position: absolute;

top: 75px;

left: 20px;

}

/* #label1{

z-index:10;

position: absolute;

top: 150px;

left: 30px;

}

#label2{

z-index:10;

position: absolute;

top: 150px;

left: 150px;

}

76

(lanjutan)

#label3{

z-index:10;

position: absolute;

top: 150px;

left: 270px;

}

#label4{

z-index:10;

position: absolute;

top: 150px;

left: 390px;

} */

#radiobtn{

z-index:10;

position: absolute;

top: 200px;

left: 30px;

padding: 20px;

}

/* HIDE RADIO */

[type=radio] {

position: absolute;

opacity: 0;

width: 0;

height: 0;

}

/* IMAGE STYLES */

77

(lanjutan)

[type=radio] + img {

cursor: pointer;

}

/* CHECKED STYLES */

[type=radio]:checked + img {

outline: 2px solid #f00;

}

#close{

z-index:10;

position: absolute;

top: 400px;

left: 30px;

}

.image {

position: float;

top: 200px;

}

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 10px;

margin: 4px 2px;

78

(lanjutan)

cursor: pointer;

font-weight: 600;

}

#select{

z-index:10;

position: absolute;

top: 110px;

left: 120px;

}

// canvas {

// padding-left: 0;

// padding-right: 0;

// margin-left: auto;

// margin-right: auto;

// display: block;

// width: 800px;

// }

.button1 {border-radius: 15px;}

</style>

</head>

<body>

<h2 id="head1" align="center">Exchange Lot</h2>

<h3 id="head2" align="center">Exchange your hard-earned points to prestigious badge!</h3>







<form action="savereward.php" method="POST" id="head3">

<?php


$port = 81;


// Check connection


{


}

$sql="SELECT * FROM modtbl_badgelist WHERE user_id = ".$_POST['id']." AND badge

= 10";

$result2 = mysqli_query($con,$sql);

if ($row = mysqli_fetch_assoc($result2)) {

80

(lanjutan)

}else{

?>

<label>

<input type="radio" name="badge" value="10" checked>

<img src="exported image/medallion1.png" style="width:100px;height:100px;" id="label1">

</label>

<?php

}

$sql="SELECT * FROM modtbl_badgelist WHERE user_id = ".$_POST['id']." AND badge = 20";



}else{

?>

<label>

<input type="radio" name="badge" value="20">

<img src="exported image/medallion3.png" style="width:100px;height:100px;" id="label2">

</label>

<?php

}




}else{

?>

<label>


81

(lanjutan)

<img src="exported image/badge5.png" style="width:100px;height:100px;" id="label3">

</label>

<?php

}




}else{

?>

<label>


<img src="exported image/badge1.png" style="width:100px;height:100px;" id="label4">

</label>

<br>

<input id="select" type="submit" style="width:150px;height:30px" value="Select"/>

</br>

</form>

<?php

}

?>



<p id="status"></p>

<div id="show">

82

(lanjutan)

<?php

/* function SendBadgeVal(){






var url = "terima.php?point=" + text + ""; */



/* xhttp.onreadystatechange = function() {



}

};


xhttp.send();

} */


$port = 81;


// Check connection

83

(lanjutan)


{


}

// print_r($_SESSION,TRUE);

// var_dump($_GET);

// return 0;

$result = mysqli_query($con,"SELECT * FROM modtbl_scoreboard WHERE user_id =

".$_POST['id'].";");


<tr>

<th>User ID</th>

<th>Email</th>

<th>Your Point</th>


</tr>";

while($row = mysqli_fetch_array($result))

{

echo "<tr>";






$roulette_token = $row['roulette_token'];

echo "</tr>";

echo "</table>";

84

(lanjutan)

}

mysqli_close($con);

// echo "<div id='point'>" . $totalpoint . "</div>";

// "<script>check();</script>";


if($roulette_token < 10){

echo "<script>

alert (\"Insufficient Roulette Token\");

window.open('', '_self', '');

window.close();

</script>";

}

?>

</div>

</body>

<left><br/>

<input id="close" type="button" style="width:150px;height:30px" value="Close"

onclick="window.close();"/>

<br></left>

</html>

Lampiran 8

Kode javascript canvas dan animasi halaman penukaran badge

/* var options = ["100", "0", "20", "2", "30", "45", "0", "25", "7", "5", "9", "10", "50", "45", "0", "2", "45",

"0", "75", "0", "20", "2", "7", "6", "8", "0", "35", "0"];

85

(lanjutan)

var startAngle = 0;

var arc = Math.PI / (options.length / 2);

var spinTimeout = null;

var spinArcStart = 10;

var spinTime = 0;

var spinTimeTotal = 0;

var ctx;

document.getElementById("spin").addEventListener("click", spin);

document.getElementById("spin2").addEventListener("click", spin2);

function byte2Hex(n) {

var nybHexString = "0123456789ABCDEF";

return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);

}

function RGB2Color(r,g,b) {

return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);

}

function getColor(item, maxitem) {

var phase = 0;

var center = 128;

var width = 127;

var frequency = Math.PI*2/maxitem;

red = Math.sin(frequency*item+2+phase) * width + center;

green = Math.sin(frequency*item+0+phase) * width + center;

86

(lanjutan)

blue = Math.sin(frequency*item+4+phase) * width + center;

return RGB2Color(red,green,blue);

}

function drawRouletteWheel() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var outsideRadius = 150;

var textRadius = 120;

var insideRadius = 90;

ctx = canvas.getContext("2d");

ctx.clearRect(0,0,500,500);

ctx.strokeStyle = "black";

ctx.lineWidth = 2;


for(var i = 0; i < options.length; i++) {

var angle = startAngle + i * arc;

//ctx.fillStyle = colors[i];

ctx.fillStyle = getColor(i, options.length);

// if(var options == ["ZONK!"]){

// ctx.fillStyle = "#FF0000";

// }

ctx.beginPath();

ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);

87

(lanjtan)

ctx.arc(250, 250, insideRadius, angle + arc, angle, true);

ctx.stroke();

ctx.fill();

ctx.save();

ctx.shadowOffsetX = -1;

ctx.shadowOffsetY = -1;

ctx.shadowBlur = 0;

ctx.shadowColor = "rgb(220,220,220)";


ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,

250 + Math.sin(angle + arc / 2) * textRadius);

ctx.rotate(angle + arc / 2 + Math.PI / 2);

var text = options[i];

ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

ctx.restore();

}

//Arrow


ctx.beginPath();

ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));

ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));






ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));

ctx.fill();

}

88

(lanjutan)

}

function spin() {



document.getElementById("spin").style.backgroundColor = "grey"; /*grey


document.getElementById("spin2").style.backgroundColor = "grey"; /*grey


spinTime = 0;


rotateWheel();

}

}

function spin2() {



document.getElementById("spin").style.backgroundColor = "grey"; /*grey


document.getElementById("spin2").style.backgroundColor = "grey"; /*grey

89

(lanjutan)


spinTime = 0;


rotateWheel();

}

}

function rotateWheel() {

spinTime += 30;

if(spinTime >= spinTimeTotal) {

stopRotateWheel();

return;

}

var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);

startAngle += (spinAngle * Math.PI / 180);


spinTimeout = setTimeout('rotateWheel()', 30);

}

function stopRotateWheel() {

clearTimeout(spinTimeout);




ctx.save();

// ctx.font = '20px Georgia';

90

(lanjutan)

// ctx.fillText("You Got", 10, 50);

document.getElementById("spin").disabled = false;

document.getElementById("spin").style.backgroundColor = "#4CAF50"; /*grey

document.getElementById("spin2").disabled = false;

document.getElementById("spin2").style.backgroundColor = "#4CAF50"; /*grey

// ajax pakai get utk kirim text ke server

// document.getElementById("spin").style.display = "none";

// document.getElementById("spin2").style.display = "none";


var text = options[index]

ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);

SendRouletteVal();

ctx.restore();

}

function easeOut(t, b, c, d) {

var ts = (t/=d)*t;

var tc = ts*t;

return b+c*(tc + -3*ts + 3*t);

}

function SendRouletteVal(){



91

(lanjutan)




var url = "terima.php?point=" + text + "";






}

};


xhttp.send();

} */

function SubtractToken10() {

// alert(check());


document.getElementById("status").innerHTML = "[Roulette Token -10.]";


var url = "subtracttoken.php?subtract=10" ;



92

(lampiran)



}

};


xhttp.send();

}else{


}

}


// alert(check());









93

(lanjutan)

}

};


xhttp.send();

}else{


}

}


// alert(check());









}

};

94

(lanjutan)


xhttp.send();

}else{


}

}


// alert(check());









}

};


xhttp.send();

95

(lanjutan)

}else{


}

}

/*

function SubtractStatus2() {









}

};


xhttp.send();

}else{


}

}

/*

function check1(){

96

(lanjutan)



if(poin < 20){

return false;

}else{

return true;

}

}

function check2(){



if(poin < 50){

return false;

}else{

return true;

}

}


*/

Submission author:14n20017 BONIFACIUS C. I. SARUMPAET

Check ID:13798496

Check date:31.10.2019 03:11:11 GMT+0

Check type:Doc vs Internet + Library

Report date:31.10.2019 03:14:16 GMT+0

User ID:30347

File name: 14.n2.0017_Bonifacius Sarumpaet.docx

File ID: 18042482 Page count: 12 Word count: 3303 Сharacter count: 25125 File size: 41.49 KB

5% MatchesHighest match: 2.69% with source http://ojs.unm.ac.id/Insani/article/download/4493/2583

...............................................................................................................................................................................................................................................................................................................Page 14

...............................................................................................................................................................................................................................................................................................................Page 14

3.33% Quotes

...............................................................................................................................................................................................................................................................................................................Page 15

0% Exclusions

Replacement

4.54% Internet Matches 49

1.09% Library matches 21

Quotes 4

No references found

No exclusions found

No replaced characters found

https://unicheck.com

Documents

LAMPIRANrepository.unika.ac.id/21178/8/14.N2.0017 BONIFACIUS C. I... · 2020-03-11 · 55 (lanjutan) padding: 10px; text-align: center; text-decoration: none; display: inline-block;