PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


ดึงข้อมูลจาก server มาแสดงใน app ionic material

18 November 2016 By
ionicmaterial ionicframework

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicmaterial ionicframework



เนื้อหานี้เราจะมาดูแนวทางการดึงข้อมูลจาก server มาแสดงใน app ionic material
โดยลักษณะจะคล้ายกับเนื้อหาเก่า ที่เกี่ยวกับการใช้งาน ionicframework จากบทความ
 
ionicframework โหลดข้อมูล จากเว็บไซต์ มาแสดง แบบ cards ตอนที่ 3 
http://www.ninenik.com/content.php?arti_id=526 via @ninenik
 
จะไม่ต่างกันมากนัก หลักการทำงานก็คือ เราจะแสดงบทความ สมมติ
บทความจากเว็บไซต์ www.ninenik.com โดยในที่นี้จะแสดงแค่ 10 รายการในลักษณะ
เป็นการ random และใช้วิธีการส่งข้อมูลจาก server มาในรูปแบบไฟล์ json ใช้งาน
ผ่านคำสั่ง $http.jsonp ใน ionic  และให้สามารถรีเฟรส หรือโหลดเนื้อหามาใหม่
โดยการ กดค้างในเนื้อหาใน app ดึงลงแล้วปล่อย ดังรูปด้านล่าง

 
 
   

 
 
 
สำหรับเนื้อหาในตอนนี้ เราจะแจกไฟล์ตัวอย่างของ ionic material ที่ปรับแต่งหน้าตา
เล็กน้อย และตัดส่วนของ map กับระบบล็อกอินผ่าน server ออก แต่ยังคงระบบล็อกอิน
ผ่าน database โดยใช้ SQLite อยุ่ ดาวน์โหลดไฟล์ สำหรับทดสอบได้ที่
 

ดาวน์โหลดไฟลเดอร์ www สำหรับทดสอบได้ที่  https://goo.gl/Ngy5VL

 
สำหรับ plugin เพิ่มเติมที่ต้องใช้ดูได้ที่บทความ
 
ประยุกต์ใช้งาน ระบบสมาชิกใน app ionic material ร่วมกับ SQLite 
http://www.ninenik.com/content.php?arti_id=735 via @ninenik



 
 

เริ่มต้นการทดสอบการดึงข้อมูลจากฝั่ง server มาแสดงใน app
 

1. สร้างไฟล์ article_api.php สำหรับแสดง json string ที่จะใช้งาน

ในที่นี้เราจะทดสอบโดยแสดงคำสั่งการดึงข้อมูลบทความจาก www.ninenik.com
ให้ดูเป็นแนวทาง
 
<?php
header("Content-type:application/json; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false);    
if(isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
 //       header('Access-Control-Max-Age: 86400');    // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if(isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
if(isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
// ส่วนการกำหนด header ให้กำหนดตามด้านบน ไม่เช่นนั้น app จะไม่สามารถส่งค่ามาได้
require_once("dbconnect.php");

$sql = "
SELECT * FROM tbl_article ORDER BY RAND() LIMIT 0,10
";
$result = $mysqli->query($sql);
if($result && $result->num_rows>0){
	while($row = $result->fetch_assoc()){
		$json_data[]=array(  
			"id"=>$row['arti_id'],
			"topic"=>$row['arti_topic'],
			"description"=>strip_tags(trim($row['arti_detail']),0,200),
			"date"=>date("Y-m-d",$row['adddate']),
			"img"=>"http://www.ninenik.com/images/day-".strtolower(date("D",$row['adddate'])).".jpg",
			"url"=>"http://www.ninenik.com/content.php?arti_id=".$row['arti_id'],
			"view"=>$row['hit'],
			"lastvisited"=>$row['lastvisited'],
		);    	
	}
}
// แปลง array เป็นรูปแบบ json string
if(isset($json_data)){
	$json= json_encode($json_data);  
	if(isset($_GET['callback']) && $_GET['callback']!=""){  
	echo $_GET['callback']."(".$json.");";      
	}else{  
	echo $json;  
	}  
}
?>
 
    สังเกตว่าหากเราต้องการค่าอะไรบ้างไปแสดง ให้กำหนดเพิ่มฟิลด์ข้อมูลได้ตามต้องการ
ในตัวอย่างโค้ดด้านบนคือให้ไปดึงรายการบทความแบบ random มาแสดงครั้งละ 10 รายการ
 
 

2. สร้าง service สำหรับดึงข้อมูลจากฝั่ง server

    ให้เปิดไฟล์ services.js ในโฟลเดอร์  js และปรับโค้ดให้เป็นดังนี้
 
'use strict';
angular.module('starter.services', [])
.service('ArticleService',function($http, $q) { // สร้าง service
    // url ไฟล์ json
    var url="http://www.ninenik.com/demo/article_api.php?callback=JSON_CALLBACK";
    return { // ในที่นี้เราจะใช้การส่งค่าแบบ post ทั้งสามฟังก์ชั่น
        getArticle: function() {
            var deferred = $q.defer();
            $http.jsonp(url)
                .success(deferred.resolve)
                .error(deferred.reject);
            return deferred.promise;
        }
    };
})
.service('ShareService',function(){

});
 
    เราได้เพิ่ม ArticleService โดยกำหนดฟังก์ชั่น getArticle ใช้ $http.jsonp ดึงข้อมูล
จากฝั่ง server ตาม url ที่กำหนด 
 

3. เพิ่มเมนู Article เข้าไปในไฟล์ menu.html

    เปิดไฟล์ menu.html ในโฟลเดอร์ templates
    แล้วเพิ่มเมนู article โดยเราจะให้ลิ้งค์ไปที่ state app.article
 
<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-energized-900" ng-class="{expanded: isExpanded, 'has-header-fab-left': hasHeaderFabLeft, 'has-header-fab-right': hasHeaderFabRight}" align-title="left">
            <!--<ion-nav-back-button class="no-text">-->
            <!--</ion-nav-back-button>-->
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="fabContent"></ion-nav-view>
        <ion-nav-view name="menuContent" ng-class="{expanded: isExpanded}" ></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar expanded energized-900-bg">
            <span class="avatar" style="background: url('img/crown.jpg'); background-size: cover;"></span>
            <h2>Demo App</h2>
        </ion-header-bar>
        <ion-content class="dark-bg light