注册

孩子出生了，我给她开发了一个吃喝拉撒记录网站

我的孩子出生了，每天她妈妈都要记录孩子的吃喝拉撒，但都是用纸本本记录的，没法看出孩子每天的吃喝趋势，所以我想开发一个简单的网站来帮助她记录。

一、设计录入页面

其实这个页面非常简单，宝妈打开后随时可以输入孩子当前吃了多少奶、是亲喂的还是配方奶、是否大便小便等等。

所以先做一个录入页面：

/coding/uploads/files_user1/question/5eea074de510f558298.png

对应的代码：

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>BellaDaily</title>

<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-md-12">

<div class="col-md-2"></div>
<div class="col-md-8">
<form role="form">
<div class="form-group">
<label>
时间
</label>
<input type="text" class="form-control" id="date">
</div>
<div class="form-group">
<label>
母乳(ml)
</label>
<input type="text" class="form-control" id="milk">
</div>

<div class="form-group">
<label>
配方奶(ml)
</label>
<input type="text" class="form-control" id="formula">
</div>

<div class="checkbox">
<label>
<input type="checkbox"> 大便
</label>
</div> 

<div class="checkbox">
<label>
<input type="checkbox"> 小便
</label>
</div> 

<div class="form-group">
<label>
备注
</label>
<input type="text" class="form-control" id="notes">
</div>
<button type="submit" class="btn btn-primary">
提交
</button>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

但是这个页面还非常的初级，只是大致列出了每次要记录的信息，但功能还不完善。

二、将待录入的数据转变成变量

这个表单填写的数据需要记录到数据库中，所以需要将输入的数据变成变量。我准备使用PHP语言，所以变量会用PHP来写。

前端的index.html修改如下：

index.php

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>BellaDaily</title>

<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-md-12">

<div class="col-md-2"></div>
<div class="col-md-8">
<form role="form" method="POST" action="data.php">
<div class="form-group">
<label>
时间
</label>
<input type="text" class="form-control" name="datetime">
</div>
<div class="form-group">
<label>
母乳(ml)
</label>
<input type="text" class="form-control" name="milk">
</div>

<div class="form-group">
<label>
配方奶(ml)
</label>
<input type="text" class="form-control" name="formula">
</div>

<div class="checkbox">
<label>
<input type="checkbox" name="stool"> 大便
</label>
</div> 

<div class="checkbox">
<label>
<input type="checkbox" name="urination"> 小便
</label>
</div> 

<div class="form-group">
<label>
备注
</label>
<input type="text" class="form-control" name="notes">
</div>
<button type="submit" class="btn btn-primary">
提交
</button>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

data.php

<?php

echo $_POST["datetime"];

echo $_POST["milk"];

echo $_POST["formula"];

echo $_POST["stool"];

echo $_POST["urination"];

echo $_POST["notes"];

?>


这样一来，宝妈填写的信息就会显示在data.php这个页面中。

三、数据入库

这些数据需要插入到数据库中，所以需要创建一个数据库来存储数据。

所以需要打开phpmyadmin，在其中创建一个名为belladaily的数据库，里面新增一个records的数据表，数据表里包含前面我录入的几个字段，如下：

/coding/uploads/files_user1/question/5eea0b4fd49bb557155.png

然后我们开始修改data.php，撰写录入数据的字段：

data.php

<?php

$datetime = $_POST["datetime"];

$milk = $_POST["milk"];

$formula = $_POST["formula"];

if($_POST["stool"] == "on")
{
$stool = 1;
}
else
{
$stool = 0;
}

if($_POST["urination"] == "on")
{
$urination = 1;
}
else
{
$urination = 0;
}

$notes = $_POST["notes"];

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "belladaily";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "INSERT INTO `records` (`datetime`, `milk`, `formula`, `stool`, `urination`, `notes`) VALUES ($datetime, $milk, $formula, $stool, $urination, '$notes')";
if (mysqli_query($conn, $sql)) {
echo "新记录插入成功";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);

?>

这样，每次新增了数据之后就会显示新纪录插入成功。

四、优化页面

虽然上面这些已经基本上实现了一些数据录入的功能，但是看起来不是很好看，而且万一录入错误了也不能修改，因此，还要再继续优化这些功能。

1、优化日期录入

每次宝妈录入的时候肯定不能自己手动去选时间，所以可以使用PHP自动生成日期时间：

生成日期时间代码：

<?php

date_default_timezone_set("Asia/Shanghai");
$datetime = date("Y-m-d G:i");

?>

这样生成的时间是这样的：2020-06-17 20:46

放到表单里的效果如下：

/coding/uploads/files_user1/question/5eea112ae3f30883497.png


如果时间错了也可以自己手动修改。

提交后数据库中的数据是这样的：

/coding/uploads/files_user1/question/5eea11db98f59868808.png

但其实这种日期存储方式不太适合计算，不过也可以凑合着用。


2、汇总显示当天的数据

其实宝妈在录入的时候也可以查看当天全部的录入数据，所以可以这样来修改index.php

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>BellaDaily</title>

<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>
<body>

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Bella Daily</a>
</div>
</div>
</nav>

<?php

date_default_timezone_set("Asia/Shanghai");
$datetime = date("Y-m-d G:i");

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "belladaily";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM `records`";

$result = mysqli_query($conn, $sql);

//echo mysqli_num_rows($result);

$table = '<div class="table-responsive">
<table class="table">
  <caption>本日投喂记录</caption>
  <thead>
    <tr>
      <th>时间</th>
      <th>母乳</th>
      <th>配方奶</th>
      <th>大便</th>
      <th>小便</th>
    </tr>
  </thead>
  <tbody>';
if (mysqli_num_rows($result) > 0) {
$sum_milk = 0;

$sum_formula = 0;

$sum_stool = 0;

$sum_urination = 0;

while($row = mysqli_fetch_assoc($result)) {

if(date("Ymd",strtotime($row["datetime"])) == date("Ymd"))
{
$time = date("G:i",strtotime($row["datetime"]));

$table = $table.
"<tr>".
"<td>".$time."</td>".
"<td>".$row["milk"]."</td>".
"<td>".$row["formula"]."</td>".
"<td>".$row["stool"]."</td>".
"<td>".$row["urination"]."</td>".
"</tr>";

$sum_milk = $sum_milk + $row["milk"];

$sum_formula = $sum_formula + $row["formula"];

$sum_stool = $sum_stool + $row["stool"];

$sum_urination = $sum_urination + $row["urination"];
}
}

$table = $table.
"<tr>".
"<td>汇总</td>".
"<td>".$sum_milk ."</td>".
"<td>".$sum_formula."</td>".
"<td>".$sum_stool."</td>".
"<td>".$sum_urination."</td>".
"</tr>";
} else {
echo '<div class="table-responsive">
    <table class="table">
      <caption>今日尚未投喂。</caption>
    </table>
    </div>';
}

$table = $table."  </tbody>
</table>
</div>";

?>

<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-2"></div>
<?php

echo $table;
?>
<div class="col-md-8">
<form role="form" method="POST" action="data.php">
<div class="form-group">
<label>
时间
</label>
<input type="text" class="form-control" name="datetime" value="<?php echo $datetime; ?>">
</div>
<div class="form-group">
<label>
母乳(ml)
</label>
<input type="text" class="form-control" name="milk" value="<?php echo 0; ?>"> 
</div>

<div class="form-group">
<label>
配方奶(ml)
</label>
<input type="text" class="form-control" name="formula" value="<?php echo 0; ?>">
</div>

<div class="checkbox">
<label>
<input type="checkbox" name="stool"> 大便
</label>
</div> 

<div class="checkbox">
<label>
<input type="checkbox" name="urination"> 小便
</label>
</div> 

<div class="form-group">
<label>
备注
</label>
<input type="text" class="form-control" name="notes">
</div>
<button type="submit" class="btn btn-primary">
提交
</button>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

显示效果如下：

/coding/uploads/files_user1/question/5eea1e3862637991417.png


对应的data.php也做个简单的修改：

<?php

$datetime = $_POST["datetime"];

$milk = $_POST["milk"];

$formula = $_POST["formula"];

if($_POST["stool"] == "on")
{
$stool = 1;
}
else
{
$stool = 0;
}

if($_POST["urination"] == "on")
{
$urination = 1;
}
else
{
$urination = 0;
}

$notes = $_POST["notes"];

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "belladaily";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "INSERT INTO `records` (`datetime`, `milk`, `formula`, `stool`, `urination`, `notes`) VALUES ('$datetime', $milk, $formula, $stool, $urination, '$notes')";
if (mysqli_query($conn, $sql)) {
//echo "新记录插入成功";

header("Location: index.php");
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);

?>

这样一来，基本功能就大致实现了，宝妈就可以尝试录入一些数据来试试了。

为了宝妈记录方便，我都没有设置登录退出，所以她打开页面就可以录入。只是如果发现自己录入错误了要修改就比较麻烦，需要我从后台来修改。先等她用一用，然后我再完善。

目前给她使用的版本是这样的：

/coding/uploads/files_user1/question/5eea2ff083c49870775.png


2020-06-17 添加评论
分享

没有找到相关结果

    已邀请:

    韩林涛 - 《译者编程入门指南》作者

    今天宝妈已经开始使用这个工具了，她又提了一些使用反馈，我新增了几个小功能：

    /coding/uploads/files_user1/answer/5eeaeea4edae6547712.png

    新增小功能一：

    计算宝宝的天数：

    $birthday=strtotime("2020-05-15 10:38");
    
$days=ceil((time()-$birthday)/60/60/24);


    新增小功能二：

    每天填写一些爱语，随机显示在提交按钮下面：

    index.php

    <?php
    

    
$message_sql = "SELECT * FROM `lovemessages`";
    

    
mysqli_query($conn,'set names utf8');
    
$result_sql = mysqli_query($conn, $message_sql);
    

    
$messages = array();
    

    
while($row = mysqli_fetch_assoc($result_sql)) {
    

    
if(date("Ymd",strtotime($row["datetime"])) == date("Ymd"))
    
{
    
$messages[] = $row["message"];
    
}
    

    

    
}
    

    
$love_keys = array_rand($messages,2);
    

    

    
if(isset($messages[$love_keys[0]]))
    
{
    
$love_message = $messages[$love_keys[0]];
    
}
    
else
    
{
    
$love_message = "新的一天开始了，宝妈加油！Bella加油！";
    
}


    数据表跟之前一样，就是每天往里面新增一些鼓励加油的语言，然后通过上面的代码随机显示在页面中。

    2020-06-18 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2024, All Rights Reserved