Dokumen tersebut membahas tentang XML, JSON, dan perbedaan antara front-end dan back-end developer. XML digunakan untuk mendeskripsikan data secara terstruktur sedangkan JSON digunakan untuk pertukaran data. Front-end developer berfokus pada tampilan website sementara back-end developer berfokus pada fungsi di balik layar website.

1. 1412511667 SRI HARTATIK 1

2. 1412511667 SRI HARTATIK 2
• ApaItu XML ???
XML singkatan dari Extensible Markup Language.
XML hampir sama dengan HTML karena sama sama
turunan dari SGML ( Standart Generalized Markup
Language) yang dikembangkan padaawal tahun1980.
Teknologi XML ini dikembangkan mulai tahun 1966,
dan kemudian diakui oleh W3C pada1998.

3. 1412511667 SRI HARTATIK 3
XML digunakan untuk mendeskripsikan dan
memanipulasi dokumen secara terstruktur. Dengan
menyediakan format tertentu untuk dokumen yang
mempunyai dataterstruktur.
XML bukanlah suatu bahasa pemrograman, melainkan
sintaks yang digunakan untuk menjelaskan bahasa
Markup lain, sehingga dinamakan juga dengan meta-
language.

4. 1412511667 SRI HARTATIK 4
• XML merupakan standart format dari struktur berkas
( file) yang ada.
• XSL merupakan standar untuk memodifikasi data
yang dimpor atau diekspor.
• XSD merupakan standar yang mendefinisikan struktur
databasedalam XML.
XML memiliki 3 tipeyaitu :

5. 1412511667 SRI HARTATIK 5
 Pintar ( Intelligence ). XML dapat menangani
berbagai tingkat ( level ) kompleksitas.
 Dapat beradaptasi. Dapat mengadaptasi untuk
membuat bahasasendiri.
 Mudah pemeliharaannya.
 Sederhana. XML lebih sederhana.
 Mudah dipindah-pindahkan ( portability ). XML
mempunyai kemudahan perpindahan yang lebih
bagus.

6. 1412511667 SRI HARTATIK 6
 Ekstensibilitas : dapat ditukar/digabung dengan
dokumen XML lain.
 Memungkinkan pemrograman yang lebih baik,
makadibuat suatu softwarepengolah XML.
 Memisahkan data dan presentasi. Yang akan
direpresentasikan dalam XML dan XSLT.
 Pencarian data cepat karena XML merupakan data
dalam format yang terstruktur.
 Plain text dan platform independent.
 Untuk Pertukaran Data.

7. 1412511667 SRI HARTATIK 7
<?xml version="1.0" encoding="UTF-8"?>
<Resep nama="roti" waktu_persiapan="5 menit" waktu_masak="3 jam">
<judul>ROTI TAWAR</judul>
<bahan jumlah="3" satuan="cangkir">tepung</bahan>
<bahan jumlah="0,25" satuan="ons">ragi </bahan>
<bahan jumlah="1,5" satuan="cangkir">air hangat </bahan>
<bahan jumlah="1" satuan="sendok teh">garam </bahan>
<Cara_membuat>
<langkah>Campur semua bahan dan uleni adonan sampai merata.</langkah>
<langkah>Tutup dengan kain lembap dan biarkan selama satu jam di ruangan
yang hangat.</langkah>
<langkah>Ulangi lagi, letakkan di loyang dan panggang di oven.</langkah>
<langkah>Keluarkan, hidangkan</langkah>
</Cara_membuat>
</Resep>

8. 1412511667 SRI HARTATIK 8
• Pengertian JSON
JSON ( JavaScript Object Notation ) merupakan
format pertukaran data yang ringan, mudah dibaca dan
ditulis oleh manusia, serta mudah diterjemahkan dan
dibuat ( generate) oleh komputer.
JSON juga merupakan format teks yang tidak
bergantung pada bahsa pemrograman apapun karena
menggunakan gaya bahasa yang umum oleh
programmer keluarga C termasuk C, C++,C#, java dll.
Disebut jugasebagai bahasapertukaran-data.

9. 1412511667 SRI HARTATIK 9
Format JSON sering digunakan untuk
mentransmisikan data terstruktur melalui suatu
koneksi jaringan pada suatu proses yang disebut
serialisasi.

10. 1412511667 SRI HARTATIK 10
• 2 Struktur dari pembuatan JSON
1. Kumpulan Pasangan Nama/Nilai. Pada beberapa
bahasa, ini dinyatakan sebagai object, record,
struct, dictionary, hash table, keyed list.
2. Daftar Nilai terurutkan ( an ordered list of values).
Biasanya hal ini dinyatakan sebagai larik ( array ),
vector, list atau sequence.

11. 1412511667 SRI HARTATIK 11
• Objek ( Object )
Sepasang Nama/Nilai yang tidak terurutkan. Objek
dimulai dengan kurung kurawal terbuka ( { ) dan
diakhiri kurung kurawal tertutup ( } ). Setiap nama
diikuti dengan titik dua ( : ) dan setiap pasangan
nama/nilai dipisahkan oleh koma( , )

12. 1412511667 SRI HARTATIK 12
• Larik ( Array )
Sekumpulan nilai yang terurutkan. Larik dimulai
dengan kurung kotak buka ( [ ) dan diakhiri dengan
kurung kotak tutup ( ] ). Setiap nilai dipisahkan oleh
koma( , )

13. 1412511667 SRI HARTATIK 13
• Nilai ( Value)
Nilai dapat berupa sebuah string dalam tanda kutip
ganda, atau angka, atau true atau false atau null, atau
sebuah objek atau sebuah larik. Strukturnya dapat
disusun bertingkat.

14. 1412511667 SRI HARTATIK 14
• String
Sekumpulan dari nol atau lebih karakter Unicode,
yang dibungkus dengan tanda kutip ganda. Di dalam
string dapat digunakan backslash escapes “ “ untuk
membentuk karakter khusus. Sebuah karakter
mewakili karakter tunggal pada string. String mirip
dngan string C atau Java.

15. 1412511667 SRI HARTATIK 15
• Gambar Struktur String

16. 1412511667 SRI HARTATIK 16
• Angka( Number )
Sangat mirip dengan angka di C atau Java, kecuali
format oktal dan heksadesimal tidak digunakan.

17. 1412511667 SRI HARTATIK 17
<html>
<head>
<title> JSON testing – tati </title>
<script type=‘text/javascript’>
var JSON_tati = {nama:’sapatati’};
document.write (JSON_tati.nama);
</script>
</head>
<body>
</body>
</html>
JSON_tati adalah nama variable pada javascript yang menunjukkan bahwa
variable tersebut berbentuk Object JSON karena terdapat kurung kurawal ( {} ).
Didalam kurung kurawal terdapat atribut * nama* dengan value * sapatati *. Yang
dipisahkan dengan titik dua( : ), lalu untuk memanggil valuenyadengan code
document.write ( JSON_tati.nama );

18. 1412511667 SRI HARTATIK 18
Perlu untuk kita ketahui bahwa XML bukanlah
merupakan pengganti HTML. Karena keduanya
dirancang dengan tujuan yang berbeda.
XML dirancang untuk transportasi dan menyimpan data,
dengan fokus pada apa data. Sedangkan, HTML
dirancang untuk menampilkan data, dengan fokus pada
bagaimanadataterlihat.

19. 1412511667 SRI HARTATIK 19
• Set Tag yang ekstensible
• Berorientasi Konten
• Standar DataInfrasturktur
• Memungkinkan beberapabentuk keluaran
XML
HTML
• Set Tag Tetap
• Berorientasi Presentasi
• Tidak adakemampuan validasi data
• Presentasi Tunggal

20. 1412511667 SRI HARTATIK 20
JavaScript merupakan bahasa yang berbentuk
kumpulan skrip yang pada fungsinya berjalan pada
suatu dokumen HTML, bahasa ini adalah bahasa
pemrograman untuk memberikan kemampuan
tambahan terhadap bahasaHTML dengan mengijinkan
pengeksekusian perintah-perintah di sisi user, yang
artinyadi sisi browser bukan di sisi server web.
Secara fungsional digunakan untuk menyediakan
aksesscript padaobjek yang dibenamkan.

21. 1412511667 SRI HARTATIK 21
Pertama kali dikembangkan oleh Brendan Eich dari
Netscape dibawah nama Mocha, yang awalnya
berubah menjadi LiveScript kemudian menjadi
JavaScript.
• Sejarah JavaScript

22. 1412511667 SRI HARTATIK 22
Kode JavaScript biasanya dituliskan dalam bentuk
fungsi yang ditaruh di tag <head> yang dibuka dengan
tag <script type=“text/javascript”>
• Penulisan JavaScript
<script type=“text/javascript”>
alert(“Selamat Pagi!”);
</script>

23. 1412511667 SRI HARTATIK 23
Kode JavaScript juga bisa diletakkan di file tersendiri
yang berekstensi .js ( singkatan dari JavaScript).
Untuk memanggil kode yang terdapat di file sendiri,
dibagian awal < head> harus ditentukan dahulu nama
file .js yang dimaksud dengan menggunakan contoh
kodeseperti berikut :
• Penulisan JavaScript
<script type=“text/javascript” src=“alamat.js”>
</script>

24. 1412511667 SRI HARTATIK 24
• Apaitu Front-End dan Back-End
Front-End dan Back-End merupakan Bagian penting
dalam pembuatan suatu aplikasi baik berupa dekstop,
web ataupun mobile.

25. 1412511667 SRI HARTATIK 25
Sebuah developer website menerima pesanan pembuatan
website, perusahaan tersebut hanya memberikan gambar
website yang mereka inginkan (atau yang biasa disebut
mockup). Disinilah peran Back-end dan Front-End developer
dibedakan yaitu :
Pertama kali Para Front-End developer akan memulai tugas
mereka yang pertama yaitu merubah gambar(mockup) tadi
menjadi sebuah halaman web static berbentuk HTML (atau
yang biasadisebut dengan slicing), tugasini cukup berat karena
seorang Front-End developer harus memastikan hasil
slicing mereka sama persis dengan gambar (mockup) baik itu
tampilan, animasi, dan lain-lain.

26. 1412511667 SRI HARTATIK 26
Seorang Front-End developer biasanya harus memahami
beberapa bahasa programming yaitu HTML, CSS, Javascript
dan Jquery. Setelah para Front-end developer selesai maka
mereka akan memberikan hasil berbentuk Web Static kepada
Back-End developer.
Setelah menerima file web static maka Back-End developer
akan segera merubah file tersebut menjadi Web Dinamis, tugas
Back-End Developer biasanya adalah memastikan semua
fungsi berjalan dengan baik dan benar dan para Back-end ini
harus memahami beberapa bahasa programming yaitu php, sql,
javadan sebagainya.

27. 1412511667 SRI HARTATIK 27
• Front-End Developer
Programmer yang lebih fokus pada tampilan luarnya (layout),
jika kalian melihat web-web yang bagus layout/tampilanya itu
biasanya dibuat oleh para front-end web developer untuk itu
mereka harus bisa memahami beberapa bahasa programming
diantaranyaHTML, CSS, Javascript dan Jquery.
• Back-End Developer
Programmer yang lebih fokus pada fungsi-fungsi dari website
tersebut, misalnya membuat form registrasi, pembayaran dan
lain sebagainya, karena itu mereka harus bisa memahami
beberapa bahasa programming juga diantaranya php, sql, java
dan lain sebagainya.