Pagination trong ReactJs

Khi làm các ứng dụng web, chúng ta luôn có nhu cầu lấy dữ liệu từ các remote server, API… các dữ liệu mạng xã hội, tin tức, shopping, thanh toán thì rất nhiều records, do đó chúng ta cần giải pháp phân trang để giảm tải sự hiển thị quá nhiều data gây khó chịu cho người dùng.

Hướng dẫn đơn giản sau đây giúp bạn dễ dàng phân trang trong app ReactJs

Ví dụ ở đây sử dụng API dữ liệu các quốc gia, 248 quốc gia tất cả. Chúng ta sẽ bắt đầu với ứng dụng react đơn giản.

Tạo một app react js

[code lang="js"]
npx create-react-js pagination
[/code]

Cài đặt các thư viện cần thiết

[code lang="js"]
npm i bootstrap countries-api prop-types react-flags
[/code]

Sau khi cài đặt thành công chúng ta copy folder flags ở địa chỉ node_modules\react-flags\vendor đưa vào folder public\img

Open file index.js, thêm code bootstrap

[code lang=”js”] import “bootstrap/dist/css/bootstrap.min.css”; [/code]

Components

Trong folder src, tạo folder components

Tạo 2 component

  • CountryCard.jsx Component
  • Pagination.jsx Component

CountryCard Component

[code lang=”js”] import React, { Component, Fragment } from ‘react’; import PropTypes from ‘prop-types’; import Flag from ‘react-flags’; class CountryCard extends Component { render() { const { cca2: code2 = “”, region = null, name = {} } = this.props.country || {}; return (

{name.common} {region}

) } } CountryCard.propTypes = { country: PropTypes.shape({ cca2: PropTypes.string.string, region: PropTypes.string.isRequired, name: PropTypes.shape({ common: PropTypes.string.isRequired }).isRequired }).isRequired } export default CountryCard [/code]

Pagination Component

[code lang=”js”] import React, { Component, Fragment } from “react”; import PropTypes from “prop-types”; const LEFT_PAGE = “LEFT”; const RIGHT_PAGE = “RIGHT”; const range = (from, to, step = 1) => { let i = from; const range = []; while (i <= to) { range.push(i); i += step; } return range; }; class Pagination extends Component { constructor(props) { super(props); const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props; this.pageLimit = typeof pageLimit === “number” ? pageLimit : 30; this.totalRecords = typeof totalRecords === “number” ? totalRecords : 0; this.pageNeighbours = typeof pageNeighbours === “number” ? Math.max(0, Math.min(pageNeighbours, 2)) : 0; this.totalPages = Math.ceil(this.totalRecords / this.pageLimit); this.state = { currentPage: 1 }; } componentDidMount() { this.gotoPage(1); } gotoPage = page => { const { onPageChanged = f => f } = this.props; const currentPage = Math.max(0, Math.min(page, this.totalPages)); const paginationData = { currentPage, totalPages: this.totalPages, pageLimit: this.pageLimit, totalRecords: this.totalRecords }; this.setState({ currentPage }, () => onPageChanged(paginationData)); }; handleClick = (page, evt) => { evt.preventDefault(); this.gotoPage(page); }; handleMoveLeft = evt => { evt.preventDefault(); this.gotoPage(this.state.currentPage – this.pageNeighbours * 2 – 1); }; handleMoveRight = evt => { evt.preventDefault(); this.gotoPage(this.state.currentPage + this.pageNeighbours * 2 + 1); }; fetchPageNumbers = () => { const totalPages = this.totalPages; const currentPage = this.state.currentPage; const pageNeighbours = this.pageNeighbours; const totalNumbers = this.pageNeighbours * 2 + 3; const totalBlocks = totalNumbers + 2; if (totalPages > totalBlocks) { let pages = []; const leftBound = currentPage – pageNeighbours; const rightBound = currentPage + pageNeighbours; const beforeLastPage = totalPages – 1; const startPage = leftBound > 2 ? leftBound : 2; const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage; pages = range(startPage, endPage); const pagesCount = pages.length; const singleSpillOffset = totalNumbers – pagesCount – 1; const leftSpill = startPage > 2; const rightSpill = endPage < beforeLastPage; const leftSpillPage = LEFT_PAGE; const rightSpillPage = RIGHT_PAGE; if (leftSpill && !rightSpill) { const extraPages = range(startPage – singleSpillOffset, startPage – 1); pages = [leftSpillPage, …extraPages, …pages]; } else if (!leftSpill && rightSpill) { const extraPages = range(endPage + 1, endPage + singleSpillOffset); pages = […pages, …extraPages, rightSpillPage]; } else if (leftSpill && rightSpill) { pages = [leftSpillPage, …pages, rightSpillPage]; } return [1, …pages, totalPages]; } return range(1, totalPages); }; render() { if (!this.totalRecords) return null; if (this.totalPages === 1) return null; const { currentPage } = this.state; const pages = this.fetchPageNumbers(); return (

); } } Pagination.propTypes = { totalRecords: PropTypes.number.isRequired, pageLimit: PropTypes.number, pageNeighbours: PropTypes.number, onPageChanged: PropTypes.func }; export default Pagination; [/code]

App.js

[code lang=”js”] import React, { Component } from ‘react’; import Countries from ‘countries-api/lib/data/Countries.json’; import ‘./App.css’; import Pagination from “./components/Pagination”; import CountryCard from ‘./components/CountryCard’; class App extends Component { state = { allCountries: [], currentCountries: [], currentPage: null, totalPages: null }; componentDidMount() { const allCountries = Countries; this.setState({ allCountries }); } onPageChanged = data => { const { allCountries } = this.state; const { currentPage, totalPages, pageLimit } = data; const offset = (currentPage – 1) * pageLimit; const currentCountries = allCountries.slice(offset, offset + pageLimit); this.setState({ currentPage, currentCountries, totalPages }); }; mapCountry(country, index) { return } render() { const { allCountries, currentCountries, currentPage, totalPages } = this.state; const totalCountries = allCountries.length; if (totalCountries === 0) return null; const headerClass = [ “text-dark py-2 pr-4 m-0”, currentPage ? “border-gray border-right” : “” ] .join(” “) .trim(); const displayCountries = currentCountries.map(this.mapCountry); return (

{totalCountries}{” “} Countries

{currentPage && ( Page {currentPage} /{” “} {totalPages} )}

{displayCountries}

); } } export default App; [/code]


Download mã nguồn ở đây

 GitHub

Tạo bot discord check giá coinmarketcap

Các thư viện sử dụng

https://discord.js.org

https://www.npmjs.com/package/node-fetch

Yêu cầu máy đã cài nodejs

Tạo app trên discord: https://discordapp.com/developers/docs/intro

Lấy token để sử dụng sau:

Sử dụng Visual Code để code.

Tạo file bot.js

Code:

npm install discord.js

const Discord = require('discord.js');
const client = new Discord.Client();

const commandPrefix = "!";

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
});

client.on('message', (message)=> {
    if(!message.content.startsWith(commandPrefix)) return;
    const args = message.content.slice(commandPrefix.length).trim().split(/ +/g);
    const command = args.shift().toLowerCase();
       
    switch(command){
    	case "hello":
			hello(message);
    	break;
    	case "help":
			help(message);
    	break;
    	case "ping":
			sendText(message, "Pong");
    	break;
    	case "clear":
    		clear(message);
    	break;
    	case "cmc":
    		coinmarketcap(message);
    	break;
    	case "c":
    		chart(message, args);
    	break;
    	case "p":
    		price(message, args);
    	break;    	
    	default:
    		sendText(message, "Command not found.")
    	break;
    }
});

client.login('NDQyMDAyMTAyODAyMzE3MzMz.DdMfbw.3eV-Qk5N2TpDIDgatQb1ILeD0Hc');

Các hàm chính trong bot

function hello(message){
	message.channel.send("Hello " + message.author + "! Nice to meet you. :smiley: ");
}
function help(message){
	 let embed = new Discord.RichEmbed()            
            .setAuthor("Hello world", "http://icons.iconarchive.com/icons/froyoshark/enkel/256/Bitcoin-icon.png")
            .addField("!hello", "Sends a friendly message!")
            .addField("!help", "Sends this help embed")
            .addField("!cmc", "Coin Market Cap")
            .addField("!ping", "Ping")
            .addField("!p", "Price of coin. Ex: BTCUSDT or price BTC")
            .setTitle("Bot commands:")
            .setFooter("Here you have all bot commands you can use!")
            .setColor("AQUA");        
        message.channel.send({embed: embed});
}
function sendText(message, text){
	message.channel.send(text).then(msg=>{msg.delete(10000)}); 
    message.delete(12000);
}

function clear(message){
	if (message.member.hasPermission("MANAGE_MESSAGES")) {
        message.channel.fetchMessages()
           .then(function(list){
                message.channel.bulkDelete(list);
            }, function(err){message.channel.send("ERROR: ERROR CLEARING CHANNEL.")})                        
    }
    else{
    	console.log("You don't have permission");
    }

Hàm lấy giá trên coinmarketcap.com

npm install node-fetch

function coinmarketcap(message){
	    let url = 'https://api.coinmarketcap.com/v2/global/';	
		let bitcoin_percentage_of_market_cap='';
		let total_market_cap= '';
		let total_volume_24h = '';
		let last_updated = '';
		fetch(url)
    	.then(res => res.json())
    	.then(json => {
    		// console.log(json);
    		bitcoin_percentage_of_market_cap =  json.data.bitcoin_percentage_of_market_cap;
    		total_market_cap = json.data.quotes.USD.total_market_cap;
 			total_volume_24h = json.data.quotes.USD.total_volume_24h;
 			last_updated = json.data.last_updated;
			
 			let embed = new Discord.RichEmbed()
 			.setAuthor("Coinmarketcap", "http://icons.iconarchive.com/icons/froyoshark/enkel/256/Bitcoin-icon.png")
            .addField("Market Cap (USD):", numberFormat(total_market_cap))
            .addField("24h Vol (USD): ", numberFormat(total_volume_24h))
            .addField("BTC Dominance(%): ", bitcoin_percentage_of_market_cap)            
            .setFooter("Last Updated: " + timeConverter(last_updated))
            .setColor("AQUA");

        // Send the embed with message.channel.send()
        message.channel.send({embed: embed}).then(msg=>{msg.delete(10000)}); 
        message.delete(12000);       
    	});    	 
}

Thêm bot vào Server Discord

Open link & thay bằng client_id của bạn trên trình duyệt

Khởi chạy bot

node bot.js

Demo

 

Source code:  GitHub

Chúc các bạn thành công

DONATE

Bitcoin address: 1tmxPQbmycQMehAAZ8FshbvEoQZ6Ri7PT

ETH Address: 0xfe17aaf16bceb4311795b2e8ff0199640bdce54a

ETC Address: 0xfe17aaf16bceb4311795b2e8ff0199640bdce54a

XVG Address: D9iP7fhKbHJKViwUG9MWcAt3JPdCuxnCZJ

Utilities javascript, angualr js

Hướng dẫn convert một Json object về List Object trong javascript JSON. Trường hợp backend trả về 1 object, ví dụ Dictionary…

const jsonObject = {'key1':'value1', 'key2':'value2', 'key3':'value3'};
console.log(jsonObject);
const list = [];
for (const key in jsonObject) {
  if (jsonObject.hasOwnProperty(key)) {
    const temp = {
      Id: key,
      Name: jsonObject[key]
    };
    list.push(temp);
  }
}
console.log(list);

Merge(trộn) 2 object thành 1 object thứ 3, có tất cả thuộc tính & giá trị của 1 & 2.

const resources  = {
  search: 'Search',
  reset: 'Reset',
  save: 'Save change',
  cancel: 'Cancel',
  edit: 'Edit',
  remove: 'Remove',
  add_new: 'Add new',
  tools: 'Tools',        
}
console.log(resources);
const resources_setting = {        
  key: 'Key',
  value: 'Value'        
};
console.log(resources_setting);
function adapter(itemA) {
  for (const key in resources) {
    if (resources.hasOwnProperty(key)) {
      itemA[key] = resources[key];
    }
  }
  return itemA;
}
const resourcesOutput = adapter(resources_setting);
console.log(resourcesOutput);

Cascading Dropdown Ajax

Chào các bạn

Khi lập trình các bạn hay gặp vấn đề khó khăn khi lấy dữ liệu giữa các Dropdown List khác nhau. Ví dụ: Từ tỉnh thành -> quận huyện -> Xã phường…

Đây là khó khăn của rất nhiều bạn sinh viên khi mới bắt đầu học lập trình. Video dưới đây sẽ hướng dẫn bạn cách giải quyết, khá là đơn giản. Hoàn toàn có thể áp dụng nhiều trường hợp khác nhau.

Video không có tiếng, do mình làm trong lúc ngẫu hứng ngoài quán cafe. Các bạn có thể theo dõi, hoặc tải mã nguồn về phân tích thêm.

Slide giới thiệuhttps://docs.google.com/presentation/d/1soxUWN7Xa6Z89Az-PNCtiyGgMVdVSgmqzp1bf7hdi50/edit?usp=sharing

Tài nguyên

SQL Data:

CSDL tên Quốc gia, tỉnh thành phố thị xã quận huyện, xã phường Việt Nam

Demo

Cascading Dropdown Ajax

Code C#

 public class MyDbContext:DbContext
    {
        // Ở đây các bạn có thể khai báo trong Web.config.
        private const string sqlConnection = @"Data Source=.\SQLExpress; Initial Catalog = CountryDb; User Id=sa; Password = sa";

        public MyDbContext() : base(sqlConnection)
        {

        }
      
        public DbSet<Country> Countries { get; set; }
        public DbSet<Province> Provinces { get; set; }
        public DbSet<District> Districts { get; set; }
        public DbSet<Ward> Wards { get; set; }

    }

 

  public JsonResult GetAllCountries()
        {
            using(var db = new MyDbContext())
            {
                var data = db.Countries.OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
        /// <summary>
        /// Hàm lấy danh sách tỉnh thành theo CountryId. 
        /// Id = 237 là của Việt Nam. Do database mình quy định vậy
        /// Test OK
        /// </summary>
        /// <param name="id">Id của country</param>
        /// <returns></returns>
        public JsonResult GetAllProvinceByCountryId(int? id=237) 
        {
            using (var db = new MyDbContext())
            {               
                var data = db.Provinces.Where(x=>x.CountryId== id).OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
        /// <summary>
        /// Hàm lấy tất cả danh sách quận huyện
        /// Id = 1 là Hà Nội, do database mình quy định vậy
        /// Test OK
        /// </summary>
        /// <param name="id">Id = ProvinceId</param>
        /// <returns></returns>
        public JsonResult GetAllDistrictByProvinceId(int? id = 1)
        {
            using (var db = new MyDbContext())
            {
                var data = db.Districts.Where(x => x.ProvinceId == id).OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
        /// <summary>
        /// Hàm lấy danh sách xã phường theo quận huyện
        /// Id= 1 là Ba Đình. Do database quy định
        /// Test OK
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public JsonResult GetAllWardByDistrictId(int? id = 1)
        {
            using (var db = new MyDbContext())
            {
                var data = db.Wards.Where(x => x.DistrictId == id).OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }

Code js

// File javascript để lấy dữ liệu

// Khai báo URL service của bạn ở đây
var baseService = "/Service";
var countryUrl = baseService + "/GetAllCountries";
var provinceUrl = baseService + "/GetAllProvinceByCountryId";
var districtUrl = baseService + "/GetAllDistrictByProvinceId";
var wardUrl = baseService + "/GetAllWardByDistrictId";
$(document).ready(function () {
    // load danh sách country
    _getCountries();
    $("#ddlCountry").on('change', function () {
        var id = $(this).val();
        if (id != undefined && id != '') {
            _getProvince(id);
        }
    });

    $("#ddlProvince").on('change', function () {
        var id = $(this).val();
        if (id != undefined && id != '') {
            _getDistrict(id);
        }
    });
    $("#ddlDistrict").on('change', function () {
        var id = $(this).val();
        if (id != undefined && id != '') {
            _getWard(id);
        }
    });
    $("#ddlWard").on('change', function () {
        var countryText = $("#ddlCountry option:selected").text();
        var provinceText = $("#ddlProvince option:selected").text();
        var districtText = $("#ddlDistrict option:selected").text();
        var wardText = $("#ddlWard option:selected").text();
        var html = "Quốc gia: " + countryText + " Tỉnh thành: " + provinceText + " " + "Quận huyện: " + districtText + " " + "Xã phường: " + wardText;
        html += "</br>Quê bạn thật là đẹp. Chúc mừng bạn!!!";
        $("#divResult").html(html);
    });
});
function _getCountries() {
    $.get(countryUrl, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlCountry").html(html);
        }
    });
}
// truyền id của country vào
function _getProvince(id) {
    $.get(provinceUrl + "/"+id, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlProvince").html(html);
        }
    });
}
// truyền id của province vào
function _getDistrict(id) {
    $.get(districtUrl + "/" + id, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlDistrict").html(html);
        }
    });
}
// truyền id của district vào
function _getWard(id) {
    $.get(wardUrl + "/" + id, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlWard").html(html);
        }
    });
}

Chúc các bạn thành công.

Download  GitHub

How to Upload file in Angular

Backend:

Link demo: http://angular.tuanitpro.com/#/uploader

  • Username: tuanitpro
  • Password: 123456

 

uploader.component.css

input[type='file']{
    display: none;
}
#uploader{
    width:100%; color:#fff; 
    font-family:Verdana, Geneva, Tahoma, sans-serif; 
     background:#0094ff;
      text-align:center;
       padding:50px;
        cursor:pointer;
}

uploader.component.html

<div class="container body">
  <div class="main_container">

    <div class="right_col" role="main">


      <div class="">
        <div class="clearfix"></div>
        <div class="row">
          <div class="col-md-12">
            <h2>Angular 4 - Upload file</h2>
          </div>

          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel" style="height: auto;">

              <div class="x_content">

                <input type="file" id="fileUploadInput" accept="images/*" (change)="fileChange($event)" />
                <div id="uploader"                    (click)="doUploadFile()">
                 <i class="fa fa-picture-o"></i> {{uploadResult.uploadingText}}
                </div>
                <div class="progress progress-striped" *ngIf="uploadResult.progress > 0">
                  <div class="progress-bar progress-bar-success"  [ngStyle]="{'width':  uploadResult.progress+'%'}">{{uploadResult.progress}}%</div>
                </div>
                <img  *ngIf="uploadResult.fileUrl" src="{{uploadResult.fileUrl}}" style="width:100%;" class="img-response">
              </div>
            </div>
          </div>
        </div>
      </div>





    </div>

  </div>
</div>

uploader.component.ts

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Http } from '@angular/http';

import $ from 'jquery/dist/jquery.min';

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.component.html',
  styleUrls: ['./uploader.component.css']
})
export class UploaderComponent implements OnInit {
  uploadingText = 'Chọn file (chỉ chấp nhận file ảnh)';
  uploadResult: any = {
    progress: 0,
    uploadingText: this.uploadingText,
    fileUrl: null
  }
  constructor(private title: Title) { }
  ngOnInit() {
    this.title.setTitle("Angular 4 - Upload file"); 
  }
  doUploadFile() {
    this.uploadResult.progress = 0;
    this.uploadResult.fileUrl = null;
    this.uploadResult.uploadingText = this.uploadingText;
    $("#fileUploadInput").trigger("click");
  }
  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      let formData: FormData = new FormData();
      formData.append('uploadFile', file);
      let xhr: XMLHttpRequest = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            let json = JSON.parse(xhr.response);
            let fileUrl = 'http://minhquandalat.com/uploads/' + json.Name;
            this.uploadResult.progress = 100;
            this.uploadResult.fileUrl = fileUrl;
            this.uploadResult.uploadingText = "Hoàn thành";

          } else {
            console.log(xhr.response);
          }
        }
      };
      xhr.upload.onprogress = (event) => {
        this.uploadResult.uploadingText = "Đang tải ảnh lên...";
        let percentVal = Math.round(event.loaded / event.total * 100);
        this.uploadResult.progress = percentVal;
      };
      xhr.open('POST', "http://minhquandalat.com/api/FileUpload", true);
      xhr.send(formData);
    }
  }
}

Happy coding

Uploading Multiple Files to Google Drive with Google App Script

Hướng dẫn upload nhiều file trong Google App Script bằng Javascript, kết hợp HTML

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Uploading Multiple Files to Google Drive with Google App Script</h1>
    
    <div>
        <input type="file" name="filesToUpload" id="filesToUpload" multiple>
        <input type="button" value="Submit" onclick="uploadFiles()">
    
    <br />
    <div id="output"></div>
    </div>
    
    
   <?!= include('Script'); ?>
  </body>
</html>


Code.gs

function doGet() {
   return HtmlService.createTemplateFromFile('Index').evaluate().setTitle("Upload files");
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
function createFolder(parentFolderId, folderName) {
	try {
		var parentFolder = DriveApp.getFolderById(parentFolderId);
		var folders = parentFolder.getFoldersByName(folderName);
		var folder;
		if (folders.hasNext()) {
			folder = folders.next();
		} else {
			folder = parentFolder.createFolder(folderName);
		}
		return {
			'folderId' : folder.getId()
		}
	} catch (e) {
		return {
			'error' : e.toString()
		}
	}
}

function uploadFile(base64Data, fileName, folderId) {
	try {
		var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0]
				.replace('data:', '');
		var byteCharacters = Utilities.base64Decode(splitBase[1]);
		var ss = Utilities.newBlob(byteCharacters, type);
		ss.setName(fileName);

		var folder = DriveApp.getFolderById(folderId);
		var files = folder.getFilesByName(fileName);
		var file;
		while (files.hasNext()) {
			// delete existing files with the same name.
			file = files.next();
			folder.removeFile(file);
		}
		file = folder.createFile(ss);
		return {
			'folderId' : folderId,
			'fileName' : file.getName()
		};
	} catch (e) {
		return {
			'error' : e.toString()
		};
	}
}

Script.html

<script>
		var rootFolderId = '0BzFoC9aU9gwFYXZkbUZiTHg2LVE';
		var numUploads = {};
		numUploads.done = 0;
		numUploads.total = 0;
		var folderName = 'Demo';
		function uploadFiles() {
			var allFiles = document.getElementById('filesToUpload').files;
			  
			
			if (allFiles.length == 0) {
				window.alert('No file selected!');
			} else {
				numUploads.total = allFiles.length;
				google.script.run.withSuccessHandler(createFolder_withSuccessHandler).createFolder(rootFolderId, folderName);
			}
		}
        function createFolder_withSuccessHandler(data){
            var allFiles = document.getElementById('filesToUpload').files;
            for (var i = 0; i < allFiles.length; i++) {						
						uploadFile(allFiles[i], data.folderId);
					}
        }
		function uploadFile(file, folderId) {
			var reader = new FileReader();
			reader.onload = function(e) {
				var content = reader.result;
				document.getElementById('output').innerHTML = 'uploading '
						+ file.name + '...';					
				google.script.run.withSuccessHandler(onFileUploaded)
						.uploadFile(content, file.name, folderId);
			}
			reader.readAsDataURL(file);
		}
		function onFileUploaded(r) {
			numUploads.done++;
			document.getElementById('output').innerHTML = 'uploaded '
					+ r.fileName + ' (' + numUploads.done + '/'
					+ numUploads.total + ' files).';
			if (numUploads.done == numUploads.total) {
				document.getElementById('output').innerHTML = 'All of the '
						+ numUploads.total + ' files are uploaded';
				numUploads.done = 0;
			}
		}	
</script>

Source code

Resize ảnh với HTML5 FileReader

Khi lập trình web, các vấn đề liên quan đến hình ảnh được sử dụng thường xuyên, ví dụ upload hình ảnh sản phẩm, banner, logo….

Từ đây nảy sinh vài vấn đề như: muốn thấy hình ảnh đại diện ngay khi chọn file. Resize hình ảnh để tiết kiệm dung lượng…. Trước khi HTML5 ra đời, chúng ta thường hay giải quyết mọi thứ trên server, tức là upload ảnh lên server, sau đó xử lý. VD: dùng ajax để upload ảnh lên server, sau đó trả về ảnh đại diện…. Điều này dẫn đến tốn thời gian xử lý cho máy chủ, hoặc file lớn, mạng chậm thì user phải chờ đợi rất lâu.

Thật may mắn khi HTML5 ra đời, nó giúp chúng ta cả 2 việc trên luôn. Đó là preview (xem trước) hình ảnh ngay khi vừa chọn xong, đồng thời resize ảnh luôn ngay trên trình duyệt. Sau đó chúng ta chỉ việc upload mã base64 này lên server, và convert lại thành hình ảnh là xong, hoặc lưu luôn base64 vào database cũng ok.

HTML sử dụng API FileReader, nó có thể đọc file ảnh, file txt, khá là thú vị.

Code chọn ảnh xong hiển thị ảnh đại diện

Code javascript

Các bạn chú ý, có sử dụng jQuery

Code resize hình ảnh

Code javascript

See the Pen Resize Image with HTML5 File Reader by tuanitpro (@tuanitpro) on CodePen.

Chúc các bạn thành công.

CSDL tên Quốc gia, tỉnh thành phố thị xã quận huyện, xã phường Việt Nam

  • Thông tin 245quốc gia trên thế giới
  • Thông tin 64 tỉnh thành  phố Việt Nam
  • Thông tin 697 quận huyện / thị xã
  • Thông tin 11110 xã phường

Nguồn tài liệu tham khảo: cổng thông tin điện tử các tỉnh thành, quận huyện, từ điển bách khoa toàn thư điện tử Wikipedia.
Định dạng dữ liệu: bảng cơ sở dữ liệu SQL
Mục đích: chia sẻ giúp các bạn webmaster đang muốn lấy một nguồn thông tin chuẩn mực về tên các đơn vị hành chính cho các dự án website, cổng thông tin điện tử ….

 Download  

 

 

Chúc các bạn thành công

Upload file trong Google Apps Script

Hướng dẫn sau đây giúp bạn upload một file từ máy của hình lên thư mục trên Google Drive của bạn thông qua Google Apps Script

Code.gs

// Ham upload file, nhận vào một file input
function uploadFileToGoogleDrive(fileInput) {
/* Name of the Drive folder where the files should be saved */
var dropbox = FOLDER_NAME;
var folder,folders = DriveApp.getFoldersByName("Ten_thu_muc_cua_ban"); //getFolderById, getFoldersByName

/* Find the folder, create if the folder does not exist */
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}

/* Get the file uploaded though the form as a blob */
var file = folder.createFile(fileInput);

/* Set the file description as the name of the uploader */
//file.setDescription("Uploaded by " + form.myName);

/* Return the download URL of the file once its on Google Drive */
var fileUrl=file.getUrl();
Logger.log(fileUrl)
return fileUrl;
}


// Ham thực thi Upload file. Data là một FormId
function doUploadFile(data){

 var myFile = data.myfile;
 if(typeof myFile !== 'undefined' && myFile!=null && myFile.length>0)
 { 
 return uploadFileToGoogleDrive(myFile);
 }
 return "";
}

Code HTML

 <form name="uploadfile" enctype="multipart/form-data" id="uploadForm">
     <label>Chọn file tải lên</label>
     <input type="file" name="myfile" id="myfile" />
     <button type="button" class="btn btn-primary" onclick="return doUploadFile();">Upload</button>
</form>

Code Javascript

function doUploadFile() { 
        google.script.run           
            .doUploadFile(document.getElementById("uploadForm"));

}

 

Cách học lập trình ASP.NET MVC tốt nhất?

Bài viết được dịch từ trang web Danylkoweb

Gần đây tôi có tham dự một cuộc hội thảo CONDG hàng tháng và đã gặp một vài người có hứng thú trong việc học cách sử dụng ASP.NET MVC.

Thật trùng hợp, tôi cũng thấy có khá nhiều người trên mạng xã hội Quora hỏi về cách thức tốt nhất để học ASP.NET MVC. Ngoài việc thảo luận về cách tốt nhất để tìm hiểu nó, tôi cũng sẽ đưa ra những cách nhanh nhất để học lập trình ASP.NET MVC.

Học những kiến thức nền tảng trước

Nếu bạn là người chỉ mới bắt đầu làm quen với ASP.NET, thì bạn cần phải học VB.NET hoặc C# trước. Cả hai ngôn ngữ lập trình này là một phần của ASP.NET, do đó bạn cần phải quen thuộc với một (hoặc cả hai) ngôn ngữ.

Khi mới bắt đầu, tôi muốn giới thiệu tới bạn một cuốn sách C# của nhà xuất bản Apress có tên là Beginning C# Object-Oriented Programming của tác giả Dan Clark. Đây là một trong những cuốn sách có nội dung khá dễ hiểu dành cho người mới bắt đầu.

Nếu bạn là một người đã có kinh nghiệm lập trình trong (Java, C, C++, v.v…), thì tôi muốn giới thiệu tới bạn một cuốn sách khác từ Apress tên là Pro C# 5.0 and the .NET 4.5 Framework của tác giả Andrew Troelsen.

Bây giờ bạn biết mọi thứ về C#, lúc này bạn sẽ chuyển sang ASP.NET MVC.

Nếu bạn đang quan tâm đến cách làm thế nào để bắt đầu học Lập trình website với ASP.NET MVC thì tôi đang có Khóa học Lập trình ASP.NET MVC dành cho bạn đấy. Hình thức học linh hoạt, giúp bạn cách tiếp cận hoàn toàn khác biệt sách vở.

Bắt đầu tìm hiểu về ASP.NET MVC

Bạn có biết ASP.NET MVC là một nền tảng mã nguồn mở của Microsoft giúp cho công việc phát triển web của bạn trở nên dễ dàng hơn so với công nghệ trước đó của họ được gọi là WebForms. MVC là cụm từ viết tắt của Model-View-Controller. Đây là một pattern về kiến trúc phần mềm đã được hình thành từ những năm 1970 và 80.

Cách nhanh nhất để tìm hiểu một công nghệ mới là tìm hiểu sâu về cách mọi thứ hoạt động. Một cách để làm điều này đó là bạn hãy tải về và xem xét vòng đời của một ứng dụng web MVC. Đây là một tài liệu rất dễ hiểu và bổ ích. Tất cả mọi thứ được giải thích cho bạn qua những chi tiết cụ thể. Thậm chí tôi đã in nó ra và dán lên tường nơi bàn làm việc của mình.

Nếu bạn đang tìm kiếm một tài liệu để đọc, thì tôi muốn giới thiệu tới bạn cuốn sách có tên là Pro ASP.NET MVC 5 của tác giả Adam Freeman. Tôi đã thu được rất nhiều kiến thức cơ bản về lập trình ASP.NET MVC trong cuốn sách này và vẫn tham khảo lại khi cần.

Những khóa học lập trình trực tuyến

Nếu bạn đang tìm kiếm một khóa học lập trình trực tuyến chất lượng, thì một trong những trang web tôi yêu thích và thường hay lui tới là Pluralsight. Pluralsight có hơn 1.000 khóa học về tất cả mọi thứ từ lập trình web tới di động và ảo hóa. Bạn phải trả $30/tháng và tham gia các khóa học không giới hạn.

Về các khóa học ASP.NET MVC, tôi muốn giới thiệu tới bạn các khóa học Pluralsight sau đây:

  • ASP.NET MVC 5 Fundamentals – Scott Allen
  • Automated ASP.NET MVC Testing: End to End – Jason Roberts
  • Architecting Applications for the Real World in .NET – Cory House

Hầu hết các khóa học này có thời lượng từ 2 đến 3 giờ, bởi vậy bạn hãy dành đủ thời gian để hoàn thành các khóa học chất lượng này nhé!

Tạo ra một sản phẩm thú vị

Cuối cùng, hãy bắt đầu áp dụng kiến thức bạn đã học được bằng cách xây dựng một sản phẩm gì đó. Bạn đã học đến lúc này, tại sao lại không bắt đầu xây dựng một ứng dụng web? Dưới đây là một vài ý tưởng để giúp bạn bắt đầu:

  • Tạo ra một ứng dụng dạng To-do list (danh sách công việc phải làm)
  • Xây dựng một danh sách liên lạc (contact list)
  • Viết một blog nhỏ

Kết luận

Ưu điểm của phương pháp học này là bạn có thể áp dụng kiến thức đã học vào thực tế một cách nhanh chóng. Và bạn cũng có thể áp dụng cách học này cho những ngôn ngữ lập trình khác.

Viết code trong các ngôn ngữ lập trình khác sẽ trở nên ngày càng dễ dàng hơn cùng với kinh nghiệm mà bạn đã tạo ra cho chính mình.

Bạn có cách nào nhanh hơn để tìm hiểu về ASP.NET MVC? Hãy để lại ý kiến của mình trong phần bình luận phía dưới nhé!

Về tác giả bài viết:

hoc-lap-trinh-truc-tuyen-online-aspnet-mvc-tot-nhat-14012016-2Tác giả bài viết là Jonathan Danylko. Anh là người có trên 30 năm kinh nghiệm lập trình và hiện nay Jonathan đang tập trung vào lĩnh vực ASP.NET MVC Best Practices, Code Exorcisms (refactorings)…

 

Nguồn bài dịch: Techmaster.vn