SEEM4570 System Design and Implementation. Lecture 6 Game Part II

Transcription

1 SEEM4570 System Design and Implementation Lecture 6 Game Part II

2 Preparation We continue the code in the last lecture (Lecture 06) Gabriel Fung 2

3 Programming with Client-Server System In practice, a game usually store some important data in a centralized database system at the game server. E.g. scores of different players so that a ranking board can be displayed Gabriel Fung 3

4 Revise game.js Revise the method runtime of the object gamejs: runtimer: function(){ else{ $.ajax{ type: 'POST, data: {"score":currentscore}, url: xxxxxx", success: function(data){ console.log("score is sent to the server. + data); }, error: function(e){ console.log("error when sending the score to the server."); } } } } 2017 Gabriel Fung 4

5 Revise game.js (cont d) You will get the following screen with error message. No worry, that s completely normal because we did not write the server side handling yet Gabriel Fung 5

6 MariaDB and PHP In this course, we will use MariaDB as the database management system and PHP as the server side script Gabriel Fung 6

7 MariaDB Setup Follow your Tutorial Note 1, you should setup a XAMPP server with MariaDB. Alternatively, you can use SEEM department server. We already setup the environment for you. If you choose this approach, then in the following slides, please skill the one Create A User 2017 Gabriel Fung 7

8 Create A Database Login to PHPMyAdmin, and setup your own database. In this demo, our database is called seem4570.y17_t1.cordova 2017 Gabriel Fung 8

9 Create A User If you create your own server (not SEEM provided one), then you need to create a user. Make sure the host is Gabriel Fung 9

10 Create a Table In our database, create a table to store the information. Our table called player_score and contains 3 columns: id int Primary key Autoincrement time Current timestamp score int 2017 Gabriel Fung 10

11 PHP PHP stands for PHP: Hypertext Preprocessor A widely-used, open source scripting language PHP scripts executed on the server JavaScript executed on the client side (e.g. phone). Free to download and use Runs on different platforms Windows, Linux, Unix, Mac OS X, etc. Compatible with almost all servers used today Apache, IIS, etc. Easy to learn and runs efficiently on the server side 2017 Gabriel Fung 11

12 Important Note We will cover the very basic elements of PHP that would be just enough for running our game: Read data from the clients Connect to MariaDB and read/write data from/to it. Send data to the clients 2017 Gabriel Fung 12

13 Basic PHP Syntax The default file extension for PHP files is ".php". A PHP script starts with <?php and ends with?>: <?php?> A PHP can contain PHP codes and any other text. <?php?> <?php..?> 2017 Gabriel Fung 13

14 PHP Variables Similar to JavaScript, PHP is dynamic typing, i.e., you do not need to define the variable data types. A variable is denoted by "$". <?php $x = 5; $y = 6; $z = $x+$y; $a = "Hello"; $b = array();?> 2017 Gabriel Fung 14

15 PHP Arrays There are many ways to create arrays: Assign values during initialization: $cars = array("volvo","bmw"); $nameandage = array("peter"=>35,"ben"=>37); Assign values after initialization: $cars = array(); $cars[0]="volvo"; $cars[1]="bmw"; $nameandage = array(); $nameandage['peter']=35; $nameandage ['Ben']=37; 2017 Gabriel Fung 15

16 PHP and Database Communication To communicate with MariaDB using PHP, there are two modules: Mysql module It uses the concept of "function" to develop Mysqli module i statnds for improvement It uses the concept of OO to develop (so it supports OOP object oriented programming. We will talk about OOP later. According to official PHP, MySQLi is a preferred option Gabriel Fung 16

17 Object Oriented vs. Procedural Almost all mysqli methods offer you two way to use it: Object Oriented Style Procedural Style Both their functionalities are identical, except the syntax are different. We will use Object Oriented Style whenever possible in this course as it is usually more robust 2017 Gabriel Fung 17

18 Connect to Database Before we can access data from MariaDB, we must connect to it first. Create a file called upload_score.php: <?php $con = new mysqli(" ", "username","password", "database"); if ($con->connect_error){ // Check connection } echo "Failed to connect to MySQL: ".$con->connect_error; $con->close(); // close the connection is good practice?> 2017 Gabriel Fung 18

19 Connect to Database (cont d) Open a browser, type the URL to make sure the connection is OK (no message means OK). If you use your own server, the address should be: If you use SEEM server, the address should be: Gabriel Fung 19

20 Read Data From Client To read the POST data from client, we use a system variable called $_POST. Suppose in our game.js, we have: data: {"name":"mary", "score":100}, Then the above JSON data is stored in the system variable $_POST, so that: $_POST["name"] stored Mary $_POST["score"] stored Gabriel Fung 20

21 Insert Data Into Database To insert data, we use the method query(). Revise upload_score.php: <?php $con = new mysqli(" ", "username","password", "database"); $score = $_POST["score"]; $status = $con->query("insert INTO player_ score (score) VALUES ($score)"); if(!$status){ // make sure the insert is successful } echo ("Error in inserting the score"); $con->close(); // close the connection is good practice?> 2017 Gabriel Fung 21

22 Insert Data Into Database (cont d) In case you are inserting string into database, please make sure you encapsulate the string using the method real_escape_string ; otherwise there will be serious of security problem: Example: $_POST["name"] = $con-> real_escape_string($_post["name"]); 2017 Gabriel Fung 22

23 Putting All Together Go back to game.js, make sure you type the URL correctly. You should get the following screen: 2017 Gabriel Fung 23

24 Ranking Page The page ranking.html shows the ranking of the people who played the game. Outline: In the server, create a page get_scores.php : Get the top 10 scores from the table player_score and order by the column score in descending order: SELECT * FROM player_score ORDER BY score desc LIMIT 10 ; In ranking.js, use AJAX to connect to get_scores.php, get the scores and display the results 2017 Gabriel Fung 24

25 Get Data From Database One very handy method is to retrieve all data and put into an associative array, then return to the user as JSON (if the data size is small). In get_scores.php: <?php $con = ; $result = $con->query("select * FROM "); $con->close(); // close the connection is good practice $data = $result->fetch_array(mysqli_assoc); echo json_encode($data);?> 2017 Gabriel Fung 25

26 Get Data From Database (cont d) In ranking.js: var rankingjs = { init: function() { } $.ajax({ }); type: 'GET', datatype: 'json', url: success: function(data){ } console.log(data); for(var i=0; i<data.length; i++){ } console.log(data[i]['time'] + ": " + data[i]['score']); 2017 Gabriel Fung 26

27 Ranking Page Detail An Exercise For You For the details of the ranking.html and ranking.js, they will be left as an exercise for you Gabriel Fung 27

28 Enhancement The following enhancement is left as an exercise for you. Now, there is no way to identify who submitted the score. Having a name column in the player_score table is great. Ask the player to type his/her name using a text field once the game is completed: <input id= player_name type= text name= player_name > In jquery, you can get the value of this text field by: var playername = $( #player_name ).val(); So you can submit this information to the server: data: { score : currentscore, name : $( #player_name ).val()} 2017 Gabriel Fung 28

29 What You Learned Create MariaDB databases, tables and users Interact with MariaDB using PHP Basic client-server programming 2017 Gabriel Fung 29