บทที่ 7 สถาปัตยกรรมเทียร์ (tier architecture) และ...

วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)

สถาปัตยกรรมเทียร์ (Tier Architecture) และ การพัฒนาแอปพลิเคชันบนเว็บแบบ Client/Server บทที่ 7

เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)

1

วัตถุประสงค์การเรียนรู้


2

เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับสถาปัตยกรรมเทียร์ (Tier architecture) และระบบฐานข้อมูลและเว็บอย่างง่าย

เพื่อให้ผู้เรียนสามารถน าเสนอการด าเนินงานเกี่ยวกับระบบฐานข้อมูลบนเว็บร่วมกับฐานข้อมูลเบื้องต้นได้

หัวข้อ


3

บทน า (Overview) สถาปัตยกรรมเทยีร์ (Tier architecture)

ระบบฐานข้อมูลและเว็บ (Web and Database System)

Xampp เว็บเซิร์ฟเวอร์

ภาษา PHP เบื้องต้น

ฐานข้อมูล MySQL เบื้องต้น

สรุป (Summary)

สถาปัตยกรรมเทียร์ (Tier architecture)

เอกสารประกอบการสอน

4

รายวิชา เทคโนโลยีเว็บ (04-06-204)

บทน า (Overview)


5

สถาปัตยกรรมเอ็นเทียร์ (N-Tier) จ าแนกออกเป็น 3 รูปแบบ ดังนี้ 2 Tier

Client/Server เป็นการรับ-ส่งข้อมูลจากโปรแกรมไปยัง Database Server ส่วนใหญ่จะใช้ในงานส านักงานหรือในองค์กรเดียวกัน

3 Tier สิ่งที่เพิ่มเข้ามาเรียกว่า “Middle Tier” หรือ “Middleware” Software จัดการการรับส่งข้อมูลระหว่าง Client/Server ส่งผลให้ระบบมีประสิทธิภาพมากขึ้น

Multi-tier (N-tier) Tier (ชั้น) จ านวนมากมาย (n-tier n = แทนชั้นใดๆ) มีการแตกแขนง Tier ต่างๆ มากขึ้นในชั้นของ Middle และ Server เพื่อให้ระบบท างานได้อย่างมีประสิทธิภาพ มีการเก็บข้อมูลอย่างเป็นระเบียบและรองรับผู้ใช้งานที่

เพิ่มขึ้น

สถาปัตยกรรม 2 เทียร์ (2-tier architecture)


6

Client–server model เป็นโครงสร้าง application ที่แยกส่วนการด าเนินงานระหว่าง Servers

ฝั่งผู้ให้บริการหรือทรัพยากร

สามารถประมวลผลโปรแกรมได้มากกว่าหนึ่งโปรแกรมบน

Clients

ผู้ขอใช้บริการหรือทรัพยากร

การสื่อสารระหว่าง Clients/servers ด าเนินการผ่านระบบเครือข่าย โดย Client จะเริ่มต้นสื่อสารและ Server จะอยู่ในสถานะรอการเชื่อมต่อ

สถาปัตยกรรม 2 เทียร์ (ต่อ)


7

ที่มา: http://www.cs.science.cmu.ac.th/

Static Web

Dynamic Web

สถาปัตยกรรม 2 เทียร์ (ต่อ)


8

แอปพลิเคชันประยุกต์ที่ใช้สถาปัตยกรรม Client/Server E-mail Network printing World Wide Web (WWW)

Server Module IIS (ASP/ASP.NET) Apache, XAMPP (PHP) Tomcat (JSP)

สถาปัตยกรรมทรเีทียร์ (Three-tier architecture)


9

Three-tier architecture ประกอบด้วย ดังนี ้ Presentation tier (View)

Domain logic tier (Controller)

Data storage tier (Model)

Layer และ Tier มีแนวคิดเดียวกันสามารถใช้ทดแทนกันได้

ส่วนใหญ่ใช้งานบนแพลตฟอร์มที่ต่างกัน

ทรีเทียร์โมเดลเป็นหนึ่งใน Software Architecture Patterns

เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204) 10

ที่มา: http://en.wikipedia.org/wiki/Multitier_architecture

User Interface Translate tasks และ

result ไปยังผู้ใช้

Process commands ตรรกะการตัดสินใจ การค านวณ

ฐานข้อมูล การจัดเก็บไฟล์

สถาปัตยกรรมทรีเทียร:์ Model-View-Controller (MVC)


11

Model-View-Controller MVC รูปแบบโครงสร้างระบบจะแยกส่วนประมวลผล ออกจากส่วนแสดงผล

Models อธิบายโครงสร้างข้อมูล ในรูปแบบคลาส

แบบจ าลองมีฟังก์ชันที่ช่วยให้เพิ่ม ปรับปรุงและลบข้อมูลในฐานข้อมูล

View ข้อมูลที่แสดงให้กับผู้ใช้ View

ส่วนใหญ่จะเป็นเว็บเพจ สามารถเป็นเพียงบางส่วนของหน้าได้ ส่วนหัว ส่วนท้าย มันสามารถจะเป็นหน้า RSS หรือเป็นอย่างอื่นได้ที่เป็น “เพจ”

Controller สื่อกลางระหว่าง Model, View และแหล่งที่มาอื่นๆ ที่ต้องการท างานร่วมกับ HTTP request

และการสร้างเว็บเพจ

เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204) 12 ที่มา: http://dailydevtips.com

สถาปัตยกรรมทรเีทียร์ (ต่อ)


13

วัตถุประสงค์ Upgraded หรือ Replaced ทันทีทันใดส าหรับการตอบสนองส าหรับการ

เปลี่ยนแปลง Requirements

Technology

ตัวอย่าง การปรับปรุง Operating system ใน Presentation tier ซึ่งจะมีผลกระทบ

ต่อส่วนต่อประสานผู้ใช้เท่านั้น

การใช้งานส าหรับการพัฒนาเว็บ


14

การพัฒนาเว็บแอพพลิเคชัน่ three-tier อ้างถึงเว็บไซต์เชิงพาณิชย์อิเล็กทรอนิกส์ทั่วไป ประกอบด้วยดังนี ้ Front-end web server

Static content

Cached dynamic content ส าหรับการแสดงผลไปยัง browser

Middle dynamic content

การประมวลผลและการผลิต ในระดับ application server

แฟลตฟอร์ม Ruby on Rails, Java EE, ASP.NET, PHP, ColdFusion, Perl, Python

การใช้งานส าหรับการพัฒนาเว็บ (ต่อ)


15

Back-end database หรือ data store ประกอบด้วย Data sets

Database management system software

การบริหารจัดการและให้เข้าถึงข้อมูล

CodeIgniter Web Framework


16

CodeIgniter Framework พัฒนาขึ้นด้วยภาษา PHP

เป็นเครื่องมือส าหรับช่วยพัฒนาเว็บไซต์และเว็บแอปพลิเคชัน โครงสร้างการพัฒนาโปรแกรมอย่างเป็นระบบ

รวมค าสั่งต่างๆ ที่จ าเป็นต่อการพัฒนาเว็บไซต์ด้วย PHP

พัฒนาโดย Rick Ellis ลิขสิทธิ์เป็น Open Source สามารถดาวน์โหลด และใช้ได้ฟร!ี!

พัฒนาขึ้นตั้งแต่ปี 2006 และยังมีการพัฒนามาเรื่อยๆ จนถึงปัจจุบัน

เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204) 17 เพิ่มเติม: http://www.codeigniter.com/

Server Requirements


18

PHP version 5.6 or newer Database ส าหรับการพัฒนา web application programming

MySQL (5.1+) MySQLi MSSQL Postgres Oracle SQLite ODBC

Download และ Installation


19

Downloading CodeIgniter http://www.codeigniter.com/user_guide/installation/

downloads.html

Installation Instructions http://www.codeigniter.com/user_guide/installation/index.html

Application Flow Chart


20

ที่มา: http://www.codeigniter.com/user_guide/overview/appflow.html

AngularJS


21

AngularJS extends HTML with new attributes.

AngularJS is perfect for Single Page Applications (SPAs).

AngularJS is easy to learn.

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.


https://angular.io/


<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>

<p ng-bind="name"></p>

</div>

</body>

</html>

ที่มา: https://www.w3schools.com/angular/angular_intro.asp

การพัฒนาแอปพลิเคชันบนเว็บแบบ Client/Server

เอกสารประกอบการสอน

24

รายวิชา เทคโนโลยีเว็บ (04-06-204)

ระบบฐานข้อมูลและเว็บ


25

เทคโนโลยีอินเทอร์เน็ตและเว็บ กระบวนการทางธุรกิจเช่ือมโยงเข้ากับระบบเว็บ

ฐานข้อมูลบนเว็บ และงานวิจัยที่เกี่ยวข้องกับเว็บและฐานข้อมูล

การจัดการเนื้อหาที่ผู้ใช้เป็นผู้สร้างเพ่ือแชร์ให้กับบุคคลอื่น Facebook

YouTube

ฐานข้อมูลกับการท างานบนเว็บ


26

การร้องขอ เพื่อค้นคืนสารสนเทศและการจัดเก็บข้อมูลขั้นตอน ดังนี้ ผู้ใช้กรอกแบบฟอร์มจากหน้าเว็บ ข้อมูลที่ผู้ใช้ร้องขอส่งไปยัง server แปลงค าร้องขอเป็นการ query จากฐานข้อมูล ซึ่งผ่านไปยัง database

server ด้วย โปรแกรมหรือเครื่องมือ เรียกว่า Middleware ส่วนใหญ่ที่น ามาประยุกต์ใช้กับฐานข้อมูล

จะเขียนด้วยภาษาสคริปต์ CGI (Common Gateway Interface) ASP (Active Server Pages) JSP (Java Server Pages) PHP Server Side Script

ฐานข้อมูลกับการท างานบนเว็บ (ต่อ)


27

ที่มา: http://www.cs.science.cmu.ac.th/

Apache เว็บเซิร์ฟเวอร์


28

Open Source Software ให้บริการเซิร์ฟเวอร์บนโพรโทคอล HTTP

สามารถท างานได้บนหลายระบบปฏิบัติการ และเป็นซอร์ฟแวร์ที่อยู่ภายใต้ลิขสิทธิ์ GNU

Apache มีที่มาจากกลุ่มคนที่ช่วยสร้างแพตช์ไฟล์ส าหรับโครงการ NCSA httpd 1.3 ซึ่งกลายมาเป็นที่มาของชื่อ A PAtCHy server

Module เพื่อให้ใช้งานและสามารถท างานร่วมกับภาษาอื่นได้ mod_perl, mod_python, mod_php หรือ mod_mysql

เพ่ิมเติม: http://httpd.apache.org/

Apache เว็บเซิร์ฟเวอร ์(ต่อ)


29

การยืนยันตัวบุคคล mod_auth, mod_access หรือ mod_digest

ความปลอดภัยในการสื่อสารผ่าน โพรโทคอล https mod_ssl

สามารถสร้างโฮสท์เสมือน (Virtual Host) ภายในเครื่องเดียวกันได ้mod_vhost

mod_rewrite module เป็นเครื่องมือที่จะช่วยให้ URLs ของเว็บอ่านง่ายขึ้น

Apache เว็บเซิร์ฟเวอร์ (ต่อ)


30

Download และ Installation http://httpd.apache.org/download.cgi

Xampp เว็บเซิร์ฟเวอร์


31

XAMPP is the most popular PHP development environment

XAMPP is a completely free, easy to install Apache distribution containing: MariaDB, PHP, and Perl.

The XAMPP open source package has been set up to be incredibly easy to install and to use.

XAMPP with PHP 7.1.9 & 7.0.23 versions เพิ่มเติม: https://www.apachefriends.org/index.html


เพิ่มเติม: https://www.apachefriends.org/index.html

https://www.apachefriends.org

ภาษา PHP


33

PHP Hypertext Preprocessor ภาษาสคริปต์สร้าง Dynamic Web Page มีชุดค าสั่งคล้ายภาษา C++ หรือ Perl

แทรกอยู่ภายใต้โค้ดค าสั่ง HTML ผ่านแท็ก PHP <?php //php code ?>

ท างานบนฝั่ง Server, คล้ายกับ CGI, ASP.NET

สามารถท างานร่วมกับฐานข้อมูลได้หลายชนิด MySQL Oracle PostgreSQL MongoDB (NoSQL)

เพิ่มเติม: http://php.net/

PHP Syntax


34

ภาษา PHP เป็นส่วนประกอบภายในเว็บเพจ

ค าสั่งจะปรากฏระหว่าง <?php ... ?>

<!DOCTYPE html>

<html>

<body>

<?php

//This is Comment

/* This is Comment */

//Code for execute

// echo, display text

echo "My first PHP script!";

?>

</body>

</html>

<?php

$a = 10;

?>

<h1>Hello World</h1>

<?=$a?>

<?php

phpinfo();

?>

PHP Variable


35

<?php

$a = "String"; //var $a = "";

$b = 3.14;

$c = 5;

echo "My sample string is $a";

echo "My sample integer is".$b;

?>

is_string($a) – True/False

is_float($b) – True/False

is_integer($c) – True/False

PHP Control Statement


36

<?php $i = 1, $j = 3; //Initial variable //If statement if($i > $j){ echo $i." is bigger than ".$j; }else if($j > $i){ echo $j." is bigger than ".$i; }else{ echo $j." is equal ".$i; } ?>

PHP Control Statement (ต่อ)


37

<?php $i = 1; //Initial variable //For loop for ($i = 0; $i < 10; $i++) { echo "Test -> ".$i."<br />"; } //While loop while ($i <= 10){ echo "Test -> ".$i."<br />"; } ?>

<?php $beer = "singha"; //Switch case switch($beer){ case "tuborg"; case "carlsberg"; case "heineken"; echo "good choice."; break; default; echo "Please make a new selection…"; break; } ?>

PHP Functions

เอกสารประกอบ(การสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)

38

การเรียกใช้ String Functions <?php

$str1 = 'abcdef';

$str2 = 'abcdef';

echo strlen($str1); // 6

echo strncmp($str1, $str2, 6); // 0

$arr1 = str_split($str1);

$arr2 = str_split($str1, 3);

print_r($arr1);

print_r($arr2);

?>

เพ่ิมเติม: http://th1.php.net/manual/en/funcref.php http://www.w3schools.com/php/php_ref_string.asp

PHP Functions (ต่อ)


39

<?php

function familyName($fname, $year) {

echo "$fname Refsnes. Born in $year <br>";

}

familyName("Hege", "1975");

familyName("Stale", "1978");

function sum($x, $y) {

$z = $x + $y;

return $z;

}

echo "5 + 10 = " . sum(5, 10) . "<br>";

echo "7 + 13 = " . sum(7, 13) . "<br>";

?>

เพ่ิมเติม: http://www.w3schools.com/php/php_functions.asp

Dealing with Forms


40

Simple HTML Forms (*.html) <form action="action.php" method="post">

<p>Your name: <input type="text" name="name" /></p>

<p>Your age: <input type="text" name="age" /></p>

<p><input type="submit" /></p>

</form>

Printing data from our form (*.php) Hi <?php echo htmlspecialchars($_POST['name']); ?>. You are <?php echo (int)$_POST['age']; ?> years old.

Hi Joe. You are 22 years old.

MySQL


41

ระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (Relational Database Management System) ใชภ้าษา SQL

เป็นซอฟต์แวร์โอเพนซอร์ส แต่แตกต่างจากซอฟต์แวร์โอเพนซอร์สทั่วไป พัฒนาภายใต้บริษัท MySQL AB ในประเทศสวีเดน

โดยจัดการ MySQL ทั้งในแบบที่ให้ใช้ฟรีและแบบที่ใช้ในเชงิธุรกิจ

MySQL พัฒนาโดยชาวสวีเดน 2 คนและชาวฟินแลนด์ ชื่อ David Axmark, Allan Larsson และ Michael "Monty" Widenius.

ปัจจุบันเป็นของบริษัทซันไมโครซิสเต็มส์ (Sun Microsystems, Inc.)

ที่มา: http://www.mysql.com/

PHP กับ MySQL


42

MySQL เป็นที่นิยมใช้กันมากส าหรับฐานข้อมูลส าหรับเว็บไซต ์

การจัดการฐานข้อมูล MySQL สามารถใช้โปรแกรมแบบ command-line เพื่อจัดการฐานข้อมูล (โดยใช้ค าสั่ง:

mysql และ mysqladmin)

โปรแกรมจัดการฐานข้อมูลแบบ GUI จากเว็บไซต์ของ MySQL

MySQL Administrator

MySQL Query Browser

PHPMyAdmin

เครื่องมือ phpMyAdmin


43

PHP กับ MySQL (ต่อ)


44

ส่วนเชื่อมต่อกับภาษาการพัฒนาอื่น (database connector)

ส่วนติดต่อ (interface) เพื่อเชื่อมต่อกับภาษาในการพัฒนา

เพื่อใหเ้ข้าถึงฟังก์ชันการท างานกับฐานข้อมูล MySQL ได้ ODBC (Open Database Connector)

MyODBC อันเป็นไดรเวอร์เพื่อใช้ส าหรับการเชื่อมต่อในระบบ Windows

JDBC คลาสส่วนเชื่อมต่อส าหรับ Java เพื่อใช้ในการติดต่อกับ MySQL

API (Application Programming Interface) ต่างๆมีให้เลือกใช้มากมายในการที่เข้าถึง MySQL โดยไม่ขึ้นอยู่กับภาษาการพัฒนาใดภาษาหนึ่ง

PHP กับ MySQL (ต่อ)


45

mysql_error() Fatal error: Call to undefined function mysql_connect()

in C:\AppServ\www\myphp\phpMySQLConnect.php on line xx

ยังไม่ได้ติดตั้ง extension ชื่อ php_mysql.dll ให้ด าเนินการดาวน์โหลดและติดตั้ง

น าไปวางไว้ในโฟเดอร์ extension ของ php เช่น C:\xammp\php5\ext

ปรับแก้ไฟล์ config ของ PHP ชื่อ php.ini (ค้นหา extension_dir)

extension_dir = "C:\xampp\php\ext"

…

extension=php_mysql.dll //เพิ่มบรรทัดนี้ในไฟล ์

Restart Apache หรือ Web Server

การท างานร่วมกันระหว่าง Client และ Server


46

<html>

<head>

<title>PHP & MySQL</title>

</head>

<body>

<?php

//PHP Script

$objConnect =

mysqli_connect("hostname","user","password","databasename");

if($objConnect){

echo "Database Connected.";

}else{

echo "Database Connect Failed.";

}

mysqli_close($objConnect);

?>

</body>

</html>

PHP กับ MySQL เพื่อดึงข้อมูลจากตาราง


47

<?php

$objConnect = mysqli_connect("hostname","user","password","Ch07_Salary")

or die("Error Connect to Database");

$strSQL = "SELECT * FROM Member";

//INSERT, UPDATE, and DELETE ?

$objQuery = mysqli_query($objConnect, $strSQL) or die ("Error Query

[".$strSQL."]");

while($objResult = mysqli_fetch_array($objQuery))

{

echo $objResult["MID"]."<br/>";

echo $objResult["MName"]."<br/>";

echo $objResult["MEmail"]."<br/>";

}

?>

สรุป (Summary)


48

ศึกษาและเรียนรู้เกี่ยวกับ แนวคิดส าหรับสถาปัตยกรรมทรีเทียร์ และการน าเสนอในแต่ละ Tier

CodeIgniter Web Framework ส าหรับพัฒนาระบบแบบ MVC

ระบบฐานข้อมูลและการพัฒนาเว็บ Client และ Server

ติดตั้งและก าหนดค่า Apache เว็บเซิร์ฟเวอร์ Appserv เพื่อใช้งานเป็นเว็บเซิร์ฟเวอร์พื้นฐาน

ภาษา PHP และการใช้งานร่วมกับ HTML เบื้องต้น

ระบบฐานข้อมูล MySQL และการใช้งานเชื่อมต่อกับ PHP เบื้องต้น

แบบฝึกปฏิบัต ิ


49

ก าหนดให้สร้าง HTML ฟอร์ม (product.html) เพื่อรับข้อมูลผลิตภัณฑ์ แล้วส่งไปประมวลผลยัง Server (insertProduct.php และ displayProduct.php) เพื่อจัดเก็บลงฐานข้อมูล ซึ่งโครงสร้างการท างานของโปรแกรมประกอบด้วย ดังนี้ product.html ส่วนรับข้อมูลผลิตภัณฑ ์ insertProduct.php ส่วนประมวลผลเพื่อจัดเก็บข้อมูลลงฐานข้อมูล displayProduct.php ส่วนแสดงผลข้อมูลจากฐานข้อมูล สร้างฐานข้อมูลด้วยเครื่องมือ PHPMyAdmin ชื่อ Ch07_Product

สร้างตารางชื่อ xxxx-x_product เพื่อจัดเก็บข้อมูลตามฟอร์มท่ีสร้างใน product.html

เอกสารอ้างอิง


50

โอภาส เอี่ยมสิริวงศ,์ วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ, กรุงเทพฯ : ซีเอ็ดยูเคชั่น, 2557.

Client-server model (Online), Available at: http://en.wikipedia.org/wiki/Client-server_model

PHP: Hypertext Processor (Online), Available at: http://php.net/ The Apache HTTP Server Project (Online), Available at:

http://httpd.apache.org/ CodeIgniter Web Framework (Online), Available at:

http://www.codeigniter.com/ Multitier architecture (Online), Available at:

http://en.wikipedia.org/wiki/Multitier_architecture

บทที่ 7 สถาปัตยกรรมเทียร์ (tier architecture) และ...

Documents