请帮我利用php代码写一个类似于京东购物界面的网页要求制作精美一点并且与数据库连接
时间: 2024-03-07 18:50:28 浏览: 107
好的,以下是我为您编写的PHP代码,用于制作一个类似于京东购物界面的网页,并且与数据库连接。
```php
<!DOCTYPE html>
<html>
<head>
<title>京东购物</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">京东购物</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">手机</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">电脑</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">家电</a>
</li>
</ul>
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="搜索">
<button class="btn btn-success" type="submit">搜索</button>
</form>
</nav>
<div class="row">
<div class="col-sm-2">
<h4>分类</h4>
<ul class="list-group">
<li class="list-group-item"><a href="#">手机</a></li>
<li class="list-group-item"><a href="#">电脑</a></li>
<li class="list-group-item"><a href="#">家电</a></li>
</ul>
</div>
<div class="col-sm-10">
<h4>热销商品</h4>
<div class="row">
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT * FROM Products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo '<div class="col-sm-3">';
echo '<div class="card">';
echo '<img class="card-img-top" src="' . $row["image"] . '" alt="Card image">';
echo '<div class="card-body">';
echo '<h4 class="card-title">' . $row["name"] . '</h4>';
echo '<p class="card-text">' . $row["description"] . '</p>';
echo '<a href="#" class="btn btn-primary">' . $row["price"] . '</a>';
echo '</div>';
echo '</div>';
echo '</div>';
}
} else {
echo "0 结果";
}
$conn->close();
?>
</div>
</div>
</div>
</div>
</body>
</html>
```
请注意,您需要将以下变量替换为您自己的数据库信息:
```php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
```
您还需要根据您的数据库结构更改以下查询语句:
```php
$sql = "SELECT * FROM Products";
```
此代码使用Bootstrap框架创建基本的网页布局,并从数据库中获取商品信息,然后将其用卡片形式展示出来。
阅读全文