1 實驗十二：待辦事項程式 ( 儲存在遠端伺服器上 ). 實驗十二 2  主題  本實驗為練習使用 Web Service 操作資料庫  使用資料庫用來建立、新增、刪除、修改資料等功能  目的  學習如何使用 Web Service 的連線  了解與遠端伺服器的參數傳遞  環境需求 

Presentation on theme: "1 實驗十二：待辦事項程式 ( 儲存在遠端伺服器上 ). 實驗十二 2  主題  本實驗為練習使用 Web Service 操作資料庫  使用資料庫用來建立、新增、刪除、修改資料等功能  目的  學習如何使用 Web Service 的連線  了解與遠端伺服器的參數傳遞  環境需求 "— Presentation transcript:

1 1 實驗十二：待辦事項程式 ( 儲存在遠端伺服器上 )

2 實驗十二 2  主題  本實驗為練習使用 Web Service 操作資料庫  使用資料庫用來建立、新增、刪除、修改資料等功能  目的  學習如何使用 Web Service 的連線  了解與遠端伺服器的參數傳遞  環境需求  Java SE Development Kit (JDK)  Android SDK  Eclipse  ADT  Apache  MySQL  PHP

3 實驗十二範例 3  將製作一個行程事項列表應用程式  按下新增後，會將輸入的資訊存入遠端伺 服器資料庫

4 網頁端程式

5 範例使用的資料庫  資料庫名稱 :schedule  資料表名稱 :todolist 欄位名稱資料型態預設備註 _idint(11)primary key auto_increment 流水號 ( 系統自動新增 ) datevarchar(254) 日期 timevarchar(254) 時間 titlevarchar(254) 標題

6 在 MySQL 建立資料庫  http:// 主機的 IP/phpMyAdmin

7 在 MySQL 建立資料表

8 在 MySQL 建立欄位資料  自行建立  Sql 檔匯入

9 C:\AppServ\www\php\setting.php  PHP 網頁與資料庫連線 <? $dbhost = “localhost”; 資料庫 IP 或是 domain name $dbname = "schedule"; 資料庫名稱 $dbuser = "android"; 帳號 $dbpass = "sqllite"; 密碼 $db = mysql_connect($dbhost, $dbuser, $dbpass); mysql_query("SET NAMES 'utf8'"); global $db; mysql_select_db($dbname, $db); ?>

10 C:\AppServ\www\php\getalltodo.php  顯示資料表所有的資料 <? echo ' '; include "./setting.php"; $result = mysql_query(“SELECT * FROM todolist”) or die(mysql_error()); if (mysql_num_rows($result) > 0) { while ($row = mysql_fetch_array($result)) { echo " "; echo " ".$row["_id"]." "; echo " ".$row["date"]." "; echo " ".$row["time"]." "; echo " ".$row["title"]." "; echo " "; } echo ' '; ?> 查詢 todolist 的所有資料

11 所有資料的 XML 1 2012/08/20 13:30 Android 1 2 2012/08/21 09:20 Android 2

12 C:\AppServ\www\php\addtodo.php  新增資料 <? echo ' '; include "./setting.php"; $date = $_POST['date']; $time = $_POST['time']; $title = $_POST['title']; $sql = "INSERT INTO todolist(date,time,title) VALUES('$date','$time','$title')"; $result = mysql_query($sql); if($result) echo "1"; else echo "0"; echo ' '; ?> 新增資料到 todolist 中

13 C:\AppServ\www\php\updatetodo.php  更新資料 <? echo ' '; include "./setting.php"; $id = $_POST['_id']; $date = $_POST['date']; $time = $_POST['time']; $title = $_POST['title']; $sql = "UPDATE todolist SET date='$date',time='$time',title='$title' WHERE _id=$id"; $result = mysql_query($sql); if($result) echo "1"; else echo "0"; echo ' '; ?> 更新資料到 todolist 中

14 C:\AppServ\www\php\deltodo.php  刪除資料 <? echo ' '; include "./setting.php"; $id = $_POST['_id']; $sql = "DELETE FROM todolist WHERE _id=$id"; $result = mysql_query($sql); if($result) echo "1"; else echo "0"; echo ' '; ?> 刪除資料

15 手機端程式

16 加入使用網路的權限  AndroidManifest.xml  點選 Permissions 新增 新增 Uses Permission 使用網路 1 1

17 res/layout/activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <EditText android:id=“@+id/editText1” android:layout_weight=“1” android:layout_width="match_parent" android:layout_height="wrap_content" android:hint=“ 輸入日期 ” android:inputType="date" /> <EditText android:id=“@+id/editText2” android:layout_weight=“1” android:layout_width="match_parent" android:layout_height="wrap_content" android:hint=“ 輸入時間 ” android:inputType="time" /> // 接下頁 2 2 輸入日期和時間 的編輯框

18 res/layout/activity_main.xml <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <EditText android:id=“@+id/editText3” android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint=" 輸入標題 " /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 新增 " /> <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" /> 3 3 輸入標題的編輯 框和新增的按鈕

19 新增 res/layout/list.xml  在 layout 按右鍵 → 新建 →Android XML File 4 4 XML 名稱

20 res/layout/list.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:layout_gravity="center_vertical" android:layout_weight="1" /> 一列列表選項佈局 5 5

21 src/MainActivity.java public class MainActivity extends Activity { EditText inputdate,inputtime,inputtitle; ListView lv; SimpleAdapter adapter; ArrayList > todolist; static final int SHOW_RESULT = 0; 自訂 requestCode @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); inputdate=(EditText)findViewById(R.id.editText1); inputtime=(EditText)findViewById(R.id.editText2); inputtitle=(EditText)findViewById(R.id.editText3); lv=(ListView)findViewById(R.id.listView1); lv.setOnItemClickListener(this); Button bt=(Button)findViewById(R.id.button1); bt.setOnClickListener(this); GetAllToDoList todolist=new GetAllToDoList(); todolist.execute(); } 6 6 7 7 產生一個執行緒用來處理 查詢遠端資料庫的資料

22 src/MainActivity.java 8 8 9 9 將滑鼠移到 AsyncTask ，匯入 AsyncTask 將滑鼠移到 GetAllToDoList ，新增未實作方法

23 src/MainActivity.java 10 @Override protected ArrayList > doInBackground( Void... arg0) { HttpClient client = new DefaultHttpClient(); HttpPost request = new HttpPost(“http:// 遠端伺服器 /php/getalltodo.php"); HttpResponse response = client.execute(request); return null; } 將滑鼠移到 client.execute() 中，產生 try/catch 區塊， 避免執行失敗造成程式關閉 連線到遠端伺服器的網址

24 src/MainActivity.java @Override protected ArrayList > doInBackground( Void... arg0) { try { HttpResponse response = client.execute(request); DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return null; } 11 取得 DocumentBuilder 物件，將資料以 DOM 的方式存到手機中 加入 catch

25 src/MainActivity.java try { HttpResponse response = client.execute(request); DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); Document doc = builder.parse(response.getEntity().getContent()); NodeList items=doc.getElementsByTagName("item"); ArrayList > list=new ArrayList >(); // 接下頁 } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (ParserConfigurationException e) { e.printStackTrace(); } catch (IllegalStateException e) { e.printStackTrace(); } catch (SAXException e) { e.printStackTrace(); } return null; 12 解析 XML 回應的內容 取得 XML 中標籤名稱為 item 的 NodeList

26 src/MainActivity.java try { for (int i=0;i<items.getLength();i++) { Node x=items.item(i); NodeList childs=x.getChildNodes(); int num=0; HashMap row=new HashMap (); for(int j=0;j<childs.getLength();j++){ if(childs.item(j).getNodeName().equals("_id") || childs.item(j).getNodeName().equals("date") || childs.item(j).getNodeName().equals("time") || childs.item(j).getNodeName().equals("title")){ num++; if(childs.item(j).hasChildNodes()){ row.put(childs.item(j).getNodeName(), childs.item(j).getChildNodes().item(0).getNodeValue().trim());} } if(num>0) list.add(row); } return list; } 13

27 src/MainActivity.java @Override protected void onPostExecute(ArrayList > result) { todolist=result; adapter= new SimpleAdapter(MainActivity.this,result, R.layout.list, new String[]{"date","time","title"}, new int[]{R.id.textView1,R.id.textView2,R.id.textView3}); lv.setAdapter(adapter); super.onPostExecute(result); } 14 Alt+/ 覆寫 onPostExecute() 方法 查詢的結果存到 SimpleAdapter 中，顯示在列表處中

28 src/MainActivity.java public void onClick(View arg0) { AddToDo todo=new AddToDo(); todo.execute(inputdate.getText().toString(), inputtime.getText().toString(), inputtitle.getText().toString()); } 15 將滑鼠移到 AddToDoList ，新增未實作方法 新增資料的執行緒

29 src/MainActivity.java protected String doInBackground(String... params) { HttpClient client = new DefaultHttpClient(); HttpPost request = new HttpPost("http:// 遠端伺服器 /php/addtodo.php"); List post_params = new ArrayList (); post_params.add(new BasicNameValuePair("date", params[0])); post_params.add(new BasicNameValuePair("time", params[1])); post_params.add(new BasicNameValuePair("title", params[2])); UrlEncodedFormEntity formEntity = new UrlEncodedFormEntity(post_params); return null; } 16 HttpPost 傳送的參數和參數的值 產生 try/catch 區塊，避免執行失敗造成程式關閉

30 src/MainActivity.java try { UrlEncodedFormEntity formEntity = new UrlEncodedFormEntity(post_params); HttpResponse response = client.execute(request); DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); Document doc = builder.parse(response.getEntity().getContent()); NodeList items=doc.getElementsByTagName("result"); Node x=items.item(0); return x.getChildNodes().item(0).getNodeValue().trim(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (ParserConfigurationException e) { e.printStackTrace(); } catch (IllegalStateException e) { e.printStackTrace(); } catch (SAXException e) { e.printStackTrace(); } return null; 17

31 src/MainActivity.java @Override protected void onPostExecute(String result) { if(result.equals("1")) { GetAllToDoList todolist=new GetAllToDoList(); todolist.execute(); Toast.makeText(MainActivity.this, " 新增成功 ", Toast.LENGTH_LONG).show(); inputdate.setText(""); inputtime.setText(""); inputtitle.setText(""); }else Toast.makeText(MainActivity.this, " 新增失敗 ", Toast.LENGTH_LONG).show(); super.onPostExecute(result); } 18 Alt+/ 覆寫 onPostExecute() 方法

32 src/MainActivity.java public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) { HashMap record=todolist.get(arg2); String id=record.get("_id"); Intent intent = new Intent(); intent.setClass(this, modify.class); Bundle bdl = new Bundle(); bdl.putString("id", id + ""); TextView date=(TextView)arg1.findViewById(R.id.textView1); bdl.putString("date", date.getText()+""); TextView time=(TextView)arg1.findViewById(R.id.textView2); bdl.putString("time", time.getText()+""); TextView title=(TextView)arg1.findViewById(R.id.textView3); bdl.putString("title", title.getText()+""); intent.putExtras(bdl); startActivityForResult(intent, SHOW_RESULT); } 19 開啟 modify 的活動視窗 將列表處的資料綁在 Bundle 中傳遞過去 開啟需要回傳結果的活動視窗

33 src/MainActivity.java @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == SHOW_RESULT) { if (resultCode == RESULT_OK) { GetAllToDoList todolist=new GetAllToDoList(); todolist.execute(); } 20 Alt+/ 覆寫 onActivityResult() 方法

34 新增 modify 活動視窗  套件名稱按右鍵 → 新建 → 其他 21

35 新增 modify 活動視窗 22 活動視窗名稱

36 res/layout/activity_modify.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 日期 " /> <EditText android:id="@+id/editText1" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="date" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/textView2" android:text=" 時間 " android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:id="@+id/editText2" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="time" /> // 接下頁 23 修改日期和時間 的編輯框

37 res/layout/activity_modify.xml <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 標題 " /> <EditText android:id="@+id/editText3" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text=" 修改 " /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text=" 刪除 " /> 24 修改標題的編輯框 修改和刪除的按鈕

38 src/modify.java public class modify extends Activity implements OnClickListener { EditText dateET,timeET,titleET; String id,date,time,title; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_modify); Button btn = (Button) findViewById(R.id.button1); btn.setOnClickListener(this); btn = (Button) findViewById(R.id.button2); btn.setOnClickListener(this); Bundle bdl = getIntent().getExtras(); id = bdl.getString("id", "0"); date = bdl.getString("date", "0"); time = bdl.getString("time", "0"); title = bdl.getString("title", "0"); dateET = (EditText) findViewById(R.id.editText1); dateET.setText(date); timeET = (EditText) findViewById(R.id.editText2); timeET.setText(time); titleET = (EditText) findViewById(R.id.editText3); titleET.setText(title); } 25 取得主程式傳遞過來的資料

39 src/modify.java public void onClick(View v) { switch (v.getId()) { case R.id.button1: UpdateToDo update = new UpdateToDo(); update.execute(id,dateET.getText().toString(), timeET.getText().toString(),titleET.getText().toString()); break; case R.id.button2: DelToDo del=new DelToDo(); del.execute(id); break; } Intent intent = new Intent(); setResult(RESULT_OK, intent); finish(); } 26 更新資料執行緒 判斷哪個按鈕被按下 刪除資料執行緒 回傳結果回主程式 關閉視窗

40 src/modify.java class UpdateToDo extends AsyncTask { @Override protected String doInBackground(String... params) { HttpClient client = new DefaultHttpClient(); HttpPost request = new HttpPost("http:// 遠端伺服器 /php/updatetodo.php"); List post_params = new ArrayList (); post_params.add(new BasicNameValuePair("_id", params[0])); post_params.add(new BasicNameValuePair("date", params[1])); post_params.add(new BasicNameValuePair("time", params[2])); post_params.add(new BasicNameValuePair("title", params[3])); // 接下頁 return null; } 27

41 src/modify.java try { UrlEncodedFormEntity formEntity = new UrlEncodedFormEntity(post_params); request.setEntity(formEntity); HttpResponse response = client.execute(request); DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); Document doc = builder.parse(response.getEntity().getContent()); NodeList items=doc.getElementsByTagName("result"); Node x=items.item(0); return x.getChildNodes().item(0).getNodeValue().trim(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (IllegalStateException e) { e.printStackTrace(); } catch (SAXException e) { e.printStackTrace(); } catch (ParserConfigurationException e) { e.printStackTrace(); } 28

42 src/modify.java @Override protected void onPostExecute(String result) { if(result.equals("1")) Toast.makeText(modify.this, " 更新成功 ", Toast.LENGTH_LONG).show(); else Toast.makeText(modify.this, “ 更新失敗 ”, Toast.LENGTH_LONG).show(); super.onPostExecute(result); } 29 Alt+/ 覆寫 onPostExecute() 方法

43 src/modify.java class DelToDo extends AsyncTask { @Override protected String doInBackground(String... params) { HttpClient client = new DefaultHttpClient(); HttpPost request = new HttpPost("http:// 遠端伺服器 /php/deltodo.php"); List post_params = new ArrayList (); post_params.add(new BasicNameValuePair("_id", params[0])); return null; } 30

44 src/modify.java try { UrlEncodedFormEntity formEntity = new UrlEncodedFormEntity(post_params); request.setEntity(formEntity); HttpResponse response = client.execute(request); DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); Document doc = builder.parse(response.getEntity().getContent()); NodeList items=doc.getElementsByTagName("result"); Node x=items.item(0); return x.getChildNodes().item(0).getNodeValue().trim(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (ParserConfigurationException e) { e.printStackTrace(); } catch (IllegalStateException e) { e.printStackTrace(); } catch (SAXException e) { e.printStackTrace(); } 31

45 src/modify.java @Override protected void onPostExecute(String result) { if(result.equals("1")) Toast.makeText(modify.this, " 刪除成功 ", Toast.LENGTH_LONG).show(); else Toast.makeText(modify.this, " 刪除失敗 ", Toast.LENGTH_LONG).show(); super.onPostExecute(result); } 32 Alt+/ 覆寫 onPostExecute() 方法