网页前后端连接

本文最后更新于：2023年12月2日 下午

简介

前端 html 发送表单至后端 mysql

安装

1
> sudo pacman -Syu nginx php php-fpm

配置

1
> sudo vim /etc/php/php.ini

取消注释

1
extension=mysqli
1
> sudo vim /etc/nginx/nginx.conf

添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
location ~ \.php$ {
        # 404
        try_files $fastcgi_script_name =404;

        # default fastcgi_params
        include fastcgi_params;

        # fastcgi settings
        fastcgi_pass			unix:/run/php-fpm/php-fpm.sock;
        fastcgi_index			index.php;
        fastcgi_buffers			8 16k;
        fastcgi_buffer_size		32k;

        # fastcgi params
        fastcgi_param DOCUMENT_ROOT	$realpath_root;
        fastcgi_param SCRIPT_FILENAME	$realpath_root$fastcgi_script_name;
        #fastcgi_param PHP_ADMIN_VALUE	"open_basedir=$base/:/usr/lib/php/:/tmp/";
    }

启动服务

1
2
> sudo systemctl start php-fpm
> sudo systemctl start nginx

mysql Docker 镜像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
version: '3.1'
services:
  db:
    image: mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3308:3306"
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    restart: always
    environment:
      PMA_HOST: db
      PMA_USER: root
      PMA_PASSWORD: root
    ports:
      - "8011:80"
1
> docker-compose up

访问 localhost:8011 进入 phpadmin

html & php

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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="./userdata.php">
            <p>
                <label for="username">username </label>
                <input type="text" name="txtUsername" id="txtUsername">
            </p>
            <p>
                <label for="password">password</label>
                <input type="text" name="txtPassword" id="txtPassword">
            </p>
            <p>&nbsp;</p>
            <p>
                <input type="submit" name="Submit" id="Submit" value="Submit">
            </p>
        </form>
    </fieldset>
</body>

</html>

userdata.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
#phpinfo();
$con = mysqli_connect('localhost:3308','root','root','db_connect');

// get the post records
$txtUsername = $_POST['txtUsername'];
$txtPassword = $_POST['txtPassword'];

// database insert SQL code
$sql = "INSERT INTO `tbl_contact` (`username`, `password`) VALUES ('$txtUsername', '$txtPassword')";

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

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

?>

访问 html 填写表单，刷新 phpadmin

#archlinux #docker #php #nginx #html
网页前后端连接
https://derivativemarmot.github.io/blog/posts/1fca957b.html
作者
Marmot
发布于
2022年11月7日
许可协议