initialize – PlusMagi's Blog By Pitt Phunsanit

slick: responsive และ ความกว้าง

เจอปัญหาว่า slick เวลาวางต่อไปอีก block ต่อจากตัวอื่น มันจะตกลงมา หรือแสดงไม่ครบแล้วแต่กรณี เพราะว่า block มันจะยาวเท่าหน้า windows เลย ไม่ใช่ container หรือ div ที่ห่อมันเอาไว้เหมือน slideshow ตัวอื่นๆ

ลองหลายวิธีจนพบว่าวิธีของคุณ kirana Slick Carousel Center Padding Demo นั้นดีที่สุด

[code language=”html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>kenwheeler.slick: responsive</title>
<link href="../vendor/components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../vendor/kenwheeler/slick/slick/slick.css" rel="stylesheet" type="text/css" />
<link href="../vendor/kenwheeler/slick/slick/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="theme.css" rel="stylesheet" type="text/css" />
<style>
.slickContainer {
background: #1f6d38;
color: #333;
margin: 0 auto;
padding: 40px;
width: 80%;
}
</style>
</head>

<body>

<div class="container">
<div class="row">
<div class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-5">
<h1>sidebar</h1>
</div>
<div class="col-11 col-sm-10 col-md-9 col-lg-8 col-xl-7">
<div class="slickContainer">
<div id="slideshowA">
<div><b>Acrobat</b><img alt="Acrobat" src="http://www.avatarsdb.com/avatars/acrobat.gif">
<p>แสดง acrobat.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>Cat Rain</b><img alt="Cat Rain" src="http://www.avatarsdb.com/avatars/cat_rain.gif">
<p>แสดง cat_rain.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>Dota Windranger</b><img alt="Dota Windranger" src="http://www.avatarsdb.com/avatars/dota_windranger.jpg">
<p>แสดง dota_windranger.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Fighting Funny</b><img alt="Fighting Funny" src="http://www.avatarsdb.com/avatars/fighting_funny.gif">
<p>แสดง fighting_funny.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>Fire 01</b><img alt="Fire 01" src="http://www.avatarsdb.com/avatars/fire_01.gif">
<p>แสดง fire_01.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>German Shepherd Puppy</b><img alt="German Shepherd Puppy" src="http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg">
<p>แสดง german_shepherd_puppy.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Girl With Cigarette</b><img alt="Girl With Cigarette" src="http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg">
<p>แสดง girl_with_cigarette.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Hidden Cat</b><img alt="Hidden Cat" src="http://www.avatarsdb.com/avatars/hidden_cat.jpg">
<p>แสดง hidden_cat.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Im Fabulous</b><img alt="Im Fabulous" src="http://www.avatarsdb.com/avatars/im_fabulous.jpg">
<p>แสดง im_fabulous.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>One Direction</b><img alt="One Direction" src="http://www.avatarsdb.com/avatars/One_Direction.jpg">
<p>แสดง One_Direction.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Panda Kiss</b><img alt="Panda Kiss" src="http://www.avatarsdb.com/avatars/panda_kiss.gif">
<p>แสดง panda_kiss.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>PC User</b><img alt="PC User" src="http://www.avatarsdb.com/avatars/pc_user.gif">
<p>แสดง pc_user.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>Riri Queen</b><img alt="Riri Queen" src="http://www.avatarsdb.com/avatars/riri_queen.gif">
<p>แสดง riri_queen.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>Tennessee</b><img alt="Tennessee" src="http://www.avatarsdb.com/avatars/tennessee.jpg">
<p>แสดง tennessee.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Tuxedo M</b><img alt="Tuxedo M" src="http://www.avatarsdb.com/avatars/Tuxedo_m.jpg">
<p>แสดง Tuxedo_m.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Tuxedo Mask</b><img alt="Tuxedo Mask" src="http://www.avatarsdb.com/avatars/tuxedo_mask.jpg">
<p>แสดง tuxedo_mask.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Ugly Face</b><img alt="Ugly Face" src="http://www.avatarsdb.com/avatars/ugly_face.gif">
<p>แสดง ugly_face.gifจาก http://www.avatarsdb.com</p>
</div>
<div><b>Waifu</b><img alt="Waifu" src="http://www.avatarsdb.com/avatars/waifu.jpg">
<p>แสดง waifu.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Wolf In The Snow</b><img alt="Wolf In The Snow" src="http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg">
<p>แสดง wolf_in_the_snow.jpgจาก http://www.avatarsdb.com</p>
</div>
<div><b>Xerxes Break Kevin</b><img alt="Xerxes Break Kevin" src="http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg">
<p>แสดง xerxes_break_kevin.jpgจาก http://www.avatarsdb.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script>
<script>
$(function() {
$(‘#slideshowA’).slick({
"autoplay": true,
"autoplaySpeed": 3000,
"centerMode": true,
"infinite": true,
"responsive": [{
"breakpoint": 1140,
"settings": {
"dots": true,
"infinite": true,
"slidesToScroll": 4,
"slidesToShow": 4
}
}, {
"breakpoint": 960,
"settings": {

"dots": true,
"infinite": true,
"slidesToScroll": 3,
"slidesToShow": 3
}
}, {
"breakpoint": 720,
"settings": {
"dots": false,
"infinite": false,
"slidesToScroll": 2,
"slidesToShow": 2
}
},
{
"breakpoint": 540,
"settings": "unslick"
}
],
"speed": 300,
"variableWidth": true,
"zIndex": 2
});

});
</script>
</body>

</html>[/code]

เมื่อสร้าง container ครอบตัว slide show และร่วมกับคำสั่ง responsive จะเห็นได้ว่าสามารถควบคุมการแสดงผลได้ดียิ่งขึ้น

slick: carousel / slideshow จาก ajax

ตัวอย่างการแก้ไข carousel หรือ slideshow โดย update slide จาก ajax

[code language=”html” title=”kenwheeler.slick/ajax.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>kenwheeler.slick: ajax update</title>
<link href="../vendor/components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../vendor/kenwheeler/slick/slick/slick.css" rel="stylesheet" type="text/css" />
<link href="../vendor/kenwheeler/slick/slick/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="slideshowA"></div><br>
<select id="order_by">
<option value="asc">น้อยไปมาก</option>
<option value="desc">มากไปน้อย</option>
<option value="random">สุ่ม</option>
</select>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script>
<script>
$(function() {

var order_by = $(‘#order_by’);
var slideshowA = $(‘#slideshowA’);

function getSliderSettings() {
return {
"autoplay": false,
"autoplaySpeed": 3000,
"centerMode": true,
"infinite": false,
"slidesToScroll": 4,
"slidesToShow": 4,
"speed": 300,
"variableWidth": true,
"zIndex": 2
}
}

function getSlideShow() {

$.ajax({
"data": {
"order_by": order_by.val(),
},
"success": function(data, textStatus, jqXHR) {

/* add items */
$.each(data.datas, function(index, value) {
slideshowA.append(‘<div><b>’ + index + ‘</b><img alt="’ + index + ‘" src="’ + value + ‘"><p>แสดง ‘ + index + ‘ จาก http://www.avatarsdb.com</p></div>’);
});

slideshowA.slick(‘unslick’); /* ONLY remove the classes and handlers added on initialize */
$(‘.my-slide’).remove(); /* Remove current slides elements, in case that you want to show new slides. */
slideshowA.slick(getSliderSettings()); /* Initialize the slick again */

alert(‘ทดลองดูครับ’);

},
"url": "ajax.php",
});

}

order_by.change(function() {
getSlideShow();
});

getSlideShow();
slideshowA.slick(getSliderSettings());
});
</script>
</body>

</html>[/code]

ไฟล์ที่ส่งข้อมูลกลับมาให้[code language=”php” title=”kenwheeler.slick/ajax.php”]<?php
$datas = [];

if (isset($_GET[‘order_by’])) {
$order_by = $_GET[‘order_by’];
} else {
$order_by = ‘asc’;
}

$datas[‘Acrobat’] = ‘http://www.avatarsdb.com/avatars/acrobat.gif’;
$datas[‘Cat Rain’] = ‘http://www.avatarsdb.com/avatars/cat_rain.gif’;
$datas[‘Dota Windranger’] = ‘http://www.avatarsdb.com/avatars/dota_windranger.jpg’;
$datas[‘Fighting Funny’] = ‘http://www.avatarsdb.com/avatars/fighting_funny.gif’;
$datas[‘Fire 01’] = ‘http://www.avatarsdb.com/avatars/fire_01.gif’;
$datas[‘German Shepherd Puppy’] = ‘http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg’;
$datas[‘Girl With Cigarette’] = ‘http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg’;
$datas[‘Hidden Cat’] = ‘http://www.avatarsdb.com/avatars/hidden_cat.jpg’;
$datas[‘Im Fabulous’] = ‘http://www.avatarsdb.com/avatars/im_fabulous.jpg’;
$datas[‘One Direction’] = ‘http://www.avatarsdb.com/avatars/One_Direction.jpg’;
$datas[‘Panda Kiss’] = ‘http://www.avatarsdb.com/avatars/panda_kiss.gif’;
$datas[‘PC User’] = ‘http://www.avatarsdb.com/avatars/pc_user.gif’;
$datas[‘Riri Queen’] = ‘http://www.avatarsdb.com/avatars/riri_queen.gif’;
$datas[‘Tennessee’] = ‘http://www.avatarsdb.com/avatars/tennessee.jpg’;
$datas[‘Tuxedo M’] = ‘http://www.avatarsdb.com/avatars/Tuxedo_m.jpg’;
$datas[‘Tuxedo Mask’] = ‘http://www.avatarsdb.com/avatars/tuxedo_mask.jpg’;
$datas[‘Ugly Face’] = ‘http://www.avatarsdb.com/avatars/ugly_face.gif’;
$datas[‘Waifu’] = ‘http://www.avatarsdb.com/avatars/waifu.jpg’;
$datas[‘Wolf In The Snow’] = ‘http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg’;
$datas[‘Xerxes Break Kevin’] = ‘http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg’;

switch ($order_by) {
case ‘desc’:{krsort($datas);}
break;

case ‘random’:{
$keys = array_keys($datas);
shuffle($keys);
$random = [];
foreach ($keys as $key) {
$random[$key] = $datas[$key];
}
$datas = $random;
}break;

case ‘asc’:
default:
{ksort($datas);}
break;
}

header(‘Content-type: application/json; charset=utf-8’);
echo json_encode([
‘datas’ => $datas,
‘order_by’ => $order_by,
]);[/code]

code บางส่วนจะอยู่ในบทความ slick: สร้าง carousel / slideshow

Credit: Reinitialize Slick js after successful ajax call

ติดตั้ง yii 2 advance ผ่าน composer

YII เพิ่งออกเวอร์ชั่น 2 มาวันที่ 12 ตุลาคม พ ศ 2557 เลยเอามาลองของซักหน่อย ก่อนอื่นให้ลง composer สำหรับติดตั้งตามยุคสมัย (จริงๆ โหลด zip มาแตกเองง่ายกว่าด้วยซ้ำไป ถ้าไม่ต้องการใช้ composer ให้โหลด zip มาแล้วข้ามขั้นตอนที่ 1 ไปเลยครับ)

ก่อนอื่น update เจ้า composer ซะก่อนตามธรรมเนียม รีสตาร์ต เพื่อป้องกันปัญหาเปิด command ออกมาพิมพ์
[code language=”text”]
composer self-update
[/code]
ลง composer asset plugin ทำครั้งเดียวไม่ต้องทำอีก
[code language=”text”]
composer global require "fxp/composer-asset-plugin:1.0.0"
[/code]
โดยปกติ จะสร้าง yii project ได้โดยคำสั่ง
[code language=”text”]
composer create-project –prefer-dist yiisoft/yii2-app-basic basic
[/code]
composer จะ copy ไปไว้ใน folder ชื่อ basic งานที่จะทำเหมาะกับ yii Advanced Application Template มากกกว่า ที่ต่างกันคือ
- แยก Front- and และ back-end apps ระบบใหญ่ๆ ควรแยกไว้เพื่อความสะดวกที่สำคัญ yii สามารถใช้ configuration และ model ร่วมกันได้ ทั้ง 2 ฝั่ง
- User model มีระบบ login, User signup and password restore เบื้องต้นติดมาด้วย
และต้องการให้เก็บใน D:\xampp\htdocs\YiiAdvanced ให้เปลี่ยนคำสั่งเป็น
[code language=”text”]
composer create-project –prefer-dist yiisoft/yii2-app-advanced D:\xampp\htdocs\YiiAdvanced
[/code]
ปรับสภาพแวดล้อมให้ช่วยเขียน code ได้ง่ายขึ้น
- ไปที่เราติดตั้ง php ไว้ก่อน พิมพ์
  [code language=”text”]
  cd c:\xampp\php
  [/code]
- พิมพ์
  [code language=”text”]
  php D:\xampp\htdocs\YiiAdvanced\init
  [/code]
- เลือก Development พิมพ์ 0 enter ขึ้นจริง 1 enter
สร้าง database
- สร้าง database เปล่าๆ ไว้ก่อน ของผมชื่อ YiiAdvanceDB
- ไปที่ common/config/main-local.php ใน folder ที่เราสร้างไว้ เพิ่ม database connection ใน components ตามตัวอย่าง
  [code language=”php”]
  ‘components’ => [
  ‘db’ => [
  ‘class’ => ‘yii\db\Connection’,
  ‘dsn’ => ‘mysql:host=localhost;dbname=YiiAdvanceDB’,
  ‘username’ => ‘root’,
  ‘password’ => ”,
  ‘charset’ => ‘utf8’,
  ],
  [/code]
- Command กลับไปที่เราเก็บ project file
  [code language=”text”]
  d:
  cd D:\xampp\htdocs\YiiAdvanced
  [/code]
- พิมพ์
  [code language=”text”]
  yii migrate[/code]
  ตอบ yes ดูในฐานข้อมูล จะมีตาราง user กับ migrate เพิ่มขึ้นมา

การเตรียมโปรเจ็คด้วยยี่สำเร็จแล้ว! หวังว่าคงเข้าใจมากกว่าในคู่มือเว็บ yii นะครับ

ติดตั้ง YII

ลง yii ไม่อยาก ไม่กี่นาทีก็ได้โครงของโปรเจคแล้ว

โหลดตัว framework มาก่อนจาก yiiframework
แตกไฟล์ใส่ htdocs folder ของผมอยู่ที่ D:\xampp\htdocs (ปกติคือ C:\xampp\htdocs)
ถ้าแตกไฟล์เก็บไว้ใน folder D:\xampp\htdocs\yii1 เปิด command พิมพ์
- d: กด enter
- พิมพ์ cd D:\xampp\htdocs\yii1\framework กด enter
สร้าง Skeleton Application ถ้าต้องการสร้าง project ชื่อ JumpFlower (คืออะไรหาได้ใน google) เก็บที่ D:\xampp\htdocs\yii1\JumpFlower พิมพ์[code language=”text”]yiic webapp <b>D:\xampp\htdocs\yii1\JumpFlower[/code] แล้ว enter ตอบ yes รอจนขึ้นข้อความ “your application has been create successfully under …”
เปิดไฟล์ D:\xampp\htdocs\yii1\JumpFlower\protected\config\database.php แก้ เอา comment ออก ใส่ชื่อ database username password ใม่ตามที่ใช้จริง[code language=”php”]<?php
// This is the database connection configuration.
return array(
‘connectionString’ => ‘sqlite:’.dirname(__FILE__).’/../data/testdrive.db’,
‘connectionString’ => ‘mysql:host=localhost;dbname=yii1′,
’emulatePrepare’ => true,
‘username’ => ‘root’,
‘password’ => ”,
‘charset’ => ‘utf8’,
‘tablePrefix’=>’tbl_’,
);[/code]

เสร็จ!

PlusMagi's Blog By Pitt Phunsanit

Tag Archive initialize

slick: responsive และ ความกว้าง

slick: carousel / slideshow จาก ajax

ติดตั้ง yii 2 advance ผ่าน composer

ติดตั้ง YII