Membuat Form Login dengan menggunakan CSS atau langsung menggunakan Bootstrap

Hello people..

       Pada Tutorial Bootstrap ini akan dijelaskan tentang pengertian dan cara menggunakan bootstrap. Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembanganfront-end website. Bootstrap merupakan salah satu framework HTML, CSS dan javascrip yang paling populer di kalangan web developer.

Tentu anda bertanya-tanya kenapa sangat banyak yang telah menggunakan bootstrap dalam pengembangan website. Berikut akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootstarp, adapun beberapa kelebihan bootstrap adalah sebagai berikut.

• Penggunaan bootstrap sangat menghemat waktu
• Tampilan bootstrap yang sudah cukup terlihat modern
• Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootsrap sudah mendukung segala jenis resolusi,baik itu pc, laptop, tablet dan smartphone
• sangat ringan karena bootstrap dibuat dengan sangat terstruktur

Oke kita langsung saja ya dengan tutorialnyaa,,

Untuk cara menggunakan bootstrap yang pertama kali yang harus anda lakukan adalah melakukan instalasi/ anda dapat mengunduh mendownload lagsung bootstrap pada website resminya di https://getbootstrap.com/docs/4.0/getting-started/download/

• Pastikan XAMPP dinyalakan telebih dahulu kemudian klik tombol start pada Apache dan MySql Ohh iyaa lupa menyampaikan disini saya memakai aplikasi bernama Atom,

• kemudian buka directori htdocs di didalam file xampp, buat file baru/new document terserah ingin dinamai apaa kalau saya pribadi tugas2paksuyud 😛

• Buatlah folder lagi didalam folder yang sudah kalian bikin tadi, Extract bootstrap yang sudah di downloa tadi kemudian pindahkan folder css, js, dan fonts ke folder assets.

• buka Aplikasi Atom nya kemudian buat lah folder seperti gambar dibawah 

•  buka login.php dan isikan dengan script berikut,

• nah sekarang kita buat file index.php dan isi dengan script berikut.

Didalam file index.php terdapat fungsi pengkondisian if yang akan mengecek apakah user sudah login atau belum dengan 

if ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' ) {

• Pada Langkah selanjutnya saya akan membat fungsi cek login dengan membuat file check-login.php. disini saya menggunakan php mysqll prepare statement yang mana prepare statement ini diklaim cukup ampuh dalam menahan SQL injection dan kita akan menambahkan hash md5 untuk meningkatka keamanan password. berikut scriptnya:
  
  
  
  

• Langkah berikutnya fungsi check-login.php diatas tidak akan berfungsi sebelum ada perintah koneksi ke database. lhoh kenapa ?😯  karena dalam fungsi check-login.php kita perlu mencocokkan data user yang dimasukkan atau inputkan saat login dengan data yang berada didalam database dalam hal ini adalah ini user name dan password. Jadi kita perlu membuat file koneksi dengan menuliskan script berikut pada file config.php agar bisa berinteraksi dengan database.

• kalian buka localhost/phpmyadmin buat database baru dengan nama database yang dibutuhkan yaitu bootstrap 

• setelah membuat database nya kita lanjutkan ke step berikutnya, buat file index.php didalam folder on-admin dan isi dengan script berikut,
  

• dapat kita lihat bersama bahwa dihalaman admin maupun member terdapat tombol logoutkan nah dilangkah ini saya akan membuat script logout. jangan lupa setelah menuliskan script jangan lupa disimpan yahhh agar tidak hilang ditelan bumii..😜

• Nah terakhir kita akan mengubah  tampilan halaman login agar lebih bagus tanpa bahkan script css pada file style.css di assets/css dan tuliskan scriptnya,
  
  
  
  

Okelah demekian sekian dengan tutorial membuat from login menggunakan bootstrap.
Untuk user password

1. Username : admin
2. Passwordnya : admin

Beginilah cuplikan web nyaa sebagai berikut:

Sekian dan Terima kasih sebelumnya, semoga bermanfaat yah gengs 😊😊 !!

Holla guys ...

Pada kali ini saya akan membahas tentang tutorial bagaimana cara membuat website berbasis html dengan menggunakan media notepad++. Kata "website" mungkin sudah tidak asing lagi bagi kita para pengguna Internet. Website atau sering juga disingkat dengan sebutan Web adalah sebuah halaman yang berisi informasi yang dapat diakses melalui jaringan Internet di seluruh dunia.

Seiring meningkatnya pengguna Internet, semakin banyak juga orang yang membuat situs websitenya sendiri. Nah, sebenarnya untuk membangun sebuah halaman web itu dapat dilakukan dengan menggunakan aplikasi notepad ataupun notepad++ yang berbasis pada tag HTML (HyperText Markup Language). Tag HTML inilah yang dapat merancang tampilan halaman web itu sendiri. Lalu, apa sajakah elemen-elemen dasar HTML yang digunakan untuk membuat sebuah web? simak penjelasan berikut ini.

Tag Dasar HTML

• <html> </html>    : Jenis Dokumen 
• <head> </head>   : Bagian Header atau Atas Web. 
• <title> </title>       : Judul Halaman Web. 
• <body> </body>  : Bagian Body atau Isi Web.

Berikut ini adalah contoh Tag HTML yang paling dasar untuk membuat sebuah halaman web:

Setelah Anda mengetahui dan mempelajari fungsi dari masing-masing tag dasar HTML, maka langkah selanjutnya Anda bisa mengaplikasikannya langsung untuk membuat website berbasis HTML dengan menggunakan aplikasi Notepad++.

Langkah-Langkahnyaa:

1. Pertama-tama buka aplikasi Notepad++, jika Anda belum punya aplikasinya terlebih dahulu anda mendownloadnya dan menginstalnya yahh..

2. Setelah dibuka atau setelah selesai mengintalnya, kalian bisa mngikuti syntak dibawah ini untuk belajar ya bukan untuk di copass lho!😅

Ket:
<body bgcolor='white' text='red'> : Warna latar dan teks.<h1></h1> : Tag Heading, selain itu ada juga h2, h3, h4, h5 dan h6. 

3. Jika sudah selesai, simpan file tersebut dalam format (.html), caranya klik menu File >> Save As >> Beri nama file >> Rubah format (.txt) menjadi (.html) >> Klik Save. Perhatikan gambar di bawah ini.

4. Sekarang bisa dilihat hasilnya dengan membuka file melalui browser seperti Mozilla Firefox, Google Chrome, UC Browser, atau yang lainnya yaa terserah yang penting ada aplikasi yang buat searching.

Langkah di atas merupakan cara yang sederhana dalam membangun halaman web, Anda pun bisa mengkreasikan tampilan halaman web Anda dengan menggunakan tag HTML pendukung lainnya.

5. Jika Ingin membuat tabel begini source codenya,,

outputnya seperti dibawah,

Langkah di atas merupakan cara yang sederhana dalam membangun halaman web, Anda pun bisa mengkreasikan tampilan halaman web Anda dengan menggunakan tag HTML pendukung lainnya.



Berikut Contoh Tag HTML-nya:

Ket :

§  <body bgcolor='white' text='red'> : Warna latar dan teks.

§  <center> </center> : membuat konten berada di tengah.

§  <font face=comic size=6 color=red> : mengubah tampilan, ukuran dan warna teks.

§  <b> </b> : agar teks menjadi tebal.

§  <i> </i> : agar teks menjadi miring.

§  <u> </u> : menggaris-bawahi teks.

§  <marquee scrollamount=15>Share ilmu yanng bermanfaat</marquee> : membuat konten (menjadi bergerak. Angka 15 adalah kecepatan gerak dari konten, semakin besar angka maka semakin cepat konten bergerak.

§  <hr> : membuat garis horizontal.

§  <br> : membuat baris baru atau enter.

§  <p> </p> : membuat paragraf baru.

§  <li> </li> : membuat list atau daftar.

Dan berikut hasilnya:

Demikian tutorial tentang bagaimana cara membuat sebuah halaman web berbasis HTML  dengan menggunakan aplikasi Notepad++, cara ini masih terbilang sederhana karena belum ada pengaturan layout atau tata letak seperti yang ada pada website atau blog pada umumnya. Namun tidak salah jika kita pelajari teknik dasarnya dahulu dalam membuat website berbasis HTML.

Sekian dan Terima kasih sebelumnya, semoga bermanfaat yah gengs 😊😊 !!