BAB IV IMPLEMENTASI
Modul 2.2. Bagian-bagian Dalam Document XML
a. Heading standard untuk Document XML
Heading standard untuk document XML formatnya adalah sebagai berikut:
Encoding iso-8859-1 merupakan nama resmi dari text encoding yang oleh
Microsoft disebut sebagai ANSI. Atribut encoding ini digunakan untuk memberitahukan pada XML Parser, text encoding apa yang digunakan.
b. Dokumen XML harus memiliki Root tag
Sebuah dokumen XML yang baik harus memiliki root tag. Yaitu tag yang melingkupi keseluruhan dari dokumen. Tag-tag yang lain, disebut child
tag, berada di dalam root membentuk hirarki seperti gambar contoh berikut. Contoh: <root> <child> <subchild></subchild> </child> </root>
Gambar 2.12. Diagram Hirarki XML
c. Tag pada XML harus lengkap berpasangan
Pada HTML beberapa elemen tidak harus berpasangan. Contoh berikut ini diperbolehkan dalam penulisan HTML, namun tidak berlaku pada XML.
<p>paragraph pertama <p>paragarap kedua
Kita harus menulis pula tag penutup untuk setiap tag yang kita buat. Penulisannya harus seperti ini
<p>paragraph pertama</p> <p>paragarap kedua</p>
Tag tunggal hanya diperbolehkan untuk elemen kosong. Contoh penulisannya sebagai berikut:
<anggota nama=”budi”/>
d. XML membedakan huruf besar dengan huruf kecil
Pada XML, <tanggal> berbeda dengan <Tanggal>. Tag pembuka dan tag penutup harus sama susunan huruf besar dan kecilnya.
<contoh>ini penulisan yang salah</Contoh> <contoh>ini baru betul</contoh>
e. Penyarangan tag harus benar.
Penulisan tag pada XML harus mengikuti aturan Last In First Out (LIFO). Pada XML kita tidak bisa membuat tag yang saling bersilang seperti dibawah ini :
<p><b>Huruf Tebal</p></b> tapi harus disusun seperti ini
<p><b>Huruf tebal</b></p> bila dipaksakan juga, browser akan menampilkan pesan error.
f. Nilai atribut harus diletakkan diantara tanda petik
Seperti HTML, XML memiliki atribut. Nilai atribut harus diletakkan diantara dua tanda petik. Tidak masalah apakah tanda petik tunggal atau tanda petik ganda. Contoh dibawah ini dua-duanya benar
<pesan dari=”lusy”> atau <pesan dari=’lusy’>
g. Penamaan tag dan atribut
Nama tag bisa terdiri dari huruf, angka dan underscore(“_”). Karakter awal nama tag harus berupa huruf atau underscore (“_”), tidak diawali dengan kata xml atau XML, (misal:<xmlstring>), dan tidak mengandung spasi. Aturan penamaan atribut sama dengan aturan penamaan tag.
h. Menyisipkan komentar
Pada bahasa pemrograman atau scripting kita mengenal adanya komentar (comment). Komentar adalah kalimat/baris yang tidak dieksekusi oleh compiler, browser atau parser. Untuk menyisipkan komentar pada dokumen XML caranya adalah sebagai berikut:
<!—Baris ini tidak di eksekusi oleh parser --> i. Menggunakan Karakter Illegal pada XML
Sama seperti pada HTML, anda tidak bisa menggunakan karakter seperti kurung siku (< atau >), petik tunggal (‘), dan petik ganda (“) .
Contoh dibawah ini akan menghasilkan error kalau di eksekusi oleh browser.
<syarat>jika jumlah < 1000 maka</syarat>
Untuk menghindarinya, kita harus menggantikannya dengan entity reference seperti di bawah ini:
<syarat>jika jumlah < 1000 maka</syarat> Selengkapnya perhatikan seperti tertulis dibawah ini:
> > Greater then & & Ampersand ' ‘ Apostrophe " “ Quotation mark
j. Namespace XML
Dari pembahasan terdahulu kita mengetahui bahwa tag-tag pada XML tidak didefinisikan secara baku tetapi kita buat sendiri sesuai keinginan kita. Karena itu akan sering terjadi konflik pada dua dokumen yang menggunakan nama tag yang sama tetapi mewakili dua hal yang berbeda. Contoh: bila ada dokumen yang mendiskripsikan tentang kebutuhan material pembuatan gardu jaga dari bambu
<bambu>
<jenis>Jawa</jenis> <panjang>2</panjang> </bambu>
dengan dokumen yang mendiskripsikan “bambu” sebagai merek produk. <bambu>
<jumlah>246</jumlah>
<hargasatuan>200</hargasatuan> </bambu>
untuk mengatasi hal ini, Namespace menyediakan metode dengan menggunakan awalan yang berbeda
<a:bambu>
<a:jenis>Jawa</a:jenis> <a:panjang>2</a:panjang>
</a:bambu>
dokumen kedua menjadi seperti berikut : <b:bambu>
<b:jumlah>246</b:jumlah>
<b:hargasatuan>200</b:hargasatuan> <b:/bambu>
Dengan cara demikian konflik penamaan tag tidak terjadi lagi. Aturan penggunaan namespace adalah sebagai berikut:
<a:bambu xmlns:a=”http:/www.somewhere.com/gardu”>
a adalah prefix yang dipakai, sedangkan atribut namespace di tambahkan pada tag. Syntax untuk atribut namespace adalah sebagai berikut:
xmlns:a=”namespace”
2.10. MySQL
MySQL adalah Relationship Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). Di mana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat close sourced
atau komersial (Sutarman, 2003).
MySQL sebenarnya merupakan turunan salah satu konsep utama dalam
database sejak lama, yaitu SQL (Structure Query Language). SQL adalah sebuah konsep pengoperasian database, terutama untuk pemilihan/seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis.
2.11. Mapublisher 4.0 Dan Macromedia Freehand 10
Mapublisher 4.0 Dan Macromedia Freehand 10 digunakan untuk merubah data(peta digital yang berformat .shp) menjadi .fh10, sehingga dapat menghasilkan peta dengan skala dan koordinat “real-world” agar dapat dikelola di perangkat lunak Macromedia Flash. Mapublisher 4.0 bekerja sebagai Xtras di Macromedia Freehand 10, Mapublisher 4.0 dapat meng-impor format file yang dimiliki oleh pengembang file berformat vektor, seperti:
• ArcInfo Ungenerate (.lin, .pnt, or .pol) • ArcInfo Export (.e00)
• ArcView® Shapefile (.shp + .dbf + .shx) • MapInfo (.mid + .mif)
• AutoCAD(.dxf)
• USGS DLG – Optional (.opt)
Hasil pengelolaan data di Macromedia Freehand 10 dengan Xtras
Mapublisher 4.0 dapat di-ekspor menjadi format file EPS, TIF, AI, FH10, dll. Adapun format file yang nantinya akan digunakan adalah format file
.fh10.
Langkah-langkah untuk merubah data menjadi vektor adalah sebagai berikut:
a. IMPORT MAP
Xtras Import Map adalah hal pertama yang kita lakukan untuk bekerja dengan data peta GIS di Macromedia Freehand.
Import to Layer, meletakkan peta di layer yang ditentukan, harap diperhatikan nama layer harus sama
Clear Files, menghapus
file peta yang terdapat pada daftar file.
Map Anchors X/Y,
koordinat dunia yang ditentukan pojok kiri bawah pada peta. Disarankan untuk menentukannya dengan menekan tombol “Defaults”.
Page Anchors X/Y,
koordinat dunia yang ditentukan pojok kiri bawah pada peta. Disarankan untuk menentukannya dengan menekan tombol “Defaults”. Import, Memasukkan file-file peta yang ada di File List ke lembar kerja Macromedia Freehand.
Select Files, mengambil file peta yang akan dimasukkan ke daftar
File List, daftar file yang akan diimpor
Units, Satuan unit skala, standardnya adalah “meter”. Jika ingin diubah, jangan lupa untuk menekan tombol “Defaults” kembali.
Angle, Memutar peta
dengan sudut yang diisikan.
Scaling, Menentukan
skala, dengan menekan tombol “Defaults”, “Or Same As”, atau secara manual.
Defaults, mengkalkulasi titik referensi peta dan nilai skala (dalam satuan meter) sesuai dengan ukuran canvas dokumen.
Gambar 2.13. Kotak Dialog Import Map Berikut cara yang dipakai untuk meng-importFile Peta
1. Buka dokumen baru dan tentukan bentuk canvas “Landscape” dan ukuran canvas dokumen misalkan, x = 320, y=240
Bentuk canvas dokumen “Landscape” Ukuran X canvas
Ukuran Y canvas
2. Import peta, Xtras ► Mapublisher ►Import Map 3. Tekan tombol “Select Files”
4. Tentukan dan pilih data spasial yang diinginkan, misalkan
“regional_south_china_sea.shp”, setelah itu tekan tombol “Open”.
5. Tekan tombol “Defaults” untuk menghitung secara otomatis sudut peta dan skala peta sesuai dengan ukuran canvas dokumen yang sudah ditentukan. Skala secara
otomatis berdasarkan satuan “meter”, jika ingin merubahnya menjadi “kilometer”,
Gambar 2.15.Kotak dialog Insert MAP
pilih ukuran unit di kotak pilihan “Units”.
6. Jika diperlukan, tentukan sudut halaman dan nilai sudut (angle). 7. Tekan tombol “import”.
8. Setelah peta tertampil di lembar kerja Macromedia Freehand, aktifkan Xtra Tool, Window ►Toolbars ►Xtra Tools.
9. Aktifkan panel Info, Window ►Toolbars ►Info.
Gambar 2.16.Hasil import peta
10.Pada panel Xtra Tools, aktifkan Map Location Tool.
Map Location Tool
Gambar 2.17. Panel Xtra Tools
Klik mouse ke lembar kerja untuk memunculkan kotak informasi Map Location Tool.
Skala peta WX dan WY(Longitude & Latitude) disesuaikan dengan posisi mouse
Koordinat Y di pojok kiri bawah Koordinat X di
pojok kiri bawah
Gambar 2.18. Kotak Informasi Map Location Tool 11.Saat ini data yang dapat digunakan adalah:
a. Skala sesuai dengan map-units
12.Tentukan titik koordinat X dan Y “real-world” di pojok kanan atas dengan mengarahkan pointer mouse, setelah dikira pas, tekan tombol mouse untuk menampilkan koordinat yang akan tertera di Mapublisher Location Tool. 13.Sekarang kita sudah mendapatkan data-data sebagai berikut :
a. Titik koordinat pojok kiri bawah (X=94.73387, Y=-10.93), b. Titik koordinat pojok kanan atas (X =144.489125, Y=26.405028),
dan c. Skala.
Ketiga parameter di atas akan menjadi modal untuk pengelolaan koordinat di Macromedia Flash.
14. Ekspor peta ke format file FH10, File ►Export.
2.12. Macromedia Flash MX
Macromedia Flash MX adalah program grafis animasi standar profesional untuk menghasilkan halaman web yang menarik. Movie Flash terdiri atas grafik, teks, animasi, dan aplikasi untuk situs web. Semuanya tetap menggunakan grafik berbasis vektor. Jadi aksesnya lebih cepat dan akan terlihat halus pada skala revolusi layer berapapun. Selain itu juga mempunyai kemampuan untuk menyimpan video, gambar dan suara dari aplikasi diluarnya.
Movie Flash juga memasukkan unsur interaktif dalam movie-nya menggunakan ActionScript (suatu bahasa pemrograman berorientasi objek), yang nantinya user dapat berinteraksi dengan movie, menggunakan
sebuah movie, mengontrol movie, memindahkan objek-objek, memasukkan informasi melalui form dan operasi-operasi lainnya.
Beberapa kemampuan flash lainnya adalah membuat animasi logo, pengaturan navigasi halaman web, pembuatan animasi form, membuat halaman web atau aplikasi web, dan lainnya sesuai dengan kreatifitas dan imajinasi dalam menggunakan kemampuan flash yang ada (Hakim, 2003).
2.13. Macromedia Dreamweaver MX 2004
Macromedia Dreamweaver MX 2004 merupakan suatu area kerja yang menggunakan sistem MDI (Multiple Document Interface). Sistem ini meletakkan semua dokumen yang sedang dibuka pada jendela panel yang sama dan panel-panel dikelompokkan dalam satu jendela panel yang lebih besar, yang terletak disebelah kanan jendela dokumen.
Macromedia Dreamweaver MX 2004 juga menyediakan pilihan
HomeSite/CodeStyle untuk memungkinkan kita dalam menggunakan
layout seperti yang digunakan dalam Macromedia HomeSite dan
Macromedia ColdFusionStudio (Hakim, 2003).
Kelebihan Macromedia Dreamweaver MX 2004 antara lain :
Macromedia Dreamweaver MX 2004 tidak hanya dapat mendesain web, tetapi juga dapat membangun aplikasi Web berbasiskan database tanpa harus mengetahui pemrograman Web. Dengan Macromedia Dreamweaver MX 2004, kita dapat membuat tampilan web jadi semakin dinamis dan interaktif. Dengan software ini kita dapat menggabungkan beberapa elemen-elemen penting web seperti gambar, animasi, suara ataupun video
dengan mudah. Kita juga dapat menggunakan software ini untuk membangun situs web dinamis berbasis PHP, ASP, dan JSP.
BAB III
ANALISIS DAN PERANCANGAN
3.1 Analisis Sistem
Analisis sistem digunakan untuk mengidentifikasi, mengevaluasi permasalahan dan kebutuhan dalam suatu sistem. Aktivitas-aktivitas dalam analisis sistem antara lain:
3.1.1. Identifikasi Kebutuhan
Daerah Istimewa Yogyakarta kini telah berkembang menjadi daerah pusat pendidikan dan daerah tujuan wisata(DTW) internasional kedua setelah Bali. Sebagai dampak kegiatan pendidikan dan pariwisata DIY, maka jalur transportasi merupakan unsur penting sebagai pendukung kegiatan tersebut. Jalan juga merupakan prasarana penting dalam rangka pendistribusian barang dan jasa. Oleh karena itu, diperlukan sistem informasi untuk mendukung pengaturan, pembinaan, pembangunan dan pengawasan jalan.
1. Informasi-informasi yang akan diberikan dalam sistem adalah informasi mengenai fungsi, status, kelas jalan, serta informasi pendukung yang lain, seperti kondisi jalan, serta nama jalan.
2. Admin dapat melakukan login layar utama admin dan melakukan proses pengubahan informasi jalan. Admin juga dapat melakukan peng-update-an buku tamu.
3. User dalam sistem ini adalah Dinas Perhubungan dan masyarakat yang dapat mengakses informasi tentang jalan dimana saja dan kapan saja. 4. Yang diperlukan oleh pembuat sistem yaitu meliputi :
A. Software
1. Web server : Apache HTTP Server 2.0.49 2. Bahasa pemrograman : PHP Version 4.3.9
3. Database : XML , SQLyog
4. Pemrosesan peta awal : Macromedia Freehand 10 dan Avenza Mapublisher 4.0 5. User interface : Macromedia Dreamweaver MX
2004 6. Tampilan peta, menu
jalan, desain : Macromedia Flash MX 2004 B. Hardware
1. Minimal Intel Pentium III 2. Minimal RAM : 256 MB
3. Prosessor : AMD Sempron(TM) 2400+ C. Pengetahuan (Knowledge)
1. Pengetahuan tentang Sistem Informasi Geografis 2. Pengetahuan tentang Basis Data
3. Pengetahuan tentang Pemrograman Web
3.1.2. Studi Kelayakan
Karakteristik yang akan dikembangkan dalam Sistem Informasi Geografis Jalan di DIY Berbasis Web ini adalah
1. Nilai ekonomis : sistem ini tidak memerlukan biaya besar karena spesifikasi untuk software maupun hardware-nya sudah tersedia dan merupakan perangkat yang
mudah diperoleh.
2. Legal : sistem ini dibangun untuk memberi informasi dan memecahkan masalah mengenai belum tersedianya
SIG tentang jalan di DIY yang dapat diakses dimana saja dan kapan saja.
3. Fleksibel : sistem lebih praktis dalam menyajikan informasi sehingga informasi dapat diperoleh dengan mudah. 4. Sistem sederhana : sistem dibuat tidak terlalu kompleks dalam
penggunaannya.
3.2. Perancangan
3.2.1. Perancangan Proses
Perancangan proses dilihat dari 2 sisi, yaitu sisi administrator dan sisi user. 1. Sisi admin
Admin dapat melakukan beberapa proses yakni: a. Proses login
Merupakan proses yang terjadi pada saat seorang admin memasukkan data login dan sistem akan memberikan konfirmasi
login, jika login diterima maka admin dapat melakukan proses selanjutnya.
b. Ubah Data Jalan
Merupakan proses dimana admin dapat merubah informasi yang ada. Proses yang berlaku di sini adalah edit data.
c. Update Buku Tamu
Merupakan proses dimana admin dapat menghapus daftar buku tamu yang telah ada.
d. Logout
Merupakan proses untuk keluar dari menu administrator. 2. Sisi user
User dapat melakukan beberapa proses yakni: a. Pengaksesan Informasi
Dalam proses ini, user memilih nama jalan yang ada dalam list, jalan yang ditunjuk akan berkedip(blink) dan diperbesar(zoom), kemudian akan tampil box berisi informasi tentang jalan. b. Pengisian Buku Tamu
Pengunjung dapat mengisi buku tamu dengan memasukkan nama, alamat, email dan pesan.
3.2.2. Perancangan Sistem
3.2.2.1.DFD level 0
DFD level 0 disebut juga dengan diagram konteks, merupakan level yang merepresentasikan jalannya proses yang terjadi di dalam sistem. Pada
DFD level 0 ini, sistem berinteraksi dengan dua entitas yaitu user dan admin. Pada level ini admin melakukan login kemudian sistem memberikan konfirmasi login, setelah login diterima admin memasukkan data jalan sebagai aliran data (input) sistem. Input dari admin merupakan
output bagi user. User dapat mencari informasi yang diinginkan dengan memilih nama jalan, maka user akan mendapatkan informasi tentang jalan seperti nama, pajang, lebar, dll. Adapun DFD level 0 pada sistem ini dapat dilihat pada gambar 3.1 :
USER SIG JALAN DI DIY0 ADMIN
BERBASIS WEB pilihan_nama_jalan,
info_ jalan, pesan_login_invalid
dt_login,dt_info_ jalan
, data_info_jalan_baru, dt_buku_tamu
pesan
dt_buku_tamu
Gambar 3.1. Diagram Konteks SIG Penyajian Peta Jalan di DIY
Keterangan : pesan : pengisian nama belum benar, pengisian email belum benar, pengisian alamat, pemasukan
data sukses.
pesan_login_invalid : pengisian password salah dan data username tidak benar atau tidak diisi.
dt_info_jalan : id, nama, panjang, lebar, kelas, status, kondisi, fungsi, lokasi jalan
dt_login : username, password
3.2.2.2.DFD level 1 User
DFD level 1 untuk user yang ditunjukkan pada gambar 3.2. Di dalamnya terdapat dua proses yaitu proses pencarian informasi jalan proses pengisian buku tamu. Pada proses pencarian informasi jalan user memilih nama jalan pada list kemudian info mengenai jalan akan diperoleh. Sedangkan pada proses pengisian buku tamu, user dapat mengisi dan melihat daftar buku tamu.
USER 1.1 pencarian informasi jalan 1.2 pengisian buku tamu info_jalan dt_buku_tamu info jalan buku tamu pesan dt_buku_tamu pilihan_nama_jalan dt_info_ jalan dt_buku_tamu
Gambar 3.2. DFD Level 1 User
3.2.2.3.DFD level 1 Admin
1. Login. Pada proses ini admin memasukkan data login dan sistem memberikan konfirmasi login, jika login diterima maka admin dapat melakukan proses selanjutnya.
2. Ubah info jalan. Proses ini admin dapat mengedit/mengubah informasi jalan.
3. Update buku tamu. Proses ini admin dapat menghapus daftar buku tamu yang telah ada.
ADMIN login2.1 dt_login pesan_login _invalid 2.2 ubah info jalan 2.3 update buku tamu dt_info_jalan login _valid
data_buku_tamu buku tamu
info jalan dt_info_jalan dt_buku_tamu dt_buku_tamu dt_info_jalan login _valid dt_info_jalan_baru
Gambar 3.3. DFD Level 1 Admin
3.2.3. Perancangan Antarmuka
Rancangan antar muka dibuat dengan tujuan bahwa sistem yang akan dibuat nanti bersifat user friendly atau belum, terkadang sistem yang dibuat berbasis GUI (Graphic User Interface) yang tidak melalui perancangan yang baik dalam aplikasinya akan menyulitkan user untuk mengoperasikannya. Oleh karena itu perancangan antar muka yang baik akan mempengaruhi hasil yang akan dibuat.
Hubungan antar layanan pada aplikasi ini terdapat proses hyperlink
yang mengarah pada halaman berikutnya. Dapat dilihat pada halaman utama mengarah pada halaman peta dan buku tamu. Aplikasi ini memiliki dua halaman menu utama yaitu halaman utama menu user dan halaman utama administrator.
3.2.3.1. Halaman Aplikasi Web untuk User
Pada hubungan antarmuka halaman aplikasi web ini dapat dilihat kaitan antara halaman satu dengan yang lain, serta dapat dilihat pula menu-menu yang disediakan untuk mendapat informasi jalan.
Muka Peta
Informasi Peta & koordinat
Buku tamu
Isi buku tamu
Lihat buku tamu Menu User
3.2.3.1.1. Rancangan Halaman Muka
Pada halaman ini terdapat beberapa pilihan menu peta, dan buku tamu. Pada halaman Muka ini akan memberikan gambaran mengenai DIY disertai dengan peta statis DIY.
PETA JALAN DI DAERAH ISTIMEWA YOGYAKARTA
muka peta buku tamu
PETA STATIS
Gambar 3.5. Rancangan Halaman Menu Muka
3.2.3.1.2. Rancangan Halaman Peta
Tampilan rancangan halaman peta akan muncul setelah menu peta diklik/dipilih pada tampilan halaman Muka. Halaman ini, akan menampilkan peta jalan di DIY, apabila menu jalan dalam list diklik maka akan tampil jalan yang dimaksud dengan perbesaran dan lokasi yang dimaksud akan berkedip(blink), serta informasi akan muncul. Dalam hal ini informasi yang akan ditampilkan adalah nama, id, panjang, lebar, status kelas, fungsi, dan kondisi jalan.
PETA JALAN DI DAERAH ISTIMEWA YOGYAKARTA
muka peta buku tamu PETA LIST
JALAN
Gambar 3.6. Rancangan Halaman Peta
3.2.3.1.3.Rancangan Halaman Buku Tamu
PETA JALAN DI DAERAH ISTIMEWA YOGYAKARTA
muka
Pada sistem ini juga disediakan buku tamu untuk user, sehingga bagi user yang masuk ke website ini maka user dapat mengisi buku tamu yang telah disediakan. Halaman buku tamu dirancang untuk user yang akan memberikan komentarnya mengenai situs ini. User juga dapat melihat halaman konfirmasi yang menyatakan bahwa komentar user sudah diterima. Rancangan halaman buku tamu seperti pada gambar 3.7.
peta buku tamu Buku Tamu Nama : Alamat : E-mail : Pesan : Lihat BukuTamu Kirim
3.2.3.2.Rancangan Antar Muka Administrator
Pada rancangan halaman administrator terdapat beberapa menu pilihan untuk mengupdate data. Adapun rancangan struktur menu admin seperti pada gambar 3.8.
Administrator Login Menu Administrator Muka Update Buku Tamu Keluar Update Info
Gambar 3.8. Hubungan Menu Utama Admin
3.2.3.2.1.Rancangan Tampilan Menu Admin
Rancangan tampilan menu admin terdapat beberapa pilihan menu untuk mengupdate data. Fasilitas-fasilitas untuk
update data adalah edit untuk merubah data yang ada di
database dan hapus data.
1. Rancangan Halaman Login Admin
Sebelum admin melakukan update data, admin harus login
terlebih dahulu dengan memasukkan username dan
password. Jika admin salah memasukkan username dan
password, maka akan muncul pesan kesalahan, dan jika benar, setelah mengklik login maka akan muncul halaman utama admin.
Login
Administrator
Isi username dan password anda Username :
Password :
Gambar 3.9. Rancangan Login Admin.
PETA JALAN DI DAERAH ISTIMEWA YOGYAKARTA
muka update info buku tamu logout
PETA STATIS
OK
Silahkan Ulangi username dan password salah
Gambar 3.10. Rancangan Halaman Konfirmasi Login