Cara menghubungkan database sql ke halaman web html

Konten situs web apa pun untuk bisnis atau organisasi terdiri dari data, termasuk teks, gambar, media, dan nilai numerik. Menggunakan database untuk menyimpan data ini merupakan pendekatan yang efisien untuk banyak situs. Jika data situs Anda disimpan dalam database -- misalnya, menggunakan sistem manajemen database seperti MySQL -- Anda mungkin dihadapkan pada tugas menyajikan data di dalam halaman Web Anda. Proses ini melibatkan menghubungkan ke database, memintanya untuk data dan menyajikan data dalam HTML, seringkali dengan menggunakan bahasa skrip sisi server seperti PHP

1. 1

   Persiapkan detail akun pengguna basis data Anda. Sistem basis data menggunakan akun, dengan tingkat akses tertentu ke setiap pengguna. Detail akun Anda harus menyertakan nama pengguna dan kata sandi. Temukan detail ini, jika perlu, salin ke dalam file. Anda juga memerlukan nama dan lokasi database Anda. Temukan semua detail ini sebelum Anda mulai membuat kode. Host Web Anda seharusnya dapat membantu Anda dengan informasi ini jika Anda tidak dapat menemukannya

2. 2

   Hubungkan ke basis data Anda. Anda perlu menggunakan satu atau lebih skrip sisi server untuk terhubung ke database Anda. Kode contoh berikut menunjukkan pembuatan koneksi database ke sistem MySQL dalam skrip PHP

   Anda perlu mengubah alamat host, nama pengguna, dan kata sandi untuk mencerminkan akun Anda sendiri. Proses untuk membuat koneksi serupa untuk sistem basis data dan bahasa pemrograman lainnya

3. 3

   Kueri data Anda. Dalam kebanyakan kasus skrip menggunakan SQL (Structured Query Language) untuk mengambil kumpulan data tertentu dari database. Kueri SQL ini dapat dijalankan dari dalam skrip sisi server. Kueri contoh berikut menunjukkan pengambilan semua rekaman dalam tabel bernama "Pelanggan"

   PILIH * DARI Pelanggan

   Kode berikut mendemonstrasikan eksekusi kueri ini dalam PHP

   $customer_result = mysql_query("PILIH * DARI Pelanggan");

   Variabel berisi data hasil setelah kueri

4. 4

   Keluarkan data Anda. Setelah Anda mengambil data dari database Anda, Anda dapat menyajikannya di dalam halaman situs Anda, yang terstruktur dalam markup HTML. Kode berikut menunjukkan penulisan hasil kueri ke dalam halaman dalam struktur HTML

   while($customer_row = mysql_fetch_array($customer_result)) { echo "

   ".$customer_row['CustName']."

   "; }

   Dalam hal ini while loop mengiterasi melalui setiap catatan dalam tabel "Pelanggan", menulis nilai dari bidang "CustName" ke dalam halaman sebagai bagian dari elemen paragraf. Anda perlu mengubah kode untuk mencerminkan bidang dalam tabel basis data Anda dan struktur HTML tempat Anda ingin menampilkannya

5. 5

   Uji skrip Anda. Setelah skrip koneksi database Anda selesai, atau selesai sebagian, unggah ke server Anda untuk mengujinya. Jika Anda mengalami kesalahan, periksa detail akun database Anda serta struktur tabel Anda. Setelah Anda menetapkan bahwa Anda dapat terhubung ke database dengan sukses di skrip Anda, Anda dapat membangun kode dasar untuk menyajikan data Anda kepada pengguna situs

   Baca juga kotak fleksibel CSS lengkap dengan contoh. Saya menggunakan properti CSS flexbox dalam bentuk HTML. Ini akan menjadi panduan yang berguna untuk Anda. Dan saya menggunakan tag tabel dalam panduan ini untuk mengatur bidang formulir HTML. Untuk itu, baca cara membuat tabel di HTML

Manfaat utama membaca artikel ini adalah Anda akan mempelajari cara menghosting database di server web, menghubungkan situs web Anda ke database, dan melakukan empat operasi dasar yang digunakan untuk mengelola data persisten. Ini akan memungkinkan situs web Anda untuk menyimpan, mengatur, mengakses, dan memfilter setiap jenis data yang dapat dilacak tentang pelanggan, produk, dan bisnis Anda. Namun, ini mengharuskan Anda untuk mengetahui data apa yang ingin Anda lacak, dan mengonfigurasi tabel, kueri, logika pemrograman, dan antarmuka untuk melacaknya

Kami akan menggunakan Linode sebagai penyedia layanan cloud kami karena produk mereka mudah digunakan, terjangkau, dapat diskalakan, dan layanan pelanggan mereka luar biasa. Kami akan menggunakan Nginx sebagai server web kami karena produk mereka gratis, menangani lalu lintas situs web yang tinggi, dan mendukung 60% dari 100 ribu situs web teratas di dunia

• Promosi. Tautan rujukan ini memberikan kredit $100 untuk Linode

# How to Put a High Performance Website on the Internet:
01. How to Host a Website in the Cloud
02. How to Protect a Website From Threats
03. How to Optimize a Website to Load in 1 Second
04. How to Add a Database to a Website
05. How to Protect a Database from Threats
06. How to Backup a Database in the Cloud
07. How to Scale a Website to Handle High Traffic
08. How to Add a Node.js Application to a Website
09. How to Add a Python Application to a Website
10. How to Add a Payment Method to a Website

Daftar isi

Buat Mesin Virtual

Mesin virtual adalah sistem komputer yang ditiru dengan CPU, memori, penyimpanan, dan antarmuka jaringannya sendiri yang ada di perangkat keras fisik penyedia layanan cloud kami. Ini memungkinkan kami untuk menginstal server web kami, menghosting database kami, dan memutakhirkan perangkat keras kami sesuai kebutuhan dengan biaya bulanan yang kecil. Di bagian ini, kita akan membuat mesin virtual yang akan memuat database kita menggunakan paket bulanan termurah yang tersedia

# create virtual machine
1. create an account on linode
2. click "create" button
3. click "linode" menu item# select linux distribution
1. click image dropdown menu in "choose a distribution" section
2. click "ubuntu 20.04 LTS" menu item# select datacenter to store virtual machine
1. click region dropdown menu in "region" section
2. select same region as your virtual machines from before# select monthly plan
1. click "shared cpu" tab in "plan" section
2. click "nanode 1gb" radio button# finish virtual machine
1. scroll down to "linode label" section
2. enter "database-1" into "linode label" text field
3. enter password into "root password" text field
4. click "create linode" button
5. wait until linoide finishes
6. click "power on" link
7. click "power on linode" button# create private ip address
1. click "network" tab
2. click "add ip address" button
3. click "private" radio button
4. click "allocate" button# write down private ip address of database
1. scroll down to "ip addresses" section
2. write down "ipv4 – private" ip address# restart "database-1" linode
1. click "reboot" button
2. click "reboot linode" button

Instal Database MySQL

Database MySQL adalah sistem manajemen basis data relasional yang mengatur data ke dalam tabel yang dilindungi menggunakan kontrol akses. Ini memungkinkan kami untuk mengontrol pengguna mana yang dapat membuat, meminta, memperbarui, atau menghapus data yang disimpan di database kami. Di bagian ini, kita akan menginstal MySQL, mengonfigurasi pengaturan keamanan dasar, dan mengaktifkan koneksi jarak jauh

# open console as root user on linode
1. open "linodes" page on linode
2. click "database" linode
3. click "launch lish console" link
4. press "return" key
5. enter "root" into "login" prompt
6. enter your password into "password" prompt
7. press "return" key
8. paste commands into console# update package information
sudo apt-get update# install mysql
sudo apt-get install --yes mysql-server# enable firewall
sudo ufw enable# allow mysql to bypass firewall
sudo ufw allow mysql# open mysql directory
cd /etc/mysql/mysql.conf.d# allow mysql to receive connections from any ip address
sudo sed "s|127.0.0.1|0.0.0.0|g" -i mysqld.cnf# set mysql to run at startup
sudo systemctl enable mysql# restart mysql
sudo systemctl restart mysql

Siapkan Database MySQL

Klien MySQL adalah program baris perintah yang menyediakan antarmuka frontend untuk mengelola database kami. Ini memungkinkan kita untuk memanipulasi data dalam database kita dengan mengeksekusi pernyataan SQL secara interaktif, atau dengan mengeksekusinya dari file teks. Di bagian ini, kami akan mengunduh dan mengeksekusi file teks kami untuk membuat database, tabel, dan data kami yang akan kami muat ke situs web kami

• Kata sandi harus berisi huruf campuran, angka, dan simbol

# download mysql file
curl -o /etc/mysql/database.sql https://gist.githubusercontent.com/david-littlefield/74266b53347d2605fac6f53a27277f4c/raw# store database name
database="website"# store table name
table="records"# change "placeholder" to unique username
user="placeholder"# change "placeholder" to desired password
password="placeholder"# add database to mysql file
sudo sed "s|#database_placeholder#|$database|g" -i /etc/mysql/database.sql# add table to mysql file
sudo sed "s|#table_placeholder#|$table|g" -i /etc/mysql/database.sql# add user to mysql file
sudo sed "s|#user_placeholder#|$user|g" -i /etc/mysql/database.sql# add password to mysql file
sudo sed "s|#password_placeholder#|$password|g" -i /etc/mysql/database.sql# open mysql as root user
sudo mysql -u root -p# run mysql file
source /etc/mysql/database.sql# exit mysql
exit

Ganti Situs Web Statis

Situs Web Statis adalah situs web yang menampilkan konten yang sama kepada semua pengguna kami. Ini melayani browser web dengan file HTML yang dibuat sebelumnya menggunakan teks hardcode, dan file CSS dan JavaScript yang disimpan di server web kami. Jenis situs web ini paling cocok untuk situs yang menampilkan konten, jarang diperbarui, dan menyediakan konten yang tidak interaktif atau tidak dipersonalisasi

Situs Web Dinamis adalah situs web yang menampilkan konten unik untuk semua pengguna kami. Ini melayani browser web dengan file HTML yang dibuat secara real-time menggunakan bahasa sisi server, dan file CSS dan JavaScript yang disimpan di server web kami. Jenis situs web ini paling baik untuk situs yang mengelola konten, sering memperbarui, dan menyediakan konten interaktif atau yang dipersonalisasi

Situs web yang telah kami hosting, lindungi, dan optimalkan, adalah situs web statis yang membantu kami mempelajari setiap topik ini satu per satu, secara bertahap, dan dengan kerumitan minimal. Ini juga memungkinkan kami melakukan perbandingan kinerja antara situs web statis dan dinamis. Pada bagian ini, kita akan mengubah website statis kita menjadi website dinamis hanya dengan memuat file php yang berbeda

# open console as non-root user
1. open "linodes" page on linode
2. click "website-1" linode
3. click "launch lish console" link
4. press "return" key
5. enter your unique username into "login" prompt
6. enter your password into "password" prompt
7. press "return" key
8. paste commands into console# switch from static website to dynamic website
sudo sed "s|index static.php|index dynamic.php|g" -i /etc/nginx/nginx.conf# restart nginx
sudo systemctl restart nginx

Hubungkan Situs Web ke Database

File Konfigurasi adalah file php yang berisi kredensial MySQL kami yang diperlukan situs web kami untuk terhubung ke database kami dan menjalankan kueri. Itu menggunakan kredensial kami untuk membuat koneksi, menyimpan koneksi, dan menentukan cara menangani kesalahan. Di bagian ini, kami akan menyimpan kredensial kami dengan menambahkan nama basis data, alamat ip, pengguna, dan kata sandi ke file konfigurasi kami

• Itu menggunakan bahasa sisi server yang tidak terlihat dari browser web

# change "placeholder" to database name from earlier
database="placeholder"# change "placeholder" to ip address of database
host="placeholder"# change "placeholder" to database username from earlier
user="placeholder"# change "placeholder" to database password from earlier
password="placeholder"# add database to configuration file
sudo sed "s|#database_placeholder#|$database|g" -i /var/www/html/includes/configuration.php# add host to configuration file
sudo sed "s|#host_placeholder#|$host|g" -i /var/www/html/includes/configuration.php# add username to configuration file
sudo sed "s|#user_placeholder#|$username|g" -i /var/www/html/includes/configuration.php# add password to configuration file
sudo sed "s|#password_placeholder#|$password|g" -i /var/www/html/includes/configuration.php

Pilih Catatan di Database

Pernyataan SELECT adalah pernyataan SQL yang mengambil catatan dari satu atau lebih tabel di database kami. Ini memungkinkan kita untuk meminta satu, beberapa, atau semua catatan dengan menggabungkannya dengan pernyataan SQL lainnya. Di bagian ini, kami akan meminta semua catatan, membuat HTML dengan data dari catatan tersebut, dan merender HTML sebagai konten di situs web kami

# load website without cache
1. open chrome web browser
2. click "..."  menu
3. click "more tools" menu item
4. click "developer tools" menu item
5. click "network" tab
6. check "disable cache" checkbox
7. enter your domain name into address bar
8. press "return" key

Masukkan Record ke dalam Database

Pernyataan INSERT adalah pernyataan SQL yang menyisipkan satu atau lebih catatan dalam tabel di database kami. Hal ini memungkinkan kita menambahkan record dengan menyediakan data untuk satu, beberapa, atau semua kolom dalam sebuah tabel. Di bagian ini, kami akan mengurai data dari bidang teks di situs web kami, membuat lebih banyak data dengan data yang diurai, mengunduh gambar terkait, dan menambahkan data ke database

# add image to "recent" page
1. click "upload" tab# enter unsplash url into "unsplash url" text field
https://unsplash.com/photos/UoqAR2pOxMo# enter location into "location" text field
Da Nang, Vietnam# enter description into "description" text field
The Non Nuoc beach is located at the foot of the Marble Mountains and extends over 5 km. This beach has calm waves and crystal clear blue water all year round. You can also eat locally caught fresh fish at one of the restaurants. It is also an ideal place for sports such as surfing, windsurfing, volleyball, etc.# create record
1. click "upload" button

Perbarui Catatan di Database

Pernyataan UPDATE adalah pernyataan SQL yang memperbarui satu atau lebih catatan dalam tabel di database kami. Ini memungkinkan kita untuk mengubah satu, beberapa, atau semua catatan kita dengan menggabungkannya dengan pernyataan SQL lainnya. Di bagian ini, kami akan mengurai data dari bidang teks di situs web kami, mengurai lebih banyak data dari objek rekaman saat ini, dan mengubah data di database kami

# open "edit" page
1. click "Da Nang, Vietnam" image# remove description
1. select description from "description" text field
2. press "delete" key# enter description into "description" text field
Son Tra peninsula is located about 8 km from the city center and has many beautiful beaches such as But beach, Tien Sa beach, Nam beach, Rang beach, Bac beach and Con beach. These beaches are all very beautiful at the foot of mountains with jungle and clear blue sea. Apart from relaxing on the beach and swimming, you can also go into the jungle, visit pagodas, ride a scooter around the peninsula and snorkel.# update record
1. click "save" button

Hapus Catatan dari Database

Pernyataan DELETE adalah pernyataan SQL yang menghapus satu atau lebih catatan dari tabel di database kami. Ini memungkinkan kita untuk menghapus satu, beberapa, atau semua catatan kita dengan menggabungkannya dengan pernyataan SQL lainnya. Di bagian ini kita akan mem-parsing id rekaman dari parameter kueri di URL, menghapus gambar terkait, dan menghapus data dari database kita dengan id rekaman

# open "edit" page
1. click "Da Nang, Vietnam" image# delete record
1. click "delete" button# measure performance with gtmetrix
1. open gtmetrix
2. enter your domain name into "enter url to analyze" text field
3. click "test your site" button
4. scroll to "page details" section
5. review "fully loaded time" metric

Tinjau Proses Database

Basis data dimanipulasi oleh situs web kami dengan rangkaian kelas berbeda yang disimpan dalam banyak file php. Proses ini dapat dilacak pada file php yang tersimpan di web server kita. Di bagian ini, kami akan menyesuaikan dan meninjau file php yang mendemonstrasikan versi gabungan dari proses ini

Bagaimana cara menghubungkan database SQL Server ke situs web?

Bisakah kita menggunakan SQL di halaman HTML?

Bagaimana cara menampilkan data SQL di halaman web?

Bagaimana menghubungkan halaman login HTML dengan database?