SVVRL IM NTU IE Firefox HTML CSS Javascript

SVVRL @ IM. NTU 網站架構：客戶端與伺服端架構 客戶端電腦－ 瀏覽器 (例. IE、 Firefox) 解讀 HTML CSS Javascript 2021/2/27 伺服端電腦－ Application Container (例. Apache) 運算 PHP 資料庫 (例. My. SQL) 執行 SQL 2

SVVRL @ IM. NTU 網站架構：客戶端與伺服端架構 使用者請求 (HTTPRequest) http: //example. com/a. php 客戶端電腦－瀏覽器 (例. IE、Firefox) 解讀運算 <html> <head> 執行結果 <title> 第一個網頁程式 </title> </head> <body> Hello World! </body> </html> 2021/2/27 傳送 <html> <head> <title> 第一個網頁程式 </title> </head> <body> Hello World! </body> </html> 伺服端電腦－ Application Container (例. Apache) <html> 運算a. php <head> <title> 第一個網頁程式 </title> </head> <body> <? echo “Hello World!”; ? > </body> </html> 3

課程大綱 n n Responsive Web Design: Bootstrap Javascript（進階） q q q n SVVRL @ IM. NTU jquery UI jquery plugin 資料庫（進階） q q Transaction row-level lock 2021/2/27 4

Bootstrap – Template SVVRL @ IM. NTU <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <!-- meta資料 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入jquery --> <script type="text/javascript" src="jquery. js"></script> <!-- 引入bootstrap --> <link rel=stylesheet type="text/css" href="bootstrap. css"> <script type="text/javascript" src="bootstrap. js"></script> </head> <body> </html> 2021/2/27 5

Bootstrap – Grid System <!DOCTYPE html> <html lang="en"> 12 columns <head></head> <body> <div class="container"> <div class="row"> <div class="col-md-1">. col-md-1</div> <div class="col-md-1">. col-md-1</div> </div> <body> </html> 2021/2/27 SVVRL @ IM. NTU . container-fluid row必須放在 container中 column放在row中 content放在 column中可再放 row 6

Bootstrap – Grid System SVVRL @ IM. NTU xs (>=0 px) sm (>=768 px) md (>=992 px) lg (>=1200 px) container width auto 750 px 970 px 1170 px class prefix . col-xs- . col-sm- . col-md- . col-lg- gutter width 30 px Browser. col-sm-2 2021/2/27 . col-sm-2 . col-sm-4 7

Bootstrap – Grid System SVVRL @ IM. NTU Browser. col-sm-2 . col-sm-4 container padding-left: 15 px; padding-right: 15 px; row margin-left: -15 px; margin-right: -15 px; column padding-left: 15 px; padding-right: 15 px; <div class="container"> non-grid content <div class="row"> <div class="col-md-1">. col-md-1</div> non-grid content row, column 巢狀結構 2021/2/27 . col-sm-4 對齊 8

Bootstrap – Grid System SVVRL @ IM. NTU 預設col-xs-12 <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div>A</div> <div class="col-sm-6 col-lg-3">B</div> <div class="col-sm-6">C</div> <div class="col-lg-6">D</div> <body> </html> 2021/2/27 若未有對應的class 往下一層級參照 各層級獨立 不互相影響 寫程式順序？ 9

Bootstrap – Grid System SVVRL @ IM. NTU 預設col-xs-12 <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class=" col-sm-6 ">A</div> <div class="col-sm-6 col-lg-3">B</div> <div class="col-sm-6">C</div> <div class="col-lg-6">D</div> <body> </html> 2021/2/27 若未有對應的class 往下一層級參照 各層級獨立 不互相影響 寫程式順序？ 10

Bootstrap – Grid System <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-xs-9">A</div> <div class="col-xs-4">B</div> <div class="col-xs-8">C</div> <body> </html> 2021/2/27 SVVRL @ IM. NTU Column Wrapping 11

Bootstrap – Grid System <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-md-4">A</div> <div class=" col-md-4 col-md-offset-4 ">B</div> <body> </html> 2021/2/27 SVVRL @ IM. NTU Offsetting Columns 12

Bootstrap – Grid System SVVRL @ IM. NTU Column Ordering <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8 col-md-push-4">title</div> <div class=" col-xs-12 col-md-4 col-md-pull-8">image</div> <body> </html> 2021/2/27 13

Bootstrap – Grid System <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8">title</div> <div class=" col-xs-12 col-md-4"> <div class="row"> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> </div> <body> </html> 2021/2/27 SVVRL @ IM. NTU Nesting Columns 14

SVVRL @ IM. NTU Bootstrap – Utility Classes xs sm md lg . visible-xs-* visible hidden . visible-sm-* hidden visible hidden . visible-md-* hidden visible hidden . visible-lg-* hidden visible . hidden-xs hidden visible . hidden-sm visible hidden visible . hidden-md visible hidden visible . hidden-lg visible hidden 2021/2/27 class css . visible-*-block display: block . visible-*-inline display: inline . visible-*-inline-block display: inline-block 15

Bootstrap – Clearfix SVVRL @ IM. NTU <div class="container"> <div class="row"> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-xs-block visible-sm-block"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-md-block visible-lg-block"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-xs-block visible-sm-block"></div> <div class=" clearfix visible-md-block visible-lg-block"></div> 2021/2/27 16

Bootstrap – CSS n n media query percentage q q q n width margin left, right display q q none block inline-block 2021/2/27 SVVRL @ IM. NTU bootstrap. css RWD 行事曆 18

課程大綱 n n Responsive Web Design: Bootstrap Javascript（進階） q q q n SVVRL @ IM. NTU jquery UI jquery plugin 資料庫（進階） q q Transaction row-level lock 2021/2/27 19

SVVRL @ IM. NTU jquery語法結構 $("#user"). css("background-color", "#a 00 a 06"); 選擇器 2012/10/11 對這些物件做事情 網站程式教學 20

SVVRL @ IM. NTU jquery選擇器 n n n $("#user") $(". title") $("div") $("A > B") $("A[attr='attr_value']") 2012/10/11 網站程式教學 21

jquery SVVRL @ IM. NTU <!DOCTYPE html> <html lang="en"> <head> $(document). ready(function(){ $("#block 21"). click(function(){ $(this). css("background-color", "#a 00 a 06"); }); </head> <body> <div id="block 21">Hello World!</div> <body> </html> 2021/2/27 22

SVVRL @ IM. NTU jquery UI DEMO 2021/2/27 23

jquery UI SVVRL @ IM. NTU <!DOCTYPE html> 引入jquery <html lang="en"> <head> <!-- 引入jquery --> <link rel=stylesheet type="text/css" href="jquery-ui. css"> <script type="text/javascript" src="jquery. js"></script> <script type="text/javascript" src="jquery-ui. js"></script> <script type="text/javascript"> function load(){ $("#date"). datepicker(); } </script> </head> <body onload=“load(); ”> <input id="date" type="text" /> <body> </html> 2021/2/27 UI HTML物件 JS函式呼叫 24

jquery UI - option SVVRL @ IM. NTU 選項: 允許初始化不 <html lang="en"> <head> 同設定 <!-- 引入jquery --> <link rel=stylesheet type="text/css" href="jquery-ui. css"> <script type="text/javascript" src="jquery. js"></script> <script type="text/javascript" src="jquery-ui. js"></script> <script type="text/javascript"> function load(){ $("#date"). datepicker({ min. Date: +0, max. Date: "+1 m", show. Week: true, date. Formate: "yy-mm-dd" }); } </script> </head> <body> <input id="date" type="text" /> <body> </html> 2021/2/27 . datepicker本質: 函數呼叫 選項本質: 函數參數 參數格式: javascript object (map寫法 ) key/value pairs 25

jquery UI - event SVVRL @ IM. NTU 與JS事件概念相同 <html lang="en"> <head> <!-- 引入jquery --> <link rel=stylesheet type="text/css" href="jquery-ui. css"> <script type="text/javascript" src="jquery. js"></script> <script type="text/javascript" src="jquery-ui. js"></script> 不同的UI物件, 有不同的事件 <script type="text/javascript"> function load(){ $("#date"). datepicker({ Callback function: on. Select: function (date. Text, inst){ 匿名或具名 alert(date. Text); $(this). css(" background-color", “#a 00 a 06"); } }); } Callback function參數 </script> </head> <body> this物件 <input id="date" type="text" /> <body> </html> 2021/2/27 26

jquery UI - method SVVRL @ IM. NTU <script type="text/javascript"> $(document). ready(function (){ $("#date"). datepicker({ min. Date: +0, 方法: 動態改變UI物 max. Date: "+1 m", show. Week: true, 件設定 date. Formate: "yy-mm-dd" }); function click_button(){ $("#date"). datepicker("option", " date. Formate ", " yy/mm/dd "); } </script> <input id="date" type="text“ /> <div id="button" onclick="click_button()"></div> 2021/2/27 this物件 27

jquery plugin – list editor SVVRL @ IM. NTU ; (function($) { var methods = { init : function(settings){ }, }; //public functions //private variables //private functions $. fn. list_editor = function(method) { 1)); /* Method calling logic */ if (methods[method]) { return methods[method]. apply(this, Array. prototype. slice. call(arguments, } else if ( typeof method === 'object' || ! method ) { return methods. init. apply(this, arguments); } else { $. error( 'Method ' + method + ' does not exist on j. Query. list_editor' ); } }; })(j. Query); 2021/2/27 28

課程大綱 n n Responsive Web Design: Bootstrap Javascript（進階） q q q n SVVRL @ IM. NTU jquery UI jquery plugin 資料庫（進階） q q Transaction row-level lock 2021/2/27 29

SVVRL @ IM. NTU transaction – 動機 (1/4) 匯款 200元 Steve Karen user name money Steve 1200 Karen 2000 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 3 select money from user set where name="Karen" 4 update user set money="2200" where name="Karen" 2012/10/11 網站程式教學 30

transaction – 動機 (2/4) n SVVRL @ IM. NTU 不知名原因終止執行（例如斷線） 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 3 select money from user set where name="Karen" 4 update user set money="2200" where name="Karen" Ｘ user 2012/10/11 name money Steve 1000 Karen 2000 Ｘ 網站程式教學 31

transaction – 動機 (3/4) n SVVRL @ IM. NTU 另一個程序讀取不一致 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 1 select name, money from user 3 select money from user set where name="Karen" 4 update user set money="2200" where name="Karen" user 2012/10/11 name money Steve 1000 Karen 2000 Ｘ 網站程式教學 32

transaction – 動機 (4/4) n SVVRL @ IM. NTU 另一個程序同時更新同一筆相同欄位資料 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 3 select money from user set where name="Karen" 4 update user set money="2200" where name="Karen" 2012/10/11 網站程式教學 33

transaction – 結構 (1/3) n transaction q n transaction 開始之指令 commit q n 由一連串database query組成之不可再分割的 作 begin q n SVVRL @ IM. NTU transaction完成之指令，接收到commit之後，資 料庫狀態才會改變 rollback q transaction結束之指令，代表transaction已結束， 資料庫狀態不會有任何改變 2012/10/11 網站程式教學 34

transaction – 結構 (2/3) SVVRL @ IM. NTU <? $link = mysqli_connect( "localhost", "user", "password", "db_name" ); transaction begin mysqli_autocommit($link, false); ……… mysqli_commit($link); transaction commit ? > 2012/10/11 網站程式教學 35

transaction – 結構 (3/3) SVVRL @ IM. NTU <? $link = mysqli_connect( "localhost", "user", "password", "db_name" ); transaction begin mysqli_autocommit($link, false); ……… if($transaction_result==true){ mysqli_commit($link); } else{ mysqli_rollback($link); } ? > 2012/10/11 transaction commit transaction rollback 網站程式教學 36

SVVRL @ IM. NTU transaction – 解決之道 (1/3) n 不知名原因終止執行（例如斷線） 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 3 select money from user set where name="Karen" 4 update user set money="2200" where name="Karen" Ｘ user 2012/10/11 rollback name money Steve 1200 Karen 2000 網站程式教學 Atomicity 37

SVVRL @ IM. NTU transaction – 解決之道 (2/3) n 另一個程序讀取不一致 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 1 select name, money from user 3 select money from user set where name="Karen" 4 未commit之前，資料庫維持原本狀態。 update user set money="2200" where name="Karen" user 2012/10/11 name money Steve 1200 Karen 2000 Consistency 網站程式教學 38

SVVRL @ IM. NTU transaction – 解決之道 (3/3) n 另一個程序同時更新同一筆相同欄位資料 1 select money from user set where name="Steve" 2 update user set money="1000" where name="Steve" 3 selecttransaction配合lock機制，即可解決。 money from user set where name="Karen" 3 select money from user set where name="Karen" 4 update user set money="2200" where name="Karen" 2012/10/11 Isolation 網站程式教學 39

row-level lock (1/3) n lock分類 q q n SVVRL @ IM. NTU 依鎖定層級分類：table lock、row-level lock 依操作動作分類：read lock、write lock row-level lock q q 以row為單位進行鎖定 較table lock常用，實務上大部份的應用鎖定某幾 列資料即可，若使用table lock會造成效率低落 2012/10/11 網站程式教學 41

row-level lock (2/3) n n 運作方式 read lock write lock read lock O wait write lock wait read lock q n SVVRL @ IM. NTU SQL關鍵字：lock in share mode write lock q SQL關鍵字：for update 2012/10/11 網站程式教學 42

row-level lock (3/3) n SVVRL @ IM. NTU 另一個程序同時更新同一筆相同欄位資料 1 select money from user set where name="Steve" for update 2 update user set money="1000" where name="Steve" 3 select money from user set where name="Karen " for update 4 update user set money="2200" where name="Karen" 2012/10/11 網站程式教學 43

SVVRL @ IM. NTU Q&A 2021/2/27 44