กรกฎาคม 2016

LAMP VS MEAN

LAMP VS MEAN

ทราบหรือไม่ว่าทั้ง 2 คำนี้คืออะไรและแตกต่างกันอย่างไร

LAMP เป็นตัวอักษรย่อของเครื่องมือพัฒนาเว็บทั้ง 4 ชนิด ที่เป็น Open Source มารวมกัน โดยมีมาตั้งแต่ยุคโบราณกาลซึ่งปัจจุบันก็ยังได้รับความนิยมอยู่ โดยมีที่มาจากอะไรบ้างละ มาดูกัน

L ย่อมาจาก Linux เป็นระบบปฏิบัติการสายพันธุ์ยูนิกซ์ที่มีความทนทาน จนถูกนำมาใช้เป็นเครื่องให้บริการทั่วโลก

A ย่อมาจาก Apache เป็นเว็บเซิร์ฟเวอร์ที่รับความนิยมมากที่สุดตัวนึง มีจุดเด่นที่มีความแข็งแกร่ง ทนทาน รองรับภาระงานมากๆ ได้ ยังมีการพัฒนาเทคโนโลยีใหม่ ๆ เพื่อรองรับการทำงานอยู่ตลอด และยังได้รับความนิยมมาจนถึงปัจจุบัน

M ย่อมาจาก MySQL เป็นฐานข้อมูล ประเภทนึงที่ได้รับความนิยมเป็นอย่างมาก มีขนาดเล็ก ความเร็วสูง เหมาะสำหรับนักพัฒนามือใหม่เพราะมี community กว้างขวางมาก มีแหล่งให้ศึกษาอย่างมากมาย และมีโปรแกรมช่วยจัดการฐานข้อมูล เช่น phpMyAdmin, Mysql Admin ให้ใช้งานได้ง่ายมากขึ้นอีกด้วย

P ย่อมาจาก PHP, Perl และ Python เป็นภาษาสคริปต์ที่เขียนง่าย ขึ้นอยู่กับว่าเว็บไซต์ของเราใช้ภาษาอะไรในการพัฒนา เหมาะกับเว็บไซต์ที่ต้องการความยืดหยุ่น รวดเร็วในการพัฒนาเพราะเมื่อปรับแก้ไขโค๊ดเสร็จสามารถ refresh page ได้เลย

และ MEAN ละ มันคืออะไร

MEAN หรือ MEAN Stack ยุคนี้สมัยนี้นักพัฒนาสาย Front end คงต้องเคยได้ยิน MEAN เป็นแน่แท้ กล่าวคือ MEAN นี่ก็คือการพัฒนา Web Application ที่ใช้ความสามารถของ Javascript ได้เต็มประสิทธิภาพ เป็นการร่วมกันของเครื่องมือการพัฒนาเว็บ 4 แบบ มารวมเข้าไว้ด้วยกันที่เครื่องมือเหล่านี้มีพื้นฐานเป็น Javascript ทั้งหมด จึงถือได้ว่าการพัฒนาเว็บด้วย MEAN ถือได้กับการพัฒนาเว็บด้วย Javascript แบบเต็มรูปแบบ และ MEAN มีที่มาจากอะไรบ้างละ

M ย่อมาจาก Mongo DB เป็น open-source document database เรียกง่าย NoSQL แตกต่างกับการเก็บข้อมูลแบบดั่งเดิม RDBMS Database ที่จำเป็นจะต้องสนใจใน Column เป็นหลัก แต่ NoSQL จะมองข้อมูล เป็น key และ value คล้ายกับข้อมูลรูปแบบของ JSON (JavaScript Object Notation) ดังนั้น ข้อมูลมีเข้ามาเท่าไหร่ก็จะใช้งานเท่านั้น (แต่ข้อมูลต้องอยู่ในรูปแบบของ JSON Data)

E ย่อมาจาก ExpressJS เป็น Web Application Framework ที่ได้รับความนิยมอย่างมากในการสร้าง Web Application บน NodeJS เพราะ ExpressJS จะเข้ามาช่วยจัดการเรื่อง  Routing  และ Middleware และทำงานในรูปแบบ MVC และมี Document ที่ดีอีกด้วย

A ย่อมาจาก AngularJs คือ client-side MVC/MVVM Framework ที่พัฒนาด้วยภาษา JavaScript เหมาะสำหรับเว็บแนว Single Page Applications (SPA) โดยมี Google ยักษ์ใหญ่คอยสนับสนุนอย่างต่อเนื่อง ปัจจุบันได้ออก Version 2 มาเป็นที่เรียบร้อยแล้ว

N ย่อมาจาก NodeJS คือหัวใจหลักของการพัฒนา Web Application ด้วย MEAN เลยทีเดียวเพราะ Application ที่เราพัฒนาได้สำเร็จจำเป็นต้องมี Web Server ช่วยให้ Application ของเราทำงานได้ฉนัน NodeJS จึงคอยทำหน้าที่เป็น Web Server อีกอย่างที่สำคัญคือ Open Source อีกด้วย




บทความนี้ก็ขอพูดถึงเพียงเท่านี้ก็แล้วกันนะครับ

 

#jQuery[2] ทำอัพโหลดไฟล์ด้วย Dropzone JS

สำหรับการพัฒนาเว็บไซต์ที่ต้องยุ่งเกี่ยวกับการอัพโหลดไฟล์เอกสาร ไฟล์รูปภาพแล้วก็คงจะพอหาแหล่งข้อมูลได้ทั่วไป แต่ก็ล้วนแล้วจะต้องมาปรับแต่งโค๊ดเพื่อกรองข้อมูลไฟล์ก่อนจะเข้าไปถึงขั้นตอนการทึกข้อมูลเข้าระบบ โดยต้องให้ความสำคัญกับเรื่องเหล่านี้เสมอ

  • ขนาดไฟล์ที่อนุญาตในการอัพโหลด
  • ประเภทไฟล์ที่อนุญาตในการอัพโหลด
  • การอัพโหลดไฟล์แบบไฟล์เดียว และหลายไฟล์
  • จำนวนไฟล์สูงสุดที่อนุญาตให้อัพโหลดได้ในแต่ละครั้ง
  • ที่คำคัญเลยคือก่อนการที่เราจะบันทึกการอัพโหลด จะให้ review รูปภาพก่อนจะทำได้อย่างไร
  • อื่น ๆ




ปัจจุบันนี้ Javascript ทำได้เกือบทุกอย่างจริง ๆ ทำให้เรื่องการอัพโหลดไฟล์เป็นงานง่ายไปเลย

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dropzone Poolsawat</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script type="text/javascript">
	var myDropzone = {};
	Dropzone.options.myAwesomeDropzone = {
		url : 'xxxxxx',
		paramName : "fileOther", // ชื่อไฟล์ปลายทางเมื่อ upload แบบ mutiple จะเป็น array
		autoProcessQueue : false,// ใส่เพื่อไม่ให้อัพโหลดทันที หลังจากเลือกไฟล์
		uploadMultiple : true, // อัพโหลดไฟล์หลายไฟล์
		parallelUploads : 10, // ให้ทำงานพร้อมกัน 10 ไฟล์
		maxFiles : 5, // ไฟล์สูงสุด 5 ไฟล์
		addRemoveLinks : true, // อนุญาตให้ลบไฟล์ก่อนการอัพโหลด
		maxFilesize: 2, // MB
		previewsContainer : ".dropzone", // ระบุ element เป้าหลาย
		dictRemoveFile : "Remove", // ชื่อ ปุ่ม remove
		dictCancelUpload : "Cancel", // ชื่อ ปุ่ม ยกเลิก
		dictDefaultMessage : "เลือกรูปภาพ", // ข้อความบนพื้นที่แสดงรูปจะแสดงหลังจากโหลดเพจเสร็จ
		dictFileTooBig : "ไม่อนุญาตให้อัพโหลดไฟล์เกิน 2 MB", //ข้อความแสดงเมื่อเลือกไฟล์ขนาดเกินที่กำหนด		
		acceptedFiles : "image/*", // อนุญาตให้เลือกไฟล์ประเภทรูปภาพได้
		// The setting up of the dropzone
		init : function() {
			myDropzone = this;
			/*this.on("addedfile", function(file) {
				
			}).on("removedfile", function(file) {
				
			}).on("thumbnail", function(file) {
				
			}).on("error", function(file) {
				
			}).on("processing", function(file) {
				
			}).on("uploadprogress", function(file) {
				
			});*/
		}
	}
	
	$(document).ready(function(){
			$('#btnUpload').on('click',function(){
				myDropzone.processQueue();
			});
	});
	
</script>
</head>
<body>
	<div class="dropzone" id="my-awesome-dropzone" style="font-size: 1.5em;">
		<h3 class="dropzone-previews ui"></h3>		
		<div class="fallback">
			<input name="file" type="file" multiple class="form-control" accept="image/jpg" />
		</div>
	</div>
	<button type="button" id="btnUpload">อัพโหลดไฟล์</button>
</body>
</html>

dropzone2




ก็เลยอยากเอาตัวอย่างโค๊ดการอัพโหลดไฟล์มาแบ่งปันกัน

Interceptors คืออะไร ใช้งานอย่างไรใน Spring MVC

สำหรับนักพัฒนาเว็บไซต์ สาย Java น่าจะคุ้นเคยกับคำว่า Spring Framwork มันก็คือเครื่องมือพัฒนาโปรแกรมที่ต้องทำตามกรอบการทำงาที่กำหนดให้ โดยตัว Spring Framework นี้ก็มีแบ่งแยกออกเป็นหลายรูปแบบ 1 ใน นั้นก็คือ Spring MVC ที่เป็นเครื่องมือการสร้างเว็บ ที่รองรับแนวคิดแบบ MVC (Model , View ,Controller)

ถ้ามาพูดถึงเรื่องการพัฒนาเว็บที่มีการติดต่อระหว่าง Client กับ Server จึงต้องติดต่อผ่านการ Http Request คือสิ่งที่ Client เรียกร้องขอไปที่ฝั่ง Server และเมื่อฝั่ง Server ได้รับแล้วจะส่ง Http Response ตอบกลับมายังฝั่ง Client

ถ้าสมมติสร้างเว็บไซต์มา 1 เว็บด้วย Spring MVC และอยากจะตรวจสอบ Authentication การเข้าใช้งานแต่ละหน้าเว็บเราจะให้ไปใส่ Code การตรวจสอบสิทธิทุก ๆ หน้าเว็บมันก็เพิ่มงานของนักพัฒนาไปอีก และถ้ามันจะมีสิ่งที่จะสามารถเอา Code การตรวจสอบสิทธินี้มาไว้ที่เดียวได้มันก็จะดีไม่ใช่น้อย

Interceptors คืออะไร

Interceptor คือ Feature นึงใน Spring MVC ทำหน้าที่ดัก HTTP Request  ที่เข้ามาก่อนที่  Controller ทำงานและหลัง Controller ทำงานได้

ตัวอย่างขั้นตอนการใช้งาน

สร้าง Class ExampleIntercepter เพื่อ implements AsyncHandlerInterceptor ขึ้นมา 1 Class

package xxx.xxxx.xxxxx;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.AsyncHandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

public class ExampleIntercepter implements AsyncHandlerInterceptor {

	public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3) throws Exception {
		// TODO Auto-generated method stub

	}

	public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3) throws Exception {
		// TODO Auto-generated method stub

	}

	public boolean preHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2) throws Exception {
		// TODO Auto-generated method stub
		// ******** Insert Code Check Before Load Web Page ***********
		return false;
	}

}

interceptors

  • preHandle จะถูกเรียกก่อนที่ Controller ทำงาน
  • postHandle จะถูกเรียกหลังจาก Controller ทำงาน
  • afterCompletion  จะถูกเรียกหลังจาก Render View เรียบร้อยแล้ว

จากนั้นเพิ่มโค๊ด เข้าไปในไฟล์ dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:tx="http://www.springframework.org/schema/tx" xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="
 http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context-4.0.xsd
 http://www.springframework.org/schema/mvc
 http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">

	<context:component-scan base-package="xxx.xxxx.xxxxx" />

	<mvc:resources mapping="/asset/**" location="/asset/"
		cache-period="10000" />
	<mvc:default-servlet-handler />

	<tx:annotation-driven />

	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix">
			<value>/jsp/</value>
		</property>
		<property name="suffix">
			<value>.jsp</value>
		</property>
	</bean>
        
        <!-- Code interceptors config-->
	<mvc:interceptors>
		<mvc:interceptor>                           
			<mvc:mapping path="/**" />
			<bean class="xxx.xxxx.xxxxx.ExampleIntercepter" />
		</mvc:interceptor>
	</mvc:interceptors>
</beans>

options เพิ่มเติม กรณีไม่ต้องการให้ Request บางตัวไม่ต้องผ่าน intercepter นี้ก็สามารถระบุได้

<mvc:interceptors>
		<mvc:interceptor>                           
			<mvc:mapping path="/**" />
			<mvc:exclude-mapping path="/login**" />
			<mvc:exclude-mapping path="/checkLogin**" />
			<bean class="xxx.xxxx.xxxxx.ExampleIntercepter" />
		</mvc:interceptor>
</mvc:interceptors>

จากโค๊ดนี้ต้องการให้ url ที่เรียกเข้า controller ที่มีชื่อ ด้วยคำว่า login,checkLogin สามารถผ่านไปได้ ไม่ต้องเข้า Intercepter