LAMPIRAN - LAMPIRAN · LAMPIRAN A-1 #Region Module Attributes #FullScreen: True #IncludeTitle: True #ApplicationLabel: Nasab, Urgensi dan Sejarah Nabi Muhammad #VersionCode: 1 #VersionName:

49

LAMPIRAN - LAMPIRAN

50

LAMPIRAN A-1

SOURCE CODE TAMPILAN ANTARMUKA

51

LAMPIRAN A-1

#Region Module Attributes

#FullScreen: True

#IncludeTitle: True

#ApplicationLabel: Nasab, Urgensi dan Sejarah Nabi Muhammad

#VersionCode: 1

#VersionName:

#SupportedOrientations: unspecified

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private Panel1 As Panel

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("main")

End Sub

Sub button1_Click

StartActivity("menu")

End Sub

52

LAMPIRAN A-2

SOURCE CODE MENU UTAMA

53

LAMPIRAN A-2

#Region Activity Attributes

#FullScreen: True

#IncludeTitle: True

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private Panel1 As Panel

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("menu")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub button1_Click

StartActivity("nasab")

End Sub

Sub button2_Click

StartActivity("klasifikasi")

End Sub

Sub button3_Click

StartActivity("nabi")

End Sub

Sub button4_Click

StartActivity("urgensi")

End Sub

Sub button5_Click

StartActivity("tentang")

End Sub

Sub button6_Click

Activity.Finish

End Sub

54

LAMPIRAN A-3

SOURCE CODE NASAB

55

LAMPIRAN A-3

#Region Activity Attributes

#FullScreen: True

#IncludeTitle: True

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private webview1 As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("nasab")

Private myHTML As String

myHTML = File.ReadString(File.DirAssets, "nasab.html")

webview1.LoadHtml(myHTML)

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub button1_Click

Activity.Finish

End Sub

56

LAMPIRAN A-4

SOURCE CODE KLASIFIKASI

57

LAMPIRAN A-4

#Region Activity Attributes

#FullScreen: True

#IncludeTitle: True

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private WebView1 As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)

'Activity.LoadLayout("Layout1")

Activity.LoadLayout("klasifikasi")

Private myHTML As String

myHTML = File.ReadString(File.DirAssets, "Klasifikasi.html")

WebView1.LoadHtml(myHTML)

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub button1_Click

Activity.Finish

End Sub

58

LAMPIRAN A-5

SOURCE CODE SEJARAH NABI MUHAMMAD

59

LAMPIRAN A-5

#Region Activity Attributes

#FullScreen: True

#IncludeTitle: True

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private webview1 As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("nabi")

Private myHTML As String

myHTML = File.ReadString(File.DirAssets, "nabi.html")

webview1.LoadHtml(myHTML)

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub button1_Click

Activity.Finish

End Sub

60

LAMPIRAN A-6

SOURCE CODE URGENSI

61

LAMPIRAN A-6

#Region Activity Attributes

#FullScreen: True

#IncludeTitle: True

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private WebView1 As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("urgensi")

Private myHTML As String

myHTML = File.ReadString(File.DirAssets, "urgensi.html")

WebView1.LoadHtml(myHTML)

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub button1_Click

Activity.Finish

End Sub

62

LAMPIRAN A-7

SOURCE CODE TENTANG

63

LAMPIRAN A-7

#Region Activity Attributes

#FullScreen: True

#IncludeTitle: True

#End Region

Sub Process_Globals

End Sub

Sub Globals

Private WebView1 As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("tentang")

Private myHTML As String

myHTML = File.ReadString(File.DirAssets, "tentangg.html")

WebView1.LoadHtml(myHTML)

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub button1_Click

Activity.Finish

End Sub

64

LAMPIRAN A-8

SOURCE CODE HTML DAN CSS PADA MENU KLASIFIKASI

65

LAMPIRAN A-8

<html>

<head><meta http-equiv="cache-control" content="no-cache"><meta

http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires"

content="-1"><style type="text/css"></style>

<meta http-equiv="cache-control" content="no-cache"><meta http-

equiv="Pragma" content="no-cache"><meta http-equiv="Expires"

content="-1"><style type="text/css">body {

height: calc(100% - 20px);

width: calc(100% - 20px);

margin: 0;

padding: 10px;

display: flex;

background: #FFE4B8;

color: rgba(0,0,0,.87);

font-family: 'Roboto', sans-serif;

}

.accordion {

margin: auto;

width: 400px;

}

66

.accordion input {

display: none;

}

.box {

position: relative;

background: navajowhite;

height: 64px;

transition: all .15s ease-in-out;

}

.box::before {

content: '';

position: absolute;

display: block;

top: 0;

bottom: 0;

left: 0;

right: 0;

pointer-events: none;

box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px

rgba(0,0,0,.24);

}

67

header.box {

background: #6699CC;

z-index: 100;

cursor: initial;

box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px

4px -4px rgba(0,0,0,.24);

}

header .box-title {

margin: 0;

font-weight: normal;

font-size: 16pt;

color: white;

cursor: initial;

}

.box-title {

width: calc(100% - 40px);

height: 64px;

line-height: 64px;

padding: 0 20px;

display: inline-block;

cursor: pointer;

68

-webkit-touch-callout: none;-webkit-user-select: none;-khtml-

user-select: none;-moz-user-select: none;-ms-user-select: none;user-

select: none;

}

.box-content {

width: calc(100% - 40px);

padding: 30px 20px;

font-size: 11pt;

color: rgba(0,0,0,.54);

display: none;

}

.box-close {

position: absolute;

height: 64px;

width: 100%;

top: 0;

left: 0;

cursor: pointer;

display: none;

}

input:checked + .box {

69

height: auto;

margin: 16px 0;

box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);

}

input:checked + .box .box-title {

border-bottom: 1px solid rgba(0,0,0,.18);

}

input:checked + .box .box-content,

input:checked + .box .box-close {

display: inline-block;

}

.arrows section .box-title {

padding-left: 44px;

width: calc(100% - 64px);

}

.arrows section .box-title:before {

position: absolute;

display: block;

content: '\203a';

font-size: 18pt;

left: 20px;

70

top: -2px;

transition: transform .15s ease-in-out;

color: rgba(0,0,0,.54);

}

input:checked + section.box .box-title:before {

transform: rotate(90deg);

}

</style></head><body>

<nav class="accordion arrows">

<header class="box">

<label for="acc-close" class="box-

title"><center>Klasifikasi<center/></label>

</header>

<input type="radio" name="accordion" id="cb2">

<section class="box">

<label class="box-title" for="cb2">masyurun

nasab</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

71

</section>

<input type="radio" name="accordion" id="cb1">

<section class="box">

<label class="box-title" for="cb1">Majhulun

nasab,</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section>

<input type="radio" name="accordion" id="cb4">

<section class="box">

<label class="box-title" for="cb4">Maskukun

nasab</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section>

<input type="radio" name="accordion" id="cb5">

<section class="box">

<label class="box-title" for="cb5">mardudun

nasab</label>

72

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section> <input type="radio"

name="accordion" id="cb6">

<section class="box">

<label class="box-title" for="cb6">tahtal

bahas</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section>

<input type="radio" name="accordion" id="cb3">

<section class="box">

<label class="box-title" for="cb3">marhulun</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

<input type="radio" name="accordion" id="acc-

close"><script>// Write JavaScript here

</script></div></section></nav></body>

73

LAMPIRAN A-9

SOURCE CODE HTML DAN CSS PADA MENU URGENSI

74

LAMPIRAN A-9

<html>

<head><meta http-equiv="cache-control" content="no-cache"><meta

http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires"

content="-1"><style type="text/css"></style>

<meta http-equiv="cache-control" content="no-cache"><meta http-

equiv="Pragma" content="no-cache"><meta http-equiv="Expires"

content="-1"><style type="text/css">body {

height: calc(100% - 20px);

width: calc(100% - 20px);

margin: 0;

padding: 10px;

display: flex;

background: #FFE4B8;

color: rgba(0,0,0,.87);

font-family: 'Roboto', sans-serif;

}

.accordion {

margin: auto;

width: 400px;

75

}

.accordion input {

display: none;

}

.box {

position: relative;

background: navajowhite;

height: 64px;

transition: all .15s ease-in-out;

}

.box::before {

content: '';

position: absolute;

display: block;

top: 0;

bottom: 0;

left: 0;

right: 0;

pointer-events: none;

box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px

rgba(0,0,0,.24);

76

}

header.box {

background: #6699CC;

z-index: 100;

cursor: initial;

box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px

4px -4px rgba(0,0,0,.24);

}

header .box-title {

margin: 0;

font-weight: normal;

font-size: 16pt;

color: white;

cursor: initial;

}

.box-title {

width: calc(100% - 40px);

height: 64px;

line-height: 64px;

padding: 0 20px;

display: inline-block;

77

cursor: pointer;

-webkit-touch-callout: none;-webkit-user-select: none;-khtml-

user-select: none;-moz-user-select: none;-ms-user-select: none;user-

select: none;

}

.box-content {

width: calc(100% - 40px);

padding: 30px 20px;

font-size: 11pt;

color: rgba(0,0,0,.54);

display: none;

}

.box-close {

position: absolute;

height: 64px;

width: 100%;

top: 0;

left: 0;

cursor: pointer;

display: none;

}

78

input:checked + .box {

height: auto;

margin: 16px 0;

box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);

}

input:checked + .box .box-title {

border-bottom: 1px solid rgba(0,0,0,.18);

}

input:checked + .box .box-content,

input:checked + .box .box-close {

display: inline-block;

}

.arrows section .box-title {

padding-left: 44px;

width: calc(100% - 64px);

}

.arrows section .box-title:before {

position: absolute;

display: block;

content: '\203a';

font-size: 18pt;

79

left: 20px;

top: -2px;

transition: transform .15s ease-in-out;

color: rgba(0,0,0,.54);

}

input:checked + section.box .box-title:before {

transform: rotate(90deg);

}

</style></head><body>

<nav class="accordion arrows">

<header class="box">

<label for="acc-close" class="box-

title"><center>Klasifikasi<center/></label>

</header>

<input type="radio" name="accordion" id="cb2">

<section class="box">

<label class="box-title" for="cb2">masyurun

nasab</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

80

</div>

</section>

<input type="radio" name="accordion" id="cb1">

<section class="box">

<label class="box-title" for="cb1">Majhulun

nasab,</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section>

<input type="radio" name="accordion" id="cb4">

<section class="box">

<label class="box-title" for="cb4">Maskukun

nasab</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section>

<input type="radio" name="accordion" id="cb5">

<section class="box">

81

<label class="box-title" for="cb5">mardudun

nasab</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section> <input type="radio"

name="accordion" id="cb6">

<section class="box">

<label class="box-title" for="cb6">tahtal

bahas</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

</div>

</section>

<input type="radio" name="accordion" id="cb3">

<section class="box">

<label class="box-title" for="cb3">marhulun</label>

<label class="box-close" for="acc-close"></label>

<div class="box-content">

82

<input type="radio" name="accordion" id="acc-

close"><script>// Write JavaScript here

</script></div></section></nav></body>