2015年9月28日 星期一

購物車程式架構簡介 (shopping cart system analystics)

我曾寫過購物車，用的是他的描述的舊架構，如果改用他的新架構的確會比較有彈性，也比較好維護。在寫過比較多的 code 之後，現在比較會使用繼承來寫元件，下面這篇教學裡的重點應該很多，但我吸收到的有３個，一個是要把分工做好(Sessionless)，類似 Restful API 的概念，一個是要多寫成可以繼承的元件，第３個是Plugin模式，主要在這一個模式讓系統易擴充。



教學：
http://www.slideshare.net/jaceju/ss-6312192



張貼者： 於 沒有留言:
標籤：

取得實際對外IP的方法

這個是一個很簡單的小功能，對 client side 來說很有幫助，對server side 來說，也是超級簡單，所有的server side script 幾乎都支援，主要的問題就是要有一台Public IP 的 server.

官方網址：
https://www.ipify.org/

API說明：

API URIResponse TypeSample Output (IPv4)
https://api.ipify.orgtext98.207.254.136
https://api.ipify.org?format=jsonjson{“ip”:”98.207.254.136″}
https://api.ipify.org?format=jsonpjsonpcallback({“ip”:”98.207.254.136″});
https://api.ipify.org?format=jsonp&callback=getipjsonpgetip({“ip”:”98.207.254.136″});




使用範例：

Bash

#!/bin/bash

ip=$(curl -s https://api.ipify.org)
echo "My public IP address is: $ip"

Python

# This example requires the requests library be installed.  You can learn more
# about the Requests library here: http://docs.python-requests.org/en/latest/
from requests import get

ip = get('https://api.ipify.org').text
print 'My public IP address is:', ip

Ruby

require "net/http"

ip = Net::HTTP.get(URI("https://api.ipify.org"))
puts "My public IP Address is: " + ip

PHP

<?php
    $ip = file_get_contents('https://api.ipify.org');
    echo "My public IP address is: " . $ip;
?>

Perl

use strict;
use warnings;
use LWP::UserAgent;

my $ua = new LWP::UserAgent();
my $ip = $ua->get('https://api.ipify.org')->content;
print 'My public IP address is: '. $ip;

VB.NET

Dim client as New System.Net.WebClient
Dim ip as String = client.DownloadString("https://api.ipify.org")

NodeJS

var http = require('http');

http.get({'host': 'api.ipify.org', 'port': 80, 'path': '/'}, function(resp) {
  resp.on('data', function(ip) {
    console.log("My public IP address is: " + ip);
  });
});

Javascript

<script type="application/javascript">
  function getIP(json) {
    document.write("My public IP address is: ", json.ip);
  }
</script>

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

jQuery

<script type="application/javascript">
  $(function() {
    $.getJSON("https://api.ipify.org?format=jsonp&callback=?",
      function(json) {
        document.write("My public IP address is: ", json.ip);
      }
    );
  });
</script>

C#

using System;
using System.Net;

namespace Ipify.Examples {
    class Program {
        public static void Main (string[] args) {
            WebClient webClient = new WebClient();
            string publicIp = webClient.DownloadString("https://api.ipify.org");
            Console.WriteLine("My public IP Address is: {0}", publicIp);
        }
    }
}

Arduino

if (client.connect("api.ipify.org", 80)) {
    Serial.println("connected");
    client.println("GET / HTTP/1.0");
    client.println("Host: api.ipify.org");
    client.println();
} else {
    Serial.println("connection failed");
}


而且還有好心人幫忙多包了一層Object,  讓程式更好用：
ex:
https://github.com/rdegges/python-ipify
To install ipify, simply run:
$ pip install ipify
This will install the latest version of the library automatically.

Usage

Using this library is very simple. Here's a simple example:

>>> from ipify import get_ip
>>> ip = get_ip()
>>> ip
u'96.41.136.144'

張貼者： 於 沒有留言:
標籤： , , ,

2015年7月27日 星期一

[JS] jQuery 顯示 badge

badge 就是一個小圈圈裡有數字，找到一個有趣的 sample code, 可以下一個 class 就套出 badge, 缺點就是需要調一下別人的 css 把 沒有在用 style 先拿掉。

套出來的畫面：

使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="container">
  <h2>Badges on Buttons</h2>
  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>    
  <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>        
</div>

 </body>
</html>



example 2:
<!DOCTYPE html>
<html>

 <head>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

 <body>
    <button class="btn btn-sm btn-default like-btn active" type="button" id="10">
        <span class="glyphicon glyphicon-thumbs-up"></span>
        <span class="text">Liked</span>
        <span class="badge like-badge">1</span>
    </button>
    <script>
        $(document).on("click", ".like-btn", function(e) {
            e.preventDefault();

             var $label = $(this).find('.text'),
                $badge = $(this).find('.badge'),
                count = Number($badge.text()),
                active = $(this).hasClass('active');

             $label.text(active ? 'Like' : 'Liked');
            $badge.text(active ? count - 1 : count + 1);
            $(this).toggleClass('active');
        });
    </script>
</body>
</html>


資料來源：
http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp


張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

Facebook 留言板