PHP membutuhkan server untuk menjalankan kodenya. Salah satu tool yang paling populer untuk membuat server lokal adalah XAMPP<\/strong>, yang menyediakan Apache<\/a> untuk web server dan MySQL<\/a> untuk database.<\/p> Anda bisa mendownload XAMPP di website resminya<\/a>, lalu menginstalnya di perangkat Anda sesuai sistem operasi yang digunakan. Apabila memerlukan panduan lebih lanjut, silakan baca artikel kami tentang cara menginstal XAMPP<\/a>.<\/p> 2. Siapkan Aplikasi Editor Kode<\/strong><\/p> Anda memerlukan editor kode untuk menulis file PHP. Beberapa editor yang direkomendasikan adalah:<\/p> Anda bisa mendownload software tersebut melalui website resminya masing-masing.<\/p> 3. Buat Folder Proyek Website<\/strong><\/p> Semua file PHP yang akan Anda jalankan di server lokal harus disimpan di dalam folder bernama htdocs<\/strong>. Folder ini terletak di direktori XAMPP, biasanya dengan path C:\\xampp\\htdocs<\/strong> di Windows atau \/Applications\/XAMPP\/htdocs<\/strong> di macOS dan Linux.<\/p> Buat folder baru untuk proyek Anda, lalu beri nama yang jelas dan mudah diingat, seperti website-php<\/strong>.<\/p> Setelah semua langkah persiapan di atas selesai, Anda bisa melanjutkan ke tahap berikutnya di bagian ini untuk mulai membuat website PHP.<\/p> Pertama, Anda perlu membuat halaman utama website. Halaman ini biasanya dibuat dengan file bernama index.php<\/strong>, yang akan dimuat secara otomatis saat alamat website diakses di browser.<\/p> Untuk membuat file ini, buka aplikasi editor kode Anda lalu buat file baru dengan nama index.php<\/strong>. Simpan file ini di folder proyek website yang sudah Anda buat dalam direktori htdocs<\/strong>.<\/p> Setelah itu, buka file index.php<\/strong> Anda dan sisipkan kode berikut:<\/p> Penjelasan kode di atas adalah sebagai berikut:<\/p> Setelah menambahkan kode di atas, simpan file Anda. Pastikan XAMPP sudah berjalan, lalu buka web browser dan akses URL http:\/\/localhost\/nama_folder_proyek\/index.php<\/strong> untuk menampilkan halaman yang sudah Anda buat.<\/p> Agar tampilan website lebih menarik, tambahkan style menggunakan file CSS eksternal. Anda bisa menambahkan aturan untuk menyesuaikan warna, font, dan tata letak halaman website dalam file ini.<\/p> Untuk membuat file CSS, buka aplikasi editor kode lalu buat file dengan nama style.css<\/strong>. Simpan file ini di folder yang sama dengan file index.php<\/strong> yang tadi sudah Anda buat.<\/p> Sisipkan kode berikut ini ke file CSS untuk memberikan gaya secara umum pada halaman website yang akan Anda buat:<\/p> Nantinya, Anda perlu menghubungkan file stylesheet ini ke halaman-halaman website yang Anda buat dengan menambahkan tag <link><\/strong> di bagian <head><\/strong>.<\/p> Sekarang Anda bisa lanjut membuat halaman lain, lalu menyempurnakan tampilannya dengan mengedit file style.css<\/strong> untuk menambahkan style sesuai kebutuhan halaman.<\/p> Agar website bisa berfungsi dengan baik dan menyediakan fitur yang dibutuhkan pengguna, Anda perlu membuat beberapa halaman penting. Setiap halaman ini akan membantu menghadirkan pengalaman pengguna yang lebih optimal di website Anda.<\/p> Di bagian ini, kami akan memandu Anda membuat halaman yang sebaiknya ditambahkan ke website, lengkap dengan contoh kodenya.<\/p> 1. Homepage<\/strong><\/p> Di halaman ini, Anda bisa menambahkan menu navigasi website<\/a> untuk mengarahkan pengunjung ke halaman lainnya, serta menampilkan deskripsi website.<\/p> Anda bisa menyatukan halaman homepage<\/strong> dalam file index.php<\/strong> saja apabila hanya ingin membuat website PHP sederhana. Dengan begitu, saat pengunjung mengakses website Anda, mereka akan langsung diarahkan ke homepage.<\/p> Buka file index.php<\/strong> Anda, lalu tambahkan kode HTML<\/a> berikut ke dalamnya:<\/p> Kode di atas menyertakan tag <nav><\/strong> yang berfungsi untuk membuat menu navigasi agar homepage terhubung dengan halaman lain, seperti Tentang Saya<\/strong>, Kontak<\/strong>, dan Login<\/strong>. Dengan navigasi ini, pengunjung bisa beralih ke halaman lain dengan mudah.<\/p> Kemudian, terdapat tag <section><\/strong> yang memuat heading utama dan paragraf deskripsi. Anda bisa mengganti teks ini sesuai kebutuhan, misalnya untuk menambahkan slogan atau deskripsi layanan yang Anda sediakan.<\/p> \n\n\n Pastikan Anda sudah menyiapkan semua file yang dirujuk di menu navigasi, seperti about.php<\/strong> dan contact.php<\/strong>. Kalau tidak, link di homepage Anda akan mengarah ke halaman kosong atau menampilkan error.<\/p>\n <\/div>\n\n\n\n<\/p> Untuk mempercantik tampilan halaman, tambahkan kode berikut ini ke file style.css<\/strong> di bawah kode pertama tadi:<\/p> Berikut tampilannya setelah halaman ini diberi style melalui CSS:<\/p> 2. Halaman Tentang Saya<\/strong><\/p> Halaman Tentang Saya<\/a> membantu memberikan sentuhan yang lebih personal pada website. Halaman ini bisa digunakan untuk memperkenalkan diri Anda atau kisah yang menginspirasi Anda membuat website ini. <\/p> Siapkan halaman dengan membuat file baru bernama about.php<\/strong>. Tambahkan kode berikut untuk mengisi kontennya:<\/p> Selain itu, Anda bisa menambahkan foto diri menggunakan tag <img><\/strong> agar halaman ini terlihat lebih menarik. Berikut contoh kodenya, yang bisa Anda sisipkan di dalam tag <body><\/strong>:<\/p> Pastikan file gambar disimpan di folder proyek website Anda dan dirujuk dengan benar dalam kode. Pada contoh di atas, file gambar kami diletakkan di folder tambahan bernama images<\/strong>, dan diberi nama gambar.jpg<\/strong>.<\/p> Kemudian, tambahkan kode CSS berikut ke file style.css<\/strong> di bawah kode sebelumnya untuk mempercantik halaman yang sudah Anda buat:<\/p> Tampilannya akan menjadi lebih rapi dan profesional seperti berikut ini:<\/p> 3. Halaman Kontak<\/strong><\/p> Anda perlu menyediakan halaman kontak agar pengunjung bisa mendapatkan informasi lebih lanjut untuk menghubungi Anda.<\/p> Caranya, buat file baru bernama contact.php<\/strong> dan tambahkan kode berikut:<\/p> Formulir ini memiliki tiga kolom input, yaitu nama<\/strong>, email<\/strong>, dan pesan<\/strong>. Setelah itu, sisipkan kode berikut ini ke dalam file style.css<\/strong> Anda untuk mengatur tampilan halaman Kontak:<\/p> Halaman Kontak Anda pun akan terlihat lebih menarik dan fungsional setelah diberi stylesheet, seperti berikut ini:<\/p> 4. Halaman Login<\/strong><\/p> Apabila website Anda menyediakan layanan yang membutuhkan data atau kredensial pengguna, Anda perlu membuat halaman login. Di sini, kami akan membuat formulir login website<\/a> sederhana yang memproses data pengguna dengan validasi statis.<\/p> Mulailah dengan membuat file baru bernama login.php<\/strong> di folder proyek website Anda. Selanjutnya, tambahkan kode berikut ke dalam file tersebut:<\/p> Kode ini akan membuat formulir login dengan dua input, yaitu nama pengguna dan kata sandi. Pada contoh ini, kredensialnya adalah admin<\/strong> untuk nama pengguna, dan 1234<\/strong> untuk kata sandi.<\/p> \n\n\n Penting!<\/strong> Harap diperhatikan bahwa validasi statis dalam kode di atas hanyalah contoh untuk memeriksa kecocokan kombinasi nama pengguna dan kata sandi. Metode ini tidak dianjurkan untuk website sungguhan, karena tidak aman.<\/p><\/div>\n\n\n\n<\/p> Untuk mempercantik tampilannya, masukkan kode CSS berikut ke file style.css<\/strong>, setelah kode halaman Kontak tadi:<\/p> Setelah pengguna mengklik tombol Login<\/strong>, data formulir akan diproses oleh PHP. Apabila validasi berhasil, pesan Login berhasil<\/strong> akan ditampilkan. Kalau tidak, pengguna akan melihat pesan error tentang login yang gagal.<\/p> Dengan menambahkan halaman-halaman ini, website Anda sudah memiliki kerangka dasar yang siap digunakan.<\/p> Setelah ini, Anda bisa melengkapi fitur-fitur website dengan mengedit file CSS untuk menyesuaikan tampilannya, menambahkan validasi yang lebih aman, atau menghubungkan website ke database.<\/p> Website harus dihubungkan ke database kalau Anda berencana mengumpulkan dan mengelola data pengguna melalui formulir website. Dalam hal ini, Anda bisa membuat database dengan MySQL dan membuat koneksi PHP ke database<\/a>.<\/p> Kami akan menjelaskan contoh menyimpan input pengguna dari form Kontak<\/strong> ke database. Berikut langkah-langkahnya:<\/p> Setelah itu, buat halaman baru untuk menampilkan data yang sudah tersimpan. Misalnya, buat file bernama admin.php<\/strong>, lalu tambahkan kode berikut:<\/p> Anda bisa mengakses file tersebut melalui browser untuk melihat data pesan yang masuk. Tampilannya akan seperti ini kalau pesan berhasil terekam dalam database:<\/p> Setelah menyelesaikan langkah-langkah di atas, website Anda pun sudah terhubung ke database untuk menyimpan dan menampilkan data dari pengguna. Jangan lupa untuk menguji setiap fitur guna memastikan semuanya berfungsi baik.<\/p> Anda sudah hampir selesai membuat website dengan PHP! Sekarang, saatnya menjalankan dan menguji website yang sudah disiapkan.<\/p> Pastikan XAMPP sudah berjalan dengan mengaktifkan modul Apache<\/strong> dan MySQL<\/strong>. <\/p> Buka browser Anda, lalu akses website melalui URL seperti http:\/\/localhost\/nama_folder_proyek<\/strong>. Halaman utama website Anda akan terbuka, dan Anda bisa mulai mengecek setiap fiturnya.<\/p> Periksa navigasi website untuk memastikan semua link berfungsi dan mengarah ke halaman yang benar. Pastikan juga tampilan halaman terlihat rapi sesuai dengan style yang telah Anda terapkan.<\/p> Kemudian, uji formulir kontak dan formulir login untuk memastikan data bisa dikirimkan dan diproses dengan benar. Anda juga bisa memverifikasi data dari formulir kontak di phpMyAdmin untuk memastikan informasi tersebut tersimpan di database.<\/p> Apabila ada error, periksa kembali kode PHP, koneksi database, atau file CSS Anda. Setelah semua fitur dipastikan bekerja dengan baik, website Anda pun sudah siap untuk dionlinekan!<\/p> Website Anda sudah siap, berfungsi penuh, dan memiliki desain yang keren. Tentunya sayang kalau hanya bisa diakses secara lokal, kan? Nah, Anda bisa mengonlinekannya agar bisa dikunjungi dari internet.<\/p> Dalam hal ini, Anda perlu mengupload website ke layanan hosting<\/a>. File website Anda nantinya akan disimpan di server yang terhubung ke internet sehingga orang lain bisa mengaksesnya kapan saja.<\/p> Namun, perlu diingat bahwa layanan hosting yang digunakan akan memengaruhi performa website Anda secara keseluruhan. Oleh karena itu, pilihlah layanan hosting yang sesuai dengan kebutuhan website Anda.<\/p> Untuk website PHP yang sudah Anda buat, pilihlah paket hosting yang mendukung PHP dan MySQL agar website Anda bisa berjalan dengan lancar. Tidak perlu bingung mencari, karena Hostinger menyediakan berbagai pilihan paket hosting untuk website PHP Anda.<\/p> Dengan jaminan uptime 99,9%<\/strong>, website Anda akan terus online dan memberikan pengalaman pengguna yang optimal. Selain itu, Anda bisa menikmati hPanel<\/strong>, control panel hosting dari Hostinger yang praktis untuk mengelola website Anda.<\/p>\n
Langkah-Langkah Membuat Website dengan PHP<\/h2>
1. Buat Halaman Utama Website<\/h3>
<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Halaman Utama<\/title>\n<\/head>\n<body>\n <?php\n echo \"<h1>Selamat datang di Hostinger!<\/h1>\";\n ?>\n<\/body>\n<\/html><\/pre>
\n
2. Siapkan File CSS untuk Tampilan Halaman<\/h3>
\/* ----------------------------- *\/\n\/* GAYA UMUM UNTUK SEMUA HALAMAN *\/\n\/* ----------------------------- *\/\n\n\/* Font dasar dan warna latar *\/\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n color: #333; \/* Warna teks abu-abu gelap *\/\n}\n\n\/* Heading utama *\/\nh1 {\n font-size: 2.5rem;\n text-align: center;\n margin-bottom: 20px;\n color: #00796b; \/* Warna hijau segar *\/\n}\n\n\/* Paragraf standar *\/\np {\n font-size: 1.2rem;\n line-height: 1.6;\n margin: 10px auto;\n max-width: 800px;\n text-align: center;\n color: #333; \/* Warna teks abu-abu gelap *\/\n}\n\n\/* Gaya untuk link *\/\na {\n color: #00796b; \/* Warna hijau segar *\/\n text-decoration: none;\n font-weight: bold;\n}\n\na:hover {\n text-decoration: underline; \/* Garis bawah saat hover *\/\n}\n\n\/* Tombol umum *\/\nbutton {\n background-color: #388e3c; \/* Hijau tua *\/\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2e7d32; \/* Hijau lebih gelap saat hover *\/\n}<\/pre>3. Mulai Buat Halaman Lainnya<\/h3>
<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Halaman Utama<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <nav>\n <ul>\n <li><a href=\"about.php\">Tentang Saya<\/a><\/li>\n <li><a href=\"contact.php\">Kontak<\/a><\/li>\n <li><a href=\"login.php\">Login<\/a><\/li>\n <\/ul>\n <\/nav>\n <section>\n <h1>Selamat Datang di Hostinger!<\/h1>\n <p>Website ini dibuat sebagai latihan untuk belajar membuat website menggunakan PHP.<\/p>\n <\/section>\n<\/body>\n<\/html><\/pre>
Tips Berguna<\/h4>\n
\/* ----------------------------- *\/\n\/* GAYA UNTUK HALAMAN INDEX (index.php) *\/\n\/* ----------------------------- *\/\n\n\/* Navigasi *\/\nnav ul {\n list-style: none; \/* Menghapus bullet *\/\n margin: 0;\n padding: 0;\n display: flex; \/* Menjadikan daftar flexbox *\/\n justify-content: center;\n background-color: #333; \/* Latar belakang gelap *\/\n}\n\nnav ul li {\n margin: 0 15px; \/* Jarak antar item *\/\n}\n\nnav ul li a {\n color: white; \/* Teks putih *\/\n text-decoration: none;\n font-size: 1.2rem;\n padding: 10px 15px; \/* Ruang dalam link *\/\n display: block;\n border-radius: 5px;\n transition: background-color 0.3s; \/* Efek hover *\/\n}\n\nnav ul li a:hover {\n background-color: #575757; \/* Latar saat hover *\/\n}\n\n\/* Konten utama *\/\nsection {\n text-align: center;\n margin: 50px auto;\n}\n\nsection h1 {\n color: #00796b; \/* Warna heading hijau segar *\/\n}\n\nsection p {\n color: #004d40; \/* Warna paragraf hijau tua *\/\n}<\/pre>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/homepage-website-php-dengan-menu-navigasi.png\/public\")
<\/figure><\/div><!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Tentang Saya<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <h1>Tentang Saya<\/h1>\n <p>Halo! Saya John Hostinger, web developer pemula yang sedang belajar membuat website PHP. Website ini merupakan contoh proyek pertama saya. Terima kasih sudah berkunjung!<\/p>\n<\/body>\n<\/html><\/pre>
<img src=\"images\/gambar.jpg\" alt=\"Foto Saya\" width=\"200\"><\/pre>
\/* ----------------------------- *\/\n\/* GAYA UNTUK HALAMAN TENTANG SAYA (about.php) *\/\n\/* ----------------------------- *\/\n\n\/* Gaya gambar profil *\/\nimg {\n display: block;\n margin: 20px auto;\n border-radius: 50%;\n width: 150px;\n height: 150px;\n object-fit: cover;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); \/* Efek bayangan *\/\n}<\/pre>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/halaman-tentang-saya-1.png\/public\")
<\/figure><\/div><!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Kontak<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <h1>Let's Connect With Me!<\/h1>\n <form action=\"contact.php\" method=\"POST\">\n <label for=\"name\">Nama:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <br>\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <br>\n <label for=\"message\">Pesan:<\/label>\n <textarea id=\"message\" name=\"message\" required><\/textarea>\n <br>\n <button type=\"submit\" name=\"submit\">Kirim<\/button>\n <\/form>\n<\/body>\n<\/html><\/pre>
\/* ----------------------------- *\/\n\/* GAYA UNTUK HALAMAN KONTAK (contact.php) *\/\n\/* ----------------------------- *\/\n\n\/* Formulir kontak *\/\nform {\n max-width: 500px;\n margin: 50px auto;\n padding: 20px;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); \/* Efek bayangan *\/\n}\n\n\/* Label *\/\nform label {\n display: block;\n text-align: left;\n margin-bottom: 5px;\n font-weight: bold;\n color: #2e7d32; \/* Warna hijau tua *\/\n}\n\n\/* Input dan textarea *\/\nform input,\nform textarea {\n width: 100%; \/* Lebar penuh *\/\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n font-size: 1rem;\n}\n\nform textarea {\n height: 120px;\n resize: none; \/* Nonaktifkan resize *\/\n}\n\n\/* Tombol kirim *\/\nform button {\n width: 100%; \/* Tombol selebar form *\/\n font-size: 1.1rem;\n}\n\nform button:hover {\n background-color: #2e7d32; \/* Hijau lebih gelap saat hover *\/\n}\n\n\/* Pesan konfirmasi *\/\nform p {\n margin-top: 15px;\n font-size: 1rem;\n color: #2e7d32; \/* Warna hijau tua *\/\n}<\/pre>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/formulir-kontak-dengan-pesan.png\/public\")
<\/figure><\/div><!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Login<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <h1>Login<\/h1>\n <form method=\"POST\">\n <label for=\"username\">Nama Pengguna:<\/label>\n <input type=\"text\" id=\"username\" name=\"username\" required>\n <br>\n <label for=\"password\">Kata Sandi:<\/label>\n <input type=\"password\" id=\"password\" name=\"password\" required>\n <br>\n <button type=\"submit\" name=\"submit\">Login<\/button>\n <\/form>\n <?php\n if (isset($_POST['submit'])) {\n $username = $_POST['username'];\n $password = $_POST['password'];\n\n \/\/ Validasi statis\n if ($username === \"admin\" && $password === \"1234\") {\n echo \"<p>Login berhasil. Selamat datang, $username!<\/p>\";\n } else {\n echo \"<p>Login gagal. Periksa nama pengguna dan kata sandi Anda.<\/p>\";\n }\n }\n ?>\n<\/body>\n<\/html><\/pre>\/* ----------------------------- *\/\n\/* GAYA UNTUK HALAMAN LOGIN (login.php) *\/\n\/* ----------------------------- *\/\n\n\/* Tata letak body untuk halaman login *\/\nbody.login-page {\n background-color: #f3e5f5; \/* Latar ungu muda *\/\n display: flex; \/* Menjadikan flexbox *\/\n justify-content: center; \/* Pusatkan secara horizontal *\/\n align-items: center; \/* Pusatkan secara vertikal *\/\n height: 100vh; \/* Tinggi penuh *\/\n padding: 20px;\n}\n\n\/* Form login *\/\nform.login-form {\n max-width: 400px; \/* Lebar form *\/\n width: 100%; \/* Lebar penuh di layar kecil *\/\n padding: 20px;\n background-color: white; \/* Latar putih *\/\n border-radius: 10px; \/* Membulatkan sudut *\/\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); \/* Bayangan lembut *\/\n}\n\n\/* Heading form *\/\nform h1 {\n font-size: 2rem;\n color: #6a1b9a; \/* Warna ungu cerah *\/\n margin-bottom: 20px;\n text-align: center;\n}\n\n\/* Input login *\/\nform input {\n width: 100%; \/* Lebar penuh *\/\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 1rem;\n}\n\n\/* Tombol login *\/\nform button {\n background-color: #8e24aa; \/* Warna ungu cerah *\/\n}\n\nform button:hover {\n background-color: #6a1b9a; \/* Ungu lebih gelap saat hover *\/\n}\n\n\/* Pesan error *\/\nform p.error {\n margin-top: 10px;\n font-size: 1rem;\n color: #d32f2f; \/* Merah untuk error *\/\n text-align: center;\n}\n\n\/* ----------------------------- *\/\n\/* RESPONSIVITAS UNTUK SEMUA HALAMAN *\/\n\/* ----------------------------- *\/\n\n@media (max-width: 600px) {\n form {\n padding: 15px;\n }\n form button {\n font-size: 0.9rem;\n }\n}<\/pre>![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/halaman-login-berhasil.png\/public\")
<\/figure><\/div>4. Hubungkan Website ke Database<\/h3>
\n
CREATE TABLE messages (\n id INT(11) AUTO_INCREMENT PRIMARY KEY,\n name VARCHAR(255) NOT NULL,\n email VARCHAR(255) NOT NULL,\n message TEXT NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);<\/pre>
\n
<?php\n$host = 'localhost';\n$user = 'root';\n$password = '';\n$database = 'contact_form_db';\n\n\/\/ Membuat koneksi\n$conn = mysqli_connect($host, $user, $password, $database);\n\n\/\/ Cek koneksi\nif (!$conn) {\n die(\"Koneksi gagal: \" . mysqli_connect_error());\n}\n?><\/pre>\n
<?php\nif (isset($_POST['submit'])) {\n include 'db.php'; \/\/ Hubungkan ke database\n\n $name = mysqli_real_escape_string($conn, $_POST['name']);\n $email = mysqli_real_escape_string($conn, $_POST['email']);\n $message = mysqli_real_escape_string($conn, $_POST['message']);\n\n $query = \"INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')\";\n\n if (mysqli_query($conn, $query)) {\n echo \"<p>Pesan Anda berhasil disampaikan. Terima kasih!<\/p>\";\n } else {\n echo \"<p>Error: \" . mysqli_error($conn) . \"<\/p>\";\n }\n}\n?><\/pre>\n
<?php\ninclude 'db.php';\n\n$query = \"SELECT * FROM messages ORDER BY created_at DESC\";\n$result = mysqli_query($conn, $query);\n?>\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Pesan Masuk<\/title>\n<\/head>\n<body>\n <h1>Pesan Masuk<\/h1>\n <table border=\"1\" cellpadding=\"10\" cellspacing=\"0\">\n <tr>\n <th>ID<\/th>\n <th>Nama<\/th>\n <th>Email<\/th>\n <th>Pesan<\/th>\n <th>Tanggal<\/th>\n <\/tr>\n <?php while ($row = mysqli_fetch_assoc($result)): ?>\n <tr>\n <td><?php echo $row['id']; ?><\/td>\n <td><?php echo $row['name']; ?><\/td>\n <td><?php echo $row['email']; ?><\/td>\n <td><?php echo $row['message']; ?><\/td>\n <td><?php echo $row['created_at']; ?><\/td>\n <\/tr>\n <?php endwhile; ?>\n <\/table>\n<\/body>\n<\/html><\/pre>
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/hasil-percobaan-database-admin-php.png\/public\")
<\/figure><\/div>6. Jalankan dan Uji Coba Website<\/h3>
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/apache-mysql-xampp.png\/public\")
<\/figure><\/div>Setelah Website Jadi, Apa Langkah Berikutnya?<\/h2>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>