Tutorial HTML, CSS dan Javascript

Postingan

Menampilkan postingan dari Maret, 2018

Rancangan Sistem Login

- Maret 27, 2018

Gambar Form Login Pada kesempatan ini saya akan membagikan tentang bagaimana untuk membuat rancangan login untuk postingan sebelumnya . Rancangan yang akan dibuat yaitu algoritma, pseudocode, dan flowchart. Langsung saja berikut ini alur algoritma dalam rancangan login yang akan dibuat. 1. Masukkan alamat email dan password pada form di dalam input. 2. Kemudian klik pada tombol bertuliskan LOGIN. 3. Lalu sistem akan mengecek data yang telah diinputkan. 4. Jika data yang diinputkan sama dengan data yang berada di dalam database, maka akan dialihkan ke halaman utama. 5. Apabila data yang diinputkan tidak sama dengan data yang ada maka akan ada pemberitahuan bahwa email dan atau password salah. 6. Kembali ke halaman login untuk memasukkan email dan password kembali. 7. Jika terjadi kesalahan dalam memasukkan email dan password lebih dari tiga kali, maka otomatis akan diblokir. 8. Jika benar maka akan langsung menuju halaman menu utama. Kemudian untuk pseudocoden...

Baca selengkapnya

Membuat Form Registrasi dengan Modal Bootstrap 4

- Maret 12, 2018

Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana menggunakan Modal dari Bootstrap 4 untuk membuat sebuah form yang akan digunakan untuk proses registrasi user. Bahan dan alat yang diperlukan sama seperti pada tutorial sebelumnya yaitu, 1. Text Editor. Misalnya Notepad, Notepad++, Sublime Text Editor dan sebagainya. 2. Browser. Saya rekomendasikan menggunakan Google Chrome untuk hasil yang lebih baik. 3. XAMPP atau WAMPP. 4. Bootstrap 4. Pada tutorial ini saya sarankan untuk membuat sebuah form login seperti pada tutorial sebelumnya untuk mempermudah dalam memahami syntax yang nantinya akan ditulis. Jika alat, bahan dan kebutuhan lain sudah siap maka langsung saja kita coba. Pertama buka file index.php yang berada di dalam folder login. Kemudian tuliskan syntax berikut pada bagian dalam tag head. <head> <meta charset= "UTF-8" > <title> LOGIN </title>  ...

Baca selengkapnya

Membuat Form Login dengan Bantuan Bootstrap 4

- Maret 12, 2018

Pada kesempatan kali ini, saya akan memberikan sebuah tutorial yaitu bagaimana membuat sebuah form login dengan mudah menggunakan bantuan dari Bootstrap. Apa itu Bootstrap? Bagaimana cara menggunakannya? Bagi yang sering melakukan aktifitas scripting program web, Bootstrap bukanlah suatu hal baru lagi. Tetapi bagi para pemula, mungkin untuk pertama kalinya akan merasa bingung dan kesulitan dalam menggunakannya. Bootstrap sendiri merupakan sebuah CSS Framework yang dibuat oleh salah satu situs sosial media yaitu Twitter. Lalu apa arti dari CSS Framework? Apakah berbeda dengan CSS biasa? Jawabannya yaitu CSS Framework merupakan salah satu sarana yang digunakan untuk mempermudah dalam proses mendesain sebuah tampilan web menggunakan CSS sehingga tidak memerlukan waktu yang lama. Tidak perlu berbasa-basi lagi, berikut alat-alat dan bahan yang diperlukan: 1. Text Editor. Saya sarankan menggunakan Notepad, Notepad++, atau Sublime. 2. Browser. Sebagai compiler untuk menjalank...

Baca selengkapnya

Layouts HTML5

- Maret 04, 2018

Pada versi HTML5, telah dikembangkan beberapa tag yang bertujuan untuk mempermudah pengguna dalam mengatur dan menyusun tata letak komponen pada halaman webnya. Sebelum munculnya penggunaan tag tersebut, banyak tampilan halaman web berwujud seperti koran. Tidak bergitu teratur tata letaknya dan tidak menarik untuk dilihat pembaca. Tag HTML5 yang berkaitan dengan layouts atau tata letak antara lain, 1. <header> 2. <nav> 3. <section> 4. <article> 5. <aside> 6. <footer> 7. <details> Setiap tag mempunyai kegunaan seperti yang dijelaskan pada artikel Semantic Elements HTML5 . Berikut penerapan tag HTML5 pada bagian layouts atau tampilan. Catatan: Untuk melihat hasil dari program tersebut, silahkan klik pada bagian RESULT.

Baca selengkapnya

File Paths HTML5

- Maret 04, 2018

Apakah yang dimaksud dengan File Paths? File Paths merupakan salah satu atribut pada tag HTML5 yang berguna untuk mengarahkan atau memanggil file berupa gambar, dokumen, URL dan sebagainya. Berikut ini adalah beberapa penerapan atribut file paths pada tag HTML5. 1. Absolute File Paths Untuk memanggil sebuah file atau URL di internet. Bentuk penulisannya yaitu, <img src="https://www.hypertutorial.com/images/picture.png"> Keterangan: <img>, tag HTML5 untuk membuat tampilan berupa gambar. src="alamat website", atribut HTML5 untuk mengakses suatu file dari sumbernya. 2. Relative File Paths Untuk memanggil sebuah file pada directory dimana dokumen HTML5 itu berada. Bentuk penulisannya yaitu, a.) <img src="/images/picture.png"> b.) <img src="images/picture.png"> c.) <img src="../images/picture.png"...

Baca selengkapnya

Semantic Elements HTML5

- Maret 03, 2018

Semantic Elements memiliki makna dari dua sisi yaitu Browser dan Pengembang. Maksudnya adalah bahwa Browser akan menjalankan perintah dari Pengembang melalui elemen yang dituliskan kedalam baris program. Contoh: Non-Semantic Elements : <div> </div> dan <span> </span>. Tidak memberikan informasi mengenai kegunaannya di dalam program sebelum diberikan inisialisasi berupa id, class, name dan sebagainya. Semantic Elements : <form>, <table> dan <article>. Memberikan informasi dengan jelas tentang kegunaan dari elemen tersebut sesuai dengan namanya. Berikut ini merupakan macam-macam elemen baru pada HTML5. <article> . Tag ini digunakan untuk menuliskan artikel di dalamnya. <aside> . Tag ini digunakan untuk mendefinisikan konten yang ada di dalamnya. <details> . Tag ini digunakan untuk menambahkan suatu rincian yang dapat dilihat atau disembunyikan sesuai dengan perintahnya. <figcaption> . Tag ini digunakan un...

Baca selengkapnya