Memahami Dasar Jaringan dan Membuat Html

 Membuat Form Login sederhana dengan 

PHP dan Memahami Dasar Jaringan


    Tahukah kamu secara umum, Apache dan MySQL sering digunakan bersama-sama dalam pengembangan web. Apache berperan sebagai server web untuk menyajikan halaman web, sementara MySQL menyimpan dan mengelola data yang dibutuhkan oleh aplikasi web tersebut. Kombinasi keduanya (dengan tambahan bahasa pemrograman seperti PHP, Python, atau Perl) sering disebut sebagai "LAMP stack" dalam dunia pengembangan we

Apache di XAMPP:

Peran: Apache dalam XAMPP berfungsi sebagai server web lokal.

Fungsi Utama: Menangani permintaan HTTP, menyajikan halaman web, dan mendukung berbagai fitur web, seperti otentikasi, enkripsi, serta eksekusi skrip PHP.

MySQL di XAMPP:

Peran: MySQL dalam XAMPP berfungsi sebagai sistem manajemen basis data relasional lokal.

Fungsi Utama: Menyediakan tempat untuk menyimpan dan mengelola data dalam basis data. MySQL memungkinkan pengguna untuk membuat, mengelola, dan memanipulasi tabel dan relasi antar tabel menggunakan bahasa SQL.

1. Aktifkan Apache dan MySQL di XAMPP

Pertama tama buka XAMPP Control Panel kemudian klik tombol "Start" di sebelah Apache dan MySQL untuk mengaktifkan kedua layanan tersebut.

2. Pastikan Terhubung dengan Internet Dahulu

Pastikan komputer terhubung ke internet untuk mendownload beberapa sumber dan kamu juga bisa mengecek pada control panel langsung.


3. Cek IP Address Koneksi Internet dan Ping IP

Buka Command Prompt (Windows) Ketik ipconfig untuk mengetahui IP Address kamu. kemudian lakukan ping ke alamat IP untuk memastikan koneksi internet telah mencapai alamat IP tersebut.


4. Membuat Folder dan File

Buka direktori htdocs di dalam folder instalasi XAMPP kamu (misalnya, C:\xampp\htdocs\Lida). Di mana di dalam folder blog ini digunakan untuk menyimpan source code yang di buat dua file: index.php dan proses.php.

5. Source Code index.php

  • <html>: Menandakan awal dari dokumen HTML.
  • <head>: Menyediakan informasi tentang dokumen, seperti judul halaman.•<title>: Menentukan judul halaman yang akan ditampilkan di bilah judul atau tab browser.
  • <body>: Berisi konten utama dokumen HTML.
  • <center>: Menengahkan elemen-elemen di dalamnya secara horizontal.
  • <H1>: Menandakan teks berukuran besar (Heading 1) dan menampilkan teks "Halaman Login".
  • METHOD="GET": Menentukan metode pengiriman data formulir, dalam hal ini menggunakan metode GET.
  • ACTION="proses.php": Menentukan lokasi (URL) tempat formulir akan mengirimkan data. Dalam hal ini, data akan dikirimkan ke file proses.php.
  • <input>: Mendefinisikan elemen input.
  • TYPE="TEXT": Membuat kolom input teks untuk memasukkan nama pengguna.
  • NAME="nama": Memberikan nama (identifier) untuk elemen input.
  • PLACEHOLDER="NAMA PENGGUNA": Menampilkan teks placeholder di dalam kolom input.
  • <input>: Elemen input kedua.
  • TYPE="PASSWORD": Membuat kolom input sandi (password).
  • NAME="sandi": Memberikan nama (identifier) untuk elemen input.
  • PLACEHOLDER="SANDI PENGGUNA": Menampilkan teks placeholder di dalam kolom input.
  • <input>: Elemen input ketiga.
  • TYPE="SUBMIT": Membuat tombol submit untuk mengirimkan formulir.
  • VALUE="KIRIM": Menampilkan teks "KIRIM" pada tombol submit.
  • </form>: Menutup tag formulir.
  • </center>: Menutup tag untuk menengahkan elemen di dalamnya secara horizontal.
  • </body>: Menutup tag body.
  • </html>: Menutup tag html.

6. Source Code proses.php

  • $namakiriman: Membuat variabel untuk menyimpan nilai yang diterima dari parameter GET dengan nama "nama".
  • $sandikiriman: Membuat variabel untuk menyimpan nilai yang diterima dari parameter GET dengan nama "sandi".
  • $_GET["nama"]: Mengambil nilai yang dikirimkan dengan metode GET dan disimpan dalam variabel $namakiriman.
  • $_GET["sandi"]: Mengambil nilai yang dikirimkan dengan metode GET dan disimpan dalam variabel $sandikiriman.
  • echo "<h1> Nama Kamu : ".$namakiriman."<br>"."Sandi Kamu : ".$sandikiriman."</h1>";: Mencetak hasil dengan menggunakan tag HTML <h1>. Menampilkan nilai yang diterima dari formulir, yaitu nama pengguna dan sandi.
  • "<h1> Nama Kamu : ".$namakiriman."<br>"."Sandi Kamu : ".$sandikiriman."</h1>": Menggabungkan teks statis dengan nilai variabel untuk ditampilkan. Dalam hal ini, menampilkan teks "Nama Kamu :" diikuti dengan nilai variabel $namakiriman, dan "Sandi Kamu :" diikuti dengan nilai variabel $sandikiriman.

7. Cek Form Login

Buka browser dan akses http://localhost/blog. Pastikan formulir login ditampilkan dengan benar.


8. Hasil Login

Isi formulir login dengan username "Lidia" dan password "rahasia" Submit formulir dan lihat hasilnya.

Pastikan untuk menyesuaikan kode sesuai dengan kebutuhan proyek kamu, seperti dengan menambahkan keamanan, manajemen sesi, atau menghubungkan ke database untuk autentikasi yang lebih aman.Terimakasih




Komentar

Posting Komentar