UTS

PEMROGRAMAN MULTIMEDIA
Pengenalan Adat dan Budaya Indonesia

Oleh :
M. Dimas Ali Furqon 120411100085
Arif Rahman Zein 120411100090
Yanuar Aliffio 130411100006

Dosen Pengampu :
Cucun Very Angkoso, S.T, M.T.

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
2017
 Media Pembelajaran
Pengenalan Adat Budaya Indonesia
Tools : Construct 2

A. Rincian Project :
Membuat media pembelajaran dengan tema terpilih(Adat Budaya
Indonesia). Dengan ketentuan sebagai berikut :
1. Dibuat dengan menggunakan aplikasi Construct 2.
2. Minimal 4 materi dimana setiap materi berisi 5 sub materi.
3. Anggota kelompok maksimal 3 orang.
4. Terdapat progress belajar masing-masing user(nilai progress belajar
disimpan dan di load dari data mysql web online).
5. Terdapat evaluasi bisa berupa game atau soal.
6. Terdapat tabel yang berisi data nilai per materi dan evaluasi dari setiap
user.

B. Implementasi :
Pada project kali ini dipilih tema Adat dan Budaya Indonesia dengan
membuat 4 materi yaitu pakaian adat(M1), senjata tradisional(M2), alat
musik tradisional(M3), dan rumah adat(M4). Setiap materi tersebut memiliki
32-34 sub materi yang disuaikan dari adat dari setiap provinsi di Indonesia.
Berikut langkah-langkahnya :

1. Buka aplikasi construct 2.

2. Buat file/ project baru. Pilih File New New Empty Project.
3. Ubah nama layout 1 menjadi Utama dan event sheet 1 menjadi
eUtama.
4. Ubah ukuran margin layout Utama menjadi 854x480.
5. Desain layout Utama menjadi seperti dibawah ini :
 Type : Sprite
Type : Tiled Opacity : 85
Background

Type : Text
Font : Comic
Sans MS

Type : Sprite
Opacity : 85

6. Untuk Event sheet eUtama seperti ini :

7. Berikutnya membuat layout Login dan event sheet eLogin.

Nama layout : Login

Event Sheet : eLogin
8. Desain layout Login seperti dibawah ini :

Sprite
Type : Text
Font : Comic
Sans MS
TextBox
Name :
userLogin
dan
passLogin
Button
Name : okLogin
Text : Login

9. Untuk event sheet eLogin seperti ini :

10. Berikutnya membuat layout Register dan event sheet eRegister.

Tahapan untuk membuat layout baru sama seperti no. 7.
11. Desain layout Register seperti gambar dibawah ini :
 Sprite

Type : Text
Font : Comic
Sans MS
TextBox
Name :
userRegister
dan
Button passRegiste
Name : okRegister r
Text : Register

12. Untuk event sheet eRegister seperti dibawah ini :

13. Berikutnya membuat layout MenuUtama dengan event sheet

eMenuUtama.
14. Desain layout Register seperti gambar dibawah ini :
 Type : Sprite Type : Sprite
Opacity : 50

Type : Text
Font : Comic
Sans MS

Type : Sprite

15. Untuk event sheet eMenuUtama seperti dibawah ini :

 16. Berikutnya adalah membuat isi dari keempat materi yang ada pada
layout MenuUtama. Karena setiap sub materi cara pembuatannya
sama, jadi akan diambil contoh saja yaitu sub materi pertama(nama
layout: M2Sub1; event sheet : eM2Sub1) dan sub materi
terakhir(nama layout : M2Sub5; event sheet : eM2Sub5) dari
senjata. Buat layout dengan nama M2Sub1 dengan event sheet
eM2Sub1 size & margin : 854x3360.
17. Desain layout M2Sub1 seperti gambar dibawah ini :

Type : Sprite
Type : Text
Font : Comic
Type : Sprite Sans MS

Type : Tiled
Background
Opacity : 90 Type : Tiled
Background
Opacity : 70
Type : Sprite
 Type : Sprite

Type : Text
Type : Text
Name : nilai
18. Untuk event sheet eM2Sub1 sebagai berikut :
Hanya dibuat
sekali karena
bertipe
global(bisa
dipanggil di
layout mana
saja).

19. Selanjutnya untuk layout M2Sub5 dengan event sheet eM2Sub5.

Buat desain seperti dibawah ini :
Type : Sprite
 20. Berikut event sheet eM2Sub5.

21. Tahap berikutnya kita buat evaluasi. Terdiri dari 20 layout(evaluasi1

evaluasi10) dan tentunya setiap layout terdiri dari 10 event
sheet(eEvaluasi1 eEvaluasi10).
22. Kita ambil sample yang evaluasi 1 dan evaluasi 20 karena evaluasi2
evaluasi 19 kurang lebih sama dengan evaluasi1 yang membedakan
hanyalah soalnya.
23. Buat layout evaluasi1 dengan event sheet eEvaluasi1 dengan desain
sebagai berikut :

Type : Text

Type : Sprite

24. Event sheet eEvaluasi1.

25. Berikutnya yaitu evaluasi10 dengan event sheet eEvaluasi10. Buat
desain evaluasi10 seperti gambar dibawah ini :

Type : Sprite

26. Event sheet eEvaluasi10.

27. Setelah memilih jawaban di layout evaluasi 1 maka langsung
dialihkan ke layout evaluasiDone dengan event sheet
eEvaluasiDone. Buat layout evaluasiDone berserta evant sheet nya.
Untuk desain dari evaluasiDone seperti gambar dibawah ini :

28. Event sheet eEvaluasiDone.

 29. Pada layout MenuUtama terdapat icon tabel yang berada pada kiri
bawah dari layout. Icon tersebut ketika di klik akan menuju layout
tabel dan menampilkan user berserta nilai dari masing-masing user
mulai materi 1-4 dan evaluasi.
30. Buat layout table dengan event sheet eTable. Berikut desain dari
layout tsb :

Type : Tiled
Type : Text Background

Sprite

NB : untuk gambar tabel merupakan screenshot dari desain tabel di microsoft

word yang kemudian disimpan menjadi format .png dan kemudian
dimasukkan ke construct sebagai sprite. Untuk semua tulisan text itu diberi
nama data karena nantinya text tersebut akan diganti dengan value sesuai
dari kolom masing-masing.
31. Event sheet eTable.
32. Untuk me-load data user dan nilai masing-masing user secara real
time dan online maka kita perlu membuat file .php untuk
mengoneksikan media pembelajaran ke database dan server online
agar nilai pada layout table dapat berubah sesuai database yang
tersimpan pada server online. File php juga dibuat untuk memasukkan
data user yang register sehingga ketika user yang sudah terdaftar akan
menggunakan aplikasi lagi tidak perlu login kembali dan data(nilai)
dari user tersebut sudah tersimpan di database online.
33. Disini dibuat 4 file .php yaitu getdataadat.php, login.php, register.php,
savenilai.php.
34. File getdataadat.php
<?php
header('Access-Control-Allow-Origin: *');
$host = "mysql.idhostinger.com";
$db = "u105190648_kulia";
$pass = "superman94";
$db_name = "u105190648_kulia";
$tbl_name="members"; // Table name

// Connect to server and select database.

$connect = mysqli_connect("$host", "$db", "$pass")or die("cannot
connect");
mysqli_select_db($connect, $db_name)or die("cannot select DB");
 // Retrieve data from database
$sql="SELECT username, progress, progress2, progress3, progress4,
evaluasi FROM members ORDER BY username ASC LIMIT 10";
$result=$connect->query($sql);

// Start looping rows in mysql database.

while($rows=mysqli_fetch_array($result)){
echo $rows['username'] . "|" . $rows['progress'] . "|" .
$rows['progress2'] . "|" . $rows['progress3'] . "|" . $rows['progress4'] .
"|" . $rows['evaluasi'] . "|";

// close while loop

}

// close MySQL connection

?>

35. File login.php

<?php header('Access-Control-Allow-Origin: *');

$myHost = "mysql.idhostinger.com";
$myUser = "u105190648_kulia";
$myPass = "superman94";
$myDbs = "u105190648_kulia";
$username = $_GET['fname'];
$password = $_GET['fpass'];
$con=mysqli_connect($myHost, $myUser, $myPass, $myDbs);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
 $qz = "SELECT id FROM members where username='".$username."'
and password='".$password."'" ;
$qz = str_replace("\'","",$qz);
$result = mysqli_query($con,$qz);
while($row = mysqli_fetch_array($result))
{
echo $row['id'];
}
mysqli_close($con);
?>

36. File register.php

<?php header('Access-Control-Allow-Origin: *');

$myHost = "mysql.idhostinger.com";
$myUser = "u105190648_kulia";
$myPass = "superman94";
$myDbs = "u105190648_kulia";
$username = $_GET['fname'];
$password = $_GET['fpass'];
$con=mysqli_connect($myHost, $myUser, $myPass, $myDbs);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query = "SELECT username FROM members WHERE username

='".$username."'";
if($result = mysqli_query($con, $query)){
if(mysqli_num_rows($result) != 0){
 echo "username sudah ada!";
}
else{
$query = "INSERT INTO members (username,
password) VALUES ('".$username."','".$password."')";
if(mysqli_query($con, $query)) echo "pendaftaran
berhasil!";
else echo "pendaftaran gagal!";
}
}

mysqli_free_result($result);
mysqli_close($con);
?>

37. File savenilai.php

<?php header('Access-Control-Allow-Origin: *');

$host = "mysql.idhostinger.com";
$dbu = "u105190648_kulia";
$dbp = "superman94";
$db = "u105190648_kulia";
$tbl_name="members"; // Table name

$dblink = mysqli_connect($host,$dbu,$dbp);
$seldb = mysqli_select_db($dblink, $db);

if((isset($_GET['userid']) && isset($_GET['progress'])) or

(isset($_GET['userid']) && isset($_GET['progress2'])) or
(isset($_GET['userid']) && isset($_GET['progress3'])) or
(isset($_GET['userid']) && isset($_GET['progress4'])) or
(isset($_GET['userid']) && isset($_GET['evaluasi']))) {
 //Lightly sanitize the GET's to prevent SQL injections and possible
XSS attacks
$userid = $_GET['userid'];
$progress = $_GET['progress'];
$progress2 = $_GET['progress2'];
$progress3 = $_GET['progress3'];
$progress4 = $_GET['progress4'];
$evaluasi = $_GET['evaluasi'];

if(!empty($progress)) {
$sql = "UPDATE `$db`.`$tbl_name` SET `progress` =
'$progress' WHERE `$tbl_name`.`id` = '$userid'";
}else if(!empty($progress2)) {
$sql = "UPDATE `$db`.`$tbl_name` SET `progress2` =
'$progress2' WHERE `$tbl_name`.`id` = '$userid'";
}else if(!empty($progress3)) {
$sql = "UPDATE `$db`.`$tbl_name` SET `progress3` =
'$progress3' WHERE `$tbl_name`.`id` = '$userid'";
}else if(!empty($progress4)) {
$sql = "UPDATE `$db`.`$tbl_name` SET `progress4` =
'$progress4' WHERE `$tbl_name`.`id` = '$userid'";
}else if(!empty($evaluasi)) {
$sql = "UPDATE `$db`.`$tbl_name` SET `evaluasi` =
'$evaluasi' WHERE `$tbl_name`.`id` = '$userid'";
}

$result = $dblink->query($sql);
if($result){

//The query returned true - now do whatever you like here.

 echo 'Your progress was saved. Congrats!';

}else{

//The query returned false - you might want to put some sort of
error reporting here. Even logging the error to a text file is fine.
echo 'There was a problem saving your progress. Please try
again later.';

}else{
echo 'Your id or progress wasnt passed in the request. Make sure
you add ?nama=NAME_HERE&score=1337 to the tags.';
}

//Close off the MySQL connection to save resources.

?>
Pembagian Tugas :
Dimas : Dokumentasi/ Laporan
Arif : Programmer
Yanuar : Designer

Sekian Terimakasih