顯示具有 網頁設計 標籤的文章。 顯示所有文章
顯示具有 網頁設計 標籤的文章。 顯示所有文章

2014年10月25日 星期六

Tornado (一個Python微型的Framework)


有段時間沒來更新這個網誌了,最近在如火如荼的進行著專題抗戰,現在就來寫一篇最近學的framework。

系統環境:Ubuntu 14.04 Server、Python3.4、Tornado 4.0.2、MongoDB 2.6、PyMongo


Tornado全稱Tornado Web Server,是一個用Python語言寫成的Web伺服器Web應用框架,由FriendFeed公司在自己的網站FriendFeed中使用,被Facebook收購以後框架以開源軟體形式開放給大眾。     以上節錄自Wiki

簡介就自行去估一下吧!就不進行簡介了。
我的架構大概像這樣,有點在抄django的寫法。
/ static/         -->  靜態檔案。
/ templates/  -->  範本(HTML檔案)。
/ manage.py -->  執行的檔案。
/ view.py       -->  主程式。
/ models.py  -->  模型(資料庫操作)。

manage.py
# -*- coding: utf-8 -*-
#!/usr/bin/env python3.4

import os, sys, views
import tornado.httpserver, tornado.ioloop, tornado.web, tornado.autoreload
from tornado.options import define, options
define('port', default=8000, help='run on the given port', type=int)

def main():
    tornado.options.parse_command_line()
    app = views.App()
    server = tornado.httpserver.HTTPServer(app)
    server.listen(options.port)
     
    tornado.autoreload.start()
    for dir, _, files in os.walk('templates'):
        [tornado.autoreload.watch(dir + '/' + f) for f in files if not f.startswith('.')]
    tornado.ioloop.IOLoop.instance().start()

if __name__ == '__main__':
    main()

view.py
# -*- coding: utf-8 -*-
#!/usr/bin/env python3.4
import models, os
import tornado.httpserver, tornado.ioloop, tornado.web


class App(tornado.web.Application):
    # Application init settings
    def __init__(self):
    handlers = [
        (r'/', MainHandler),
    ]
    settings = {
        'template_path': os.path.join(os.path.dirname(__file__), 'templates'),
        'static_path': os.path.join(os.path.dirname(__file__), 'static'),
        'cookie_secret':
        'GKPu279PjY28Kkb2z3TA6N3ue497Z3haiQHzT4ti6JWrq5ds8H2GP6qT85ZR77MU',
        '/login': True,
        'xsrf_cookies': True,
        'debug': True
    }
    self.db = models.dbConnection()
    tornado.web.Application.__init__(self, handlers, **settings)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('index.html')

models.py
# -*- coding: utf-8 -*-
#!/usr/bin/env python3.4

from pymongo import MongoClient

settings = {
    'host': '資料庫位置',# Database's host.
    'port': '資料庫的Port', # Database's port.
   
}

def dbConnection():
    # 資料庫連線
    db = MongoClient(**settings)['自行設定你的資料庫']
    return db

index.html
跟上篇我自己的宣告












2014年9月8日 星期一

宣告用!我自己自用是否參考隨你~

<!doctype html>
<html lang=zh-hant>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width, initial-scale=1.0">
  <title></title>

  <!-- jQuery -->
  <script src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>
  <!-- jQuery UI -->
  <link href=//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css  rel=stylesheet>
  <!-- jQuery Mobile -->
  <link href=//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css rel=stylesheet>
  <!-- Bootstrap -->
  <link href=//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css rel=stylesheet>
</head>
<body>


  <script src=//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js></script>
  <script src=//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js></script>
  <script src=//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js></script>
</body>
</html>

2014年6月6日 星期五

jQuery 隨手寫!


jQuery 的線上庫可以選擇 jQuery官方網站  或者 Google Hosted Libraries

引用方法
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>


撰寫方法
$(document).ready(
function(){
<!-- 程式碼撰寫區 -->
});

等於

$(function(){
<!-- 程式碼撰寫區 -->
});

2014年2月5日 星期三

HTML5 學習筆記

HTML5 學習筆記




P.S. HTML5現在可以不用使用雙引號(單引號)來宣告。像是像是link後面的href=可以直接連接CSS檔案的路徑(看你要用絕對路徑還是相對路徑。),而不用<link href='XXX.css'>
※不過如果像是HTML元素內的class、id等等,像是如此class="nav navbar",你必須要用雙引號(單引號)來告訴瀏覽器知道這是class的宣告。

HTML5 宣告

<!DOCTYPE html>
<html lang=zh-tw>
<head>
  <meta charset=utf-8>
  <title>你的網站標題</title>
  <meta name=keywords content=網站的關鍵字,可以用〝,〞來寫多個關鍵字。>
  <meta name=description content=你網站的描述。>
  <meta name=author content=您的名字或者暱稱。>
  <meta name=copyright content=你的版權宣告。>
  <link rel=stylesheet href=你的CSS檔案的路徑>
  <script src=你的JS檔案的路徑 ※建議主要的JS函式庫。></script>
</head>
<body>
/******************************************************
 *                HTML元素放置區域。
 ******************************************************/
<script src=你的JS檔案的路徑 ※建議子網頁的JS設定></script>
</body>
</html>

頁面元素

header 元素

header表示頁面中一個內容區塊或者整個頁面的標題。

HTML5
<header></header>

HTML4
<div id="header"></div>

nav元素

nav表示頁面中導覽連結的部分。
HTML5
<nav></nav>
HTML4
<div id=nav></div>

article元素

article表示頁面中的一塊與上下文不相關的獨立內容
HTML5
<article></article>

HTML4
<div id="article"></div>

section元素

section表示頁面中的內容區塊。
HTML5
<section></section>
HTML4
<div id="section"></div>

aside元素

aside表示aside元素的內容之外與article元素的內容相關的輔助資訊。
HTML5
<aside></aside>
HTML4
<div id="aside"></div>

footer元素

footer表示整個頁面或頁面中一個內容區塊的註腳。
HTML5
<footer></footer>
HTML4
<div id=footer></div>

hgroup元素

hgroup用於對整個頁面或頁面中一個內容區塊的標題進行組合。
HTML5
<hgroup></hgroup>

HTML4
<div id="hgroup"></div>

figure元素

figure表示一段獨立的流內容
HTML5




2013年10月1日 星期二

Google App Engine的PHP使用申請加上安裝!!!

本網頁適用於想要在GAE上面開發PHP網頁的開發者觀賞


1.先到AppEngine SDK下載的網站,並點擊使用PHP申請

2.進到連結裡並且按註冊      P.S.要先登入Google 帳號

3.申請成功頁面

4.取得PHP的SDK

5. 選擇您使用的作業系統,像小弟我就是用Windows就選擇Windows。


6.告訴您的作業系統上必須安裝的軟體  
                          P. S.只要安裝最新版本的1.8.5(SDK for Python),就可以了

7.這是在Linux下開發必要的檔案



後記:做到最後,只要已經把PHP使用權申請過後,以後就只要下載SDK for Python的版本就好了。


2013年9月29日 星期日

Google App Engine + Twitter bootstrap 教學(在eclipse中開發)!

在進行下述步驟之前,請先確認您的eclipse與Google appengine的專案已經開啟。

1. 請下載Bootstrap


2.在Appengine專案中建立一個bootstrap資料夾,把剛剛下載的檔案解壓縮至bootstrap資料夾


3. 在eclipse裡新增一個html檔案


4. 在新增的html檔案中宣告bootstrap連結


最後要怎麼設定與編排就靠你們自己了,掰掰

好心的維尼就在給你一個中文的bootstrap網站吧!















2013年5月22日 星期三

PHP Oracle 10g 連接資料庫教學

來教教PHP Oracle10連線的教學,如果有幫助到您,我是很開心,因為我曾經因為他整夜沒睡。

先去網路上搜尋,AppServ把它裝起來。


把MySQL與phpAdmin選項移掉。


設定你的網址


解壓縮你下載好的instantclient_10_2,解壓縮到你要的路徑,幫他設定Path之後從重新開機。

進去到Windows目錄下的php.ini,裡面用Ctrl+f找下面幾個資料把它前面的;刪除。
extension=php_oracle.dll
extension=php_oci8.dll
extension=php_pdo_oci.dll
extension=php_pdo_oci8.dll






再來到www下面,建立一個db_conn.php程式碼如下。


<?php
    $dbconn=OCILogon("帳號", "密碼", "(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=163.17.9.68)(PORT=1521))(CONNECT_DATA=(SID=db)))");
    if($dbconn!=false)//判斷是否連結成功
         echo “連結成功!";
    else
         echo “連結失敗!";
//以上為PHP連線判斷

//以下為撈資料庫內的指令
    $sql = "SELECT * FROM 會員";
    $oci_rs = oci_parse($dbconn,$sql);
    oci_execute($oci_rs,OCI_DEFAULT);
    $rows= OCIFetchstatement($oci_rs,$results);
    $keys=array_keys($results);
    $table = '<table border="1">';
    foreach($keys as $key)
   {
       $table .= " <TH>$key</TH>\n";
    }
    $table .= " </TR>\n";
    for($i=0;$i<$rows;$i++)
   {
       $table .= "<TR>";
       foreach($results as $spalte)
       {
           $data = $spalte[$i];
           $table .= " <TD>$data</TD>";
       }
       $table .=" </TR>";
   }
   echo $table;
?>


參考此篇網址:http://dream-hua.net/wordpress/?p=1325