前段时间一个好友问我能否用AppInventor给她做一个登记学生成绩的App,当然学生也可以用此App查询成绩。研究了一下,用AppInventor大致可以实现她的想法。
功能分析:App分为教师界面和学生界面,教师界面添加学生基本信息,包括姓名、学号、语数英三科成绩,并保存;学生界面通过输入学生姓名和学号,可以查询自己的各科成绩。
Step1:界面设计:
说明:
SplashView中两个按钮,按钮分别显示“教师”和“学生”,主要用来选择角色,当点击“教师”按钮则出现logView登录界面;
logView为教师操作的界面,主要登记学生的基本信息(姓名和学号)以及语文、数学、英语三科成绩。“确定录入”按钮用来把信息存储在数据库中,这里依然用到了前面教程提到的新浪共享性MySql数据库;
queryView为学生操作的界面,主要用于学生输入姓名和学号来查询成绩,“确定查询”按钮则是访问数据库数据,并把学生的成绩显示到面板上;
对话框主要用来警告信息和提示信息;
这里用到了两个Web组件,一个命名为webt,用来处理教师界面操作数据库插入数据,另一个命名为webs,用来处理学生界面操作数据库查询数据。
注意:一开始将logView和queryView的可视化去掉,实现一开始不显示的效果。
Step2:数据表设计:
设计一个名为“studentscore”带有6个字段变量的数据表,如何创建数据表请查看我之前写的一篇文章《在SAE中创建MySql数据表》,在公众号目录AI教程中点击进去可以找到哈~~
数据表建好之后待用~~接下来进行脚本设计
Step3:脚本设计:
处理教师端程序的脚本代码(php代码详细分析详见我之前写的文章《利用AppInventor实现注册功能(完整版)》)
<?php
$name=$_POST['name'];
$num=$_POST['num'];
$math=$_POST['math'];
$chinese=$_POST['chinese'];
$english=$_POST['english'];
$mysql = new SaeMysql();
$sql = "SELECT * FROM `studentscore` where name='{$name}'";
$mysql->runSql($sql);
$no=$mysql->affectedRows();
if($no==0){
$sql="INSERT INTO `studentscore` (`id` ,`name`,`num`,`math`,`chinese`,`english`)VALUES (NULL , '{$name}','{$num}','{$math}','{$chinese}','{$english}')";
$mysql->runSql($sql);
echo 1;//用户注册
}
else {
echo 2;//用户已存在
}
?>
教师端脚本主要用来将数据插入到数据表中。
处理学生端的脚本代码如下:
?php
$name=$_POST['name'];
$num=$_POST['num'];
$mysql = new SaeMysql();
$sql = "SELECT * FROM `studentscore` where name='{$name}' AND num= '{$num}'";
$mysql->runSql($sql);
$no=$mysql->affectedRows();
if($no==0){
echo 1;//用户或密码错误
}
else {
$data=$mysql->getData($sql);
$math=$data[0]['math'];
$chinese=$data[0]['chinese'];
$english=$data[0]['english'];
$resultStr="姓名:{$name}欢迎你!数学:{$math} 语文:{$chinese} 英语:{$english}";
echo $resultStr;
}
?>
学生端脚本主要用来在数据表中查询数据!
Step4:逻辑设计:
1、初始化
设置切换命令
相信云朵们可以看懂,作用是切换用户界面
2、教师操作界面代码设计
(1)处理”确定录入“按钮点击事件
设置”确定录入“按钮的点击事件,首先判断文本框里面是否为空,有一个为空则显示警告信息,接着判断语文、数学、英语文本框里面输入的是否为数字,是数字再调用teacher这个过程。teacher过程执行的功能如下:
teacher过程主要设置头请求(前面的教程也介绍过,在此略过),设置访问网址,创建请求数据列表。
(2)处理服务器端返回的数据(根据脚本返回的数据显示用户是否存在。)
3、学生界面代码设计
(1)处理“确定查询”按钮点击事件
如果用户名和学号输入都不为空,则调用student过程,该过程定义如下:
(2)处理服务器端返回的数据
(3)返回主界面
Step5:测试
输入学生姓名、学号以及三科成绩,点击确定录入,稍等片刻,会出现“添加成功”的提示
点击“返回”按钮,再次回到主界面,点击“学生”按钮进入到成绩查询界面
最后我们来看一下我们的数据表
我们发现刚才在教师界面输入的用户信息已经被存储到数据表中了,学生界面就是访问了这个数据表直接把数据读取出来的。
云端微课不做网络的搬运工
坚持分享实用信息资讯和原创信息技术教程