Form Login pada WEB

Pada pertemuan kali ini, saya akan membuat form login yang mana biasanya form ini dibuat untuk mengakses suatu laman tertentu agar laman tersebut aman dari pengguna yang tidak berkepentingan.Sebelumnya pada pembuatan form login yang saya buat ini merupakan form login sederhana yang nantinya akan dibuat pada halaman web. Berikut adalah syntaks html form login sederhana yang telah dibuat untuk dapat ditampilkan pada laman web.

Pada gambar diatas dimana pada bagian ini terdapat syntaks untuk pembuatan border atau tabel pembuatan form login, dimana bagian background tabel berwarna biru. Selanjutnya pada bagian ini pula terdapat script yaitu java script, dimana java script ini digunakan untuk pembuatan variabel username dan password yang digunakan pada form login.

Pada pembuatan script disini, tipe script yang digunakan sangat sensitive dimana masing masing karakter harus sesuai dengan apa yang divariabelkan, baik besar kecilnya huruf yang digunakan. Misalkan pada variabel username yang didefinisikan yaitu “Asep”, jika menggunakan username asep maka login tidak dapat berhasil dilakukan, karena huruf a yang digunakan tidak besar karena case yang digunakan sensitive jadi harus sama dengan apa yang didefinisikan sebelumnya oleh variabel tersebut.

Pada gambar ini juga terdapat pesan atau alert dimana jika berhasil masuk dengan akun dan password yang benar maka akan tampil alert “silahkan login”. Sedangkan jika gagal login maka akan tampil alert “akun atau password tidak valid”. Selanjutnya pembuatan tabel pada body laman web dimana pada bagian ini terdapat menu username dan password seperti pada gambar berikutnya yang merupakan lanjutan dari gambar sebelumnya.

Pada gambar kedua ini, terdapat bagian untuk pembuatan button username dan password dimana pada form login ini username yang digunakan berupa text sedangkan password yang digunakan berupa text maupun angka dengan sesuai yang telah didefinisikan oleh password sebelumnya.

Selanjutnya pada button login disini berupa type inputan submit dan sedangkan pada button lupa password disini berupa type inputan reset, dimana jika menekan button lupa password maka username dan password yang digunakan akan direset dan kembali kosong untuk diisi dengan username dan password yang baru.

Berikut adalah tampilan yang dihasilkan jika menginput username dan password dengan benar, yaitu dengan mengisi username “Asep” dan mengisi password “qwerty’.

Setelah gambar diatas adalah tampilan bila berhasil login dengan mengisi username dan password dengan benar, berikut adalah tampilan jika mengisi username dan password tidak sesuai apa yang sebelumnya telah didefinisikan.

Sekian penjelasan saya tentang pembuatan menu login pada halaman web secara sederhana, semoga dapat bermanfaat untuk yang membutuhkannya.

Penggunaan Link pada WEB

Pada pertemuan kali ini, saya akan mempraktekkan cara penggunaan link dan menambahkan  link pada contoh web yang telah dibuat. Pada contoh tampilan web disini, sebelumnya saya telah membuat tampilan awal laman web secara sederhana dengan bertemakan pariwisata dan budaya yang ada di Indonesia. Berikut adalah contoh syntaks html sederhana yang telah dibuat untuk menghasilkan laman web pariwisata sederhana.

Pada gambar pertama, terdapat beberapa garis yang menandai keterangan yang terdapat pada gambar, yaitu pada bagian pertama menjelaskan tentang title atau judul yang akan tampil pada halaman web yang telah dibuat. Pada bagian kedua yaitu header, dimana pada bagian header ini akan menampilkan teks bertuliskan budaya dan pariwisata indonesia dengan ukuran teks 18, dengan warna teks putih dan letak teks tersebut berada di tengah pada bagian header dari suatu laman web yang telah dibuat.

Pada keterangan ketiga yang menandai gambar tersebut, dimana keterangan ini digunakan untuk membuat suatu kolom kecil yang terletak pada bagian kiri dari suatu halaman web yang dibuat. Dimana pada kolom kecil tersebut terdapat beberapa menu, yaitu menu home, menu profile, menu budaya dan menu pariwisata seperti yang terlihat pada tampilan web yang telah dibuat. Selanjutnya pada kolom kecil sebelah kiri tersebut terdapat keterangan yang menandai penggunaan link yang akan digunakan, dimana pada bagian ini link akan digunakan pada menu home dan menu profile. Untuk penggunaan link cukup menambahkan <a> yang diikuti dengan tujuan link tersebut mengacu kemana, seperti contoh berikut ini <a href="pertemuan 2.html"> kemudian diakhiri dengan </a>. Pada gambar pertama, syntaks pembuatan laman web terpotong dan berikut adalah lanjutan dari potongan syntaks yang terpotong pada gambar pertama.

Pada gambar kedua ini merupakan lanjutan dari syntaks html pembuatan laman web yang digunakan, dimana pada gambar ini terdapat penggunaan fitur link, namun pada penggunaan fitur link disini yang terdapat pada bagian footer, dimana pada link tersebut tidak dilakukan tujuan kemana link dari bagian tersebut, hanya saja membuat bagian yang diinginkan terlihat dapat seperti dilakukan pengelinkan yang akan dituju.

Selanjutnya setelah pembuatan syntaks html, kemudian untuk mempercantik tampilan laman web yang sederhana itu, kita dapat melakukannya dengan penggunaan css, dimana css disini berfungsi untuk membuat tampilan web menjadi lebih indah dan hidup. Berikut adalah contoh penggunaan syntaks css yang dipergunakan untuk membuat tampilan halaman web pariwisata dan budaya Indonesia menjadi lebih indah dan bagus.

Pada syntaks css tersebut terdapat beberapa penggunaan untuk memperbaiki atau bahkan memperindah tampilan halaman web yang dibuat. Pada bagian body ada penambahan background yang digunakan pada tampilan web tersebut. Kemudian pada bagian header terdapat pengaturan yang membuat tampilan header dimana background header berwarna biru dengan ukuran header sebesar 100pixel kemudian untuk jenis tulisan pada header bertipe verdana sedangkan warna tulisan pada header akan berwarna putih.

Selanjutnya pada bagian main content, dimana pada bagian ini digunakan untuk pegaturan jenis dan ukuran kolom yang dibuat sesuai dengan keinginan, seperti pengaturan besar dan panjangnya kolom yang digunakan, background judul colom yang dibuat, layar belakang bagian kolom yang dibuat bahkan sampai jenis tulisan yang akan dimuat pada bagian kolom tersebut. Selanjutnya pada bagian footer dibuatlah semacam border atau tabel yang akan menjadi landasan dari footer tersebut, disini juga terdapat pengaturan background dari suatu footer dimana penggunaan warna background dilakukan dengan menggunakan kode warna, namun juga dapat dilakukan dengan cara menuliskan langsung warnanya seperti pada penggunaan background untuk kolom pada bagian main content.

Kemudian, setelah pembuatan file .css selesai dilakukan, maka simpan file tersebut dalam satu folder bersamaan dengan file .html. Jika sudah selesai semua, maka berikut adalah contoh tampilan sederhana halaman web pariwisata dan budaya yang telah berhasil dibuat.

Pada gambar diatas, merupakan contoh tampilan dasar seerhana halaman web yang telah berhasil dibuat. Pada menu kolom sebelah kiri pada halaman home terdapat beberapa menu yang ada didalam kolom tersebut, seperti menu profile, pariwisata dan menu budaya. Pada ketiga menu tersebut terdapat beberapa menu yang telah dilakukan penambahan link, seperti pada menu home dan menu profile, sedangkan pada menu pariwisata dan budaya belum dilakukan penambahan fitur link pada menu tersebut.

Pada menu profile bila dilakukan pengelinkan, maka akan menuju halaman web yang ditampilkan berikutnya, sebagai contoh menu profile kita pilih maka selanjutnya akan menampilkan menu profile, seperti pada gambar dibawah ini. Dan selanjutnya hanya manambahkan isi dan bagian bagian yang diinginkan pada tampilan halaman web berikutnya.

Sekian penjelasan saya tentang penggunaan link pada halaman web secara sederhana, semoga ddapat bermanfaat untuk yang membutuhkannya.