Cara menghubungkan halaman html ke database mysql menggunakan javascript

Pertama-tama, Anda harus menginstal perangkat lunak jenis XAMPP atau WAMP atau MAMP di laptop atau komputer Anda. Dengan perangkat lunak ini, Anda akan mendapatkan server web lokal i. e. Apache, bahasa PHP, dan database MySQL. Kode lengkapnya ada di Github dan tautan unduhannya adalah yang terakhir dari artikel ini

Pada artikel ini, PHP saya, contoh MySQL adalah dengan koneksi database dalam kode xampp

Setelah instalasi Anda perlu di Xampp lihat gambar di bawah ini

Setelah menginstal salah satu perangkat lunak laptop atau desktop ini, Anda perlu memeriksa localhost Anda berfungsi atau tidak. Buka browser Anda dan periksa URL ini http. //127. 0. 0. 1 atau http. //localhost/. Jika ini berfungsi, berarti server web lokal Anda diaktifkan dengan PHP/MySQL

Juga, GUI PHPmyAdmin datang untuk menangani operasi CRUD i. e. masukkan (buat), perbarui, hapus, dan pilih (baca) rekaman dari tabel. Antarmuka ini berbasis browser dan sangat membantu, mudah digunakan untuk membuat dan mengelola database phpmyadmin dalam tabel (kolom, baris)

Jika Anda memiliki instalasi di atas, Anda dapat melanjutkan untuk memulai pengkodean Anda

Jika Anda tidak memiliki server web berbasis tumpukan LAMP maka Anda dapat melakukannya langsung di ruang hosting Anda

Jika Anda memiliki pertanyaan lebih lanjut, Anda dapat mengomentari posting ini. Kami akan membalas pertanyaan Anda

Misalkan Anda memiliki halaman web untuk memasukkan data bidang formulir kontak di DB Anda. Untuk ini, Anda perlu mengikuti langkah-langkah berikut

Langkah 1. Saring persyaratan formulir HTML Anda untuk halaman web hubungi kami

Misalkan Anda memilih kolom formulir Nama (input teks), Email(input email), Telepon (input nomor), dan pesan (teks multi-baris). Tombol kirim formulir juga diperlukan untuk mengirimkan formulir. Anda akan mendapatkan formulir lengkap dalam pengkodean HTML di langkah 3

Langkah 2. Buat database dan tabel di MySQL

Buka browser web (chrome, firefox, edge, dll. , ) dan ketik http ini. //localhost/phpmyadmin/ atau http. //127. 0. 0. 1/phpmyadmin/ untuk membuka GUI untuk mengelola DB di komputer Anda. Lihat layar xampp di bawah bagaimana tampilannya

Klik tautan basis data dan buat db Anda dengan nama "db_contact". Lihat gambar di bawah ini

Setelah membuat DB Anda, Anda perlu membuat tabel dengan nama apa pun yang saya pilih "tbl_contact" dengan nomor bidang 5. Kami memilih 4 bidang di atas Nama, Email, Telepon, dan Pesan. Kolom pertama akan kami pertahankan untuk mempertahankan nomor seri dan dalam istilah teknis kunci utama (nomor unik dari setiap catatan). Lihat gambar di bawah ini

Ketika Anda akan mengklik tombol untuk pergi, Anda akan mendapatkan layar ini. Sekarang kita perlu memberi makan setiap bidang informasi

Lihat gambar di bawah ini di mana saya menambahkan informasi lapangan. Jadi untuk field Name digunakan field Name – fldName, Email – fldEmail, Phone – fldPhone, Message – fldMessage

Sekarang klik tombol simpan yang ada di kanan bawah layar Anda. Setelah menyimpan tabel Anda, itu dibuat di database Anda

--
-- Database: `mydb`
--

CREATE DATABASE IF NOT EXISTS `db_contact` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `db_contact`;

-- --------------------------------------------------------

--
-- Table structure for table `tbl_contact`
--

DROP TABLE IF EXISTS `tbl_contact`;
CREATE TABLE IF NOT EXISTS `tbl_contact` (
`id` int(11) NOT NULL,
`fldName` int(50) NOT NULL,
`fldEmail` int(150) NOT NULL,
`fldPhone` varchar(15) NOT NULL,
`fldMessage` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_contact`
--
ALTER TABLE `tbl_contact`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_contact`
--
ALTER TABLE `tbl_contact`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Langkah 3. Buat formulir HTML untuk menghubungkan ke database

Sekarang Anda harus membuat formulir HTML. Untuk ini, Anda perlu membuat folder kerja terlebih dahulu lalu membuat halaman web dengan nama “contact. html”. Jika Anda menginstal xampp, folder kerja Anda ada di folder “E. \xampp\htdocs”. Anda dapat membuat folder "kontak" baru di folder kerja localhost Anda. Buat “kontak. html” dan rekatkan kode berikut

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form - PHP/MySQL Demo Code</title>
</head>

<body>
<fieldset>
<legend>Contact Form</legend>
<form name="frmContact" method="post" action="contact.php">
<p>
<label for="Name">Name </label>
<input type="text" name="txtName" id="txtName">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="txtEmail" id="txtEmail">
</p>
<p>
<label for="phone">Phone</label>
<input type="text" name="txtPhone" id="txtPhone">
</p>
<p>
<label for="message">Message</label>
<textarea name="txtMessage" id="txtMessage"></textarea>
</p>
<p>&nbsp;</p>
<p>
<input type="submit" name="Submit" id="Submit" value="Submit">
</p>
</form>
</fieldset>
</body>
</html>

Sekarang formulir Anda sudah siap. Anda dapat mengujinya di tautan localhost Anda http. //localhost/kontak/kontak. html
Pada langkah selanjutnya, saya akan membuat kode PHP / MySQL

Langkah 4. Buat halaman PHP untuk menyimpan data dari formulir HTML ke database MySQL Anda

Tindakan formulir HTML kontak ada di “contact. php”. Pada halaman ini, kita akan menulis kode untuk memasukkan record ke dalam database

Untuk menyimpan data di MySQL sebagai catatan, Anda harus terhubung terlebih dahulu dengan DB. Menghubungkan kode sangat sederhana. mysql_connect di PHP sudah usang untuk versi terbaru oleh karena itu saya menggunakannya di sini mysqli_connect.

$con = mysqli_connect("localhost","your_localhost_database_user","your_localhost_database_password","your_localhost_database_db");

Anda perlu memberikan nilai untuk nama pengguna dan kata sandi localhost Anda. Biasanya nama pengguna basis data MySQL localhost adalah root dan kata sandi kosong atau root. Misalnya kodenya seperti di bawah ini

$con = mysqli_connect('localhost', 'root', '',’db_contact’);
The “db_contact” is our database name that we created before.
After connection database you need to take post variable from the form. See the below code
$txtName = $_POST['txtName'];
$txtEmail = $_POST['txtEmail'];
$txtPhone = $_POST['txtPhone'];
$txtMessage = $_POST['txtMessage'];

Ketika Anda akan mendapatkan variabel post maka Anda perlu menulis perintah SQL berikut

$sql = "INSERT INTO `tbl_contact` (`Id`, `fldName`, `fldEmail`, `fldPhone`, `fldMessage`) VALUES ('0', '$txtName', '$txtEmail', '$txtPhone', '$txtMessage');"

Untuk permintaan api melalui database, Anda perlu menulis baris berikut

$rs = mysqli_query($con, $sql);

Berikut adalah kode PHP untuk memasukkan data ke database Anda dari formulir

<?php
// database connection code
// $con = mysqli_connect('localhost', 'database_user', 'database_password','database');

$con = mysqli_connect('localhost', 'root', '','db_contact');

// get the post records
$txtName = $_POST['txtName'];
$txtEmail = $_POST['txtEmail'];
$txtPhone = $_POST['txtPhone'];
$txtMessage = $_POST['txtMessage'];

// database insert SQL code
$sql = "INSERT INTO `tbl_contact` (`Id`, `fldName`, `fldEmail`, `fldPhone`, `fldMessage`) VALUES ('0', '$txtName', '$txtEmail', '$txtPhone', '$txtMessage')";

// insert in database 
$rs = mysqli_query($con, $sql);

if($rs)
{
	echo "Contact Records Inserted";
}

?>

Langkah 5. Semua selesai

Sekarang bagian pengkodean selesai. Unduh kode dari github

Jika Anda ingin memeriksa maka Anda dapat mengisi formulir http. //localhost/kontak/kontak. html dan lihat hasilnya di database. Anda dapat memeriksa melalui phpmyadmin catatan yang Anda masukkan

Mengapa keterampilan sebagai pengembang PHP khusus?

Php adalah bahasa pemrograman sisi server yang paling populer. Ini digunakan lebih dari 70% dibandingkan dengan bahasa pengembangan situs web lainnya. Karena banyak CMS dan aplikasi PHP khusus yang sudah dikembangkan di PHP, oleh karena itu, ini akan menjadi bahasa yang menuntut untuk 5 tahun ke depan.

Perusahaan pengembang PHP di seluruh dunia sedang mencari pengembang PHP murah di India. Banyak perusahaan juga suka menjadi pengembang PHP lepas di Delhi, London, Bangalore, Mumbai (lokal). Jika Anda ingin menyewa pengembang khusus maka Anda perlu keterampilan sendiri

Bagaimana cara menghubungkan database MySQL menggunakan JavaScript di HTML?

Bagaimana cara menghubungkan database MySQL dengan situs web HTML?

Bisakah kita menggunakan JavaScript untuk terhubung ke database MySQL?

Bagaimana cara memasukkan data ke database menggunakan JavaScript dengan HTML?