2016年12月31日 星期六

JAVA-如何用JDBC存取資料庫(MySQL)

想必大家建立好資料庫後
一定存放大量資料等待存取管理吧
此篇是以基本的方法來教大家如何用 Java 來存取 DB 資料

首先要先來了解的是 : JDBC
如果看不懂以上連結的解釋
最簡單的敘述 : Java - JDBC( 之間溝通 ) - SQL ( DB )

我們要先了解您要是要連哪一種資料庫別
畢竟資料庫有很多廠商
我們這裡以 :MySQL 為範例

準備步驟 :
1 . 所以我們要來這下載 Jar  : The official JDBC driver for MySQL
2 . 確認 IP 位置以及資料庫名稱
3 . 確認連線權限以及帳號密碼
4 . 連線後要做的事情

package com.brian.test;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class JDBCTest {

    // 資料庫別
    private static final String driver = "com.mysql.jdbc.Driver";
    // 連線資訊
    private static final String url = "jdbc:mysql://localhost:3306/";
    // DataBase
    private static final String DBName = "store";
    // 使用者帳號
    private static final String user = "root";
    // 使用者密碼
    private static final String password = "password";
    
    public static void main(String[] args) {
        Connection connection = null;
        try {
            Class.forName(driver);

            String DBUrl = url + DBName;
            connection = DriverManager.getConnection(DBUrl, user, password);
            System.out.println("成功連線至DB");

            Statement statement = connection.createStatement();
            String sql = "Select * From proudct";
            ResultSet resultSet = statement.getResultSet();
            while (resultSet.next()) {
                // Table 欄位名稱(產品編號)
                System.out.println(resultSet.getString("NO"));
            }
            
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}


參考資料 : JAVA基础 之 Statement
參考資料 : 解决mysql“Access denied for user 'root'@'IP地址'
歡迎轉載,請註明出處.

2016年12月17日 星期六

JAVA-Servlet 常用的方法

此篇整理較常用到的方法
Request常用方法


客戶端連線資訊
編號Method說明
1getRequestURL客戶端發出請求完整的 URL
2getRequestURI客戶端發出請求的資源路徑
3getQueryString客戶端發出的參數資源
4getMethod客戶端請求的方式
5getRemoteAddr
6getRemoteHost
7getRemotePort
8getLocalAddr
9getLocalName


客戶端請求的開頭
編號Method說明
1getHead取得開頭特定參數
2getHeaders取得開頭所有參數
3getHeaderNames取得所有開頭名稱


客戶端請求的參數
編號Method說明
1getParameter取得特定名稱參數
2getParameterValues取得特定名稱參數( 複選表單/框)
3getParameterNames
4getParameterMap

參考資料 : HttpServletRequest、request常用方法

2016年12月8日 星期四

Android-Parcelable 的包裝

想必大家對 Serializable 不陌生吧

如果大家對以上的有一定的概念
那麼 Parcelable 就是 Android 專用的序列化協定
-------------------------------
Parcelable
public interface Parcelable

android.os.Parcelable
.
.
.
---------------------------------

最棒的是 Intent 也支援他

1 .實作介面 Parcelable
public class ItemBean implements Parcelable {
    .
    .
    .
}

2 .並且宣告對應的方法
@Override
public int describeContents() {
    return 0;
}

@Override
public void writeToParcel(Parcel parcel, int i) {
    // Parcel : 將指定的資料寫入包內( 您宣告的參數 )
}

3 . 最後 Parcelable 必須使用 Creator,把上述的參數再次裝填
public static final Parcelable.Creator<ItemBean> CREATOR = new Creator(){

    @Override
    public Object[] newArray(int size) {
        // Object 更改成您的 Class Name,並且將數量放置在生成的陣列數
        return new Object[size];
    }

    @Override
    public Object createFromParcel(Parcel parcel) {
        // Object 更改成您的 Class Name,Return 放置資料完成後的 Class
        // 將剛剛 writeToParcel 的內容包裝存放
        return null;
    }
};

4 . 範例 : 比如我們建立一個物品的 Bean
可能有物品名稱、物品重量..等
public class ItemBean implements Parcelable {

    private String strItemName;
    private int intItemWeight;

    @Override
    public int describeContents() {
        // 尚未很了解此用途,
        return 0;
    }

    @Override
    public void writeToParcel(Parcel parcel, int i) {
        // Parcel : 將指定的資料寫入包內( 您宣告的參數 )
        // 請依照順序擺放,不然無法對應到
        parcel.writeString(strItemName); // String 型別
        parcel.writeInt(intItemWeight); // int 型別
    }

    /**  Creator  **/
    public static final Parcelable.Creator<ItemBean> CREATOR = new Creator(){

        @Override
        public ItemBean[] newArray(int size) {
            // Object 更改成您的 Class Name,並且將數量放置在生成的陣列數
            return new ItemBean[size];
        }

        @Override
        public ItemBean createFromParcel(Parcel parcel) {
            // 請依照順序擺放,不然無法對應到
            ItemBean itemBean = new ItemBean();
            itemBean.setStrItemName(parcel.readString());
            itemBean.setIntItemWeight(parcel.readInt());
            return itemBean;
        }
    };
    
    /**  Get & Set  **/
    public String getStrItemName() {
        return strItemName;
    }

    public void setStrItemName(String strItemName) {
        this.strItemName = strItemName;
    }

    public int getIntItemWeight() {
        return intItemWeight;
    }

    public void setIntItemWeight(int intItemWeight) {
        this.intItemWeight = intItemWeight;
    }
}

6 .Intent 用法
A 頁面
Intent intent = new Intent(getActivity(), AppleActivity.class);
intent.putExtra("ItemInfo", itemBean);
startActivity(intent);

B 頁面
Intent i = getIntent();
ItemBean itemBean = (ItemBean) i.getParcelableExtra("ItemInfo");
if(itemBean != null) {
    .
    .
    .
}


參考資料 : Android_Parcelable

2016年12月4日 星期日

Android-GoogleMap 地圖開發

此篇為簡略流程,可以先參考,尚未整理。

想必隨著應用程式的多元
越來越多創新的應用程式也在 GoogleMap 添加新的色彩
例如 : 寶可夢 !!!

 這篇就教大家如何在專案內添加 GoogleMap
 並且能夠執行
首先在我們專案 Gradle 添加 Google Service
compile 'com.google.android.gms:play-services:7.0.0'

並且添加網路以及 GPS 相關權限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

再來記得去 : Google API 申請鑰匙

開啟專案底下 res -> values ->  google_maps_api.xml 新增
並且將您的 Key 放入指定位置內
以下是官方文件
<resources>
    <!--
    TODO: Before you run your application, you need a Google Maps API key.
    See this page for more information:
    https://developers.google.com/maps/documentation/android/start#get_an_android_certificate_and_the_google_maps_api_key
    Once you have your key (it starts with "AIza"), replace the "google_maps_key"
    string in this file.
    Note: This resource is used for the release build target. You likely only want to update the string
    in the debug/.../google_maps_api.xml instead if you just want to run this app.
    (This file is used for the release target that uses the release key store.)
    -->
    <!-- translatable 可以轉換任意語言 -->
    <string name="google_maps_key" translatable="false" templateMergeStrategy="preserve">
        YourApiKey
    </string>
</resources>

把版本代號以及 API Key放置對應位置
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

    .
    .
    .
    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
    <meta-data
        android:name="com.google.android.maps.v2.API_KEY"
        android:value="@string/google_maps_key" />

    .
    .
    .
</application>


建立 XML 介面
<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/map"
    tools:context=".activity.MapActivity" />

Activity 內容
package com.net.lightblue.gototaipei.activity;

import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;


public class MapActivity extends Activity 
                implements OnMapReadyCallback {

    private SupportMapFragment mapFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_map);
        mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(map);
        mapFragment.getMapAsync(this);

    }


    @Override
    public void onMapReady(GoogleMap map) {
        // Add a marker in Sydney, Australia, and move the camera.mera.
        LatLng sydney = new LatLng(-34, 151);
        map.addMarker(new MarkerOptions().position(sydney).title("Hello"));
        map.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }

}

參考資料 : Maps Android API 
參考資料 : GoogleMap 相機檢視
歡迎轉載,請註明出處。

2016年11月26日 星期六

Android-Open Data 彙整

此篇是收集各公家機關或公開的資訊存取連結
如有侵犯到,請務必留言告知,非常感謝您。

台北市政府
/ 休閒旅遊 /
  1. 臺北市藍色公路碼頭
  2. 臺北市101個觀光亮點資料
  3. 臺北市運動中心
  4. 臺北市河濱輕食區
  5. 臺北市河濱自行車道景點
  6. 臺北市六大自行車道
歡迎轉載,請註明出處。

2016年11月23日 星期三

2016年11月22日 星期二

Python-將資料送至 FireBase

隨著物聯裝置多樣性
儲存的資料也越來越多
相對的我們要在資料儲存要更方便才行
像是 ThingSpeak 是最常見的
這篇則是用 Google 提供的 FireBase

參考資料 : 透過 Python 傳送溫溼度資訊到 Google Firebase

2016年11月13日 星期日

Android-FireBase Realtime Database_新

如要用此功能
請將 FireBase 的前置作業 完成

此文章會介紹我們比較常用到的方法以及儲存方式
因為網路上教學文也經非常多
所以流程就用文字帶過

1 . google-services
build.gradle {
  classpath 'com.google.gms:google-services:3.0.0'
}

2 . firebase core
app -> build.gradle
 apply plugin: 'com.google.gms.google-services'
 .
 .
 .
 build.gradle{
    .
    .
    .
     compile 'com.google.firebase:firebase-core:9.2.0'
 }

3 . firebase database
app -> build.gradle
build.gradle{
    .
    .
    .
    compile 'com.google.firebase:firebase-database:9.2.0'
}

4 . 使用讀取資料,編寫資料
package com.bluecom.soprt.tool;

import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

public class FireBaseDataBaseTool {

    /**
     * 讀取資料
     * @param columnName
     * @param valueEventListener 持續監聽
     */
    public static void RetrieveDateValueEvent(String columnName, 
                                                ValueEventListener valueEventListener) {
        if(columnName != null) {
            FirebaseDatabase mFireBaseDatabase = FirebaseDatabase.getInstance();
            DatabaseReference databaseReference = mFireBaseDatabase.getReference(columnName);
            databaseReference.addValueEventListener(valueEventListener);
        }

    }

    /**
     * 讀取資料
     * @param columnName
     * @param valueEventListener 單次監聽
     */
    public static void RetrieveDateSingleValueEvent(String columnName, 
                                                        ValueEventListener valueEventListener) {
        if(columnName != null) {
            FirebaseDatabase mFireBaseDatabase = FirebaseDatabase.getInstance();
            DatabaseReference databaseReference = mFireBaseDatabase.getReference(columnName);
            databaseReference.addListenerForSingleValueEvent(valueEventListener);
        }

    }

    /**
     * 儲存資料
     * @param columnName
     * @param key
     * @param value
     * @param valueEventListener 連續監聽
     */
    public static void SaveDate(String columnName, String key,  String value, 
                                    ValueEventListener valueEventListener) {
        if(columnName != null && key != null) {
            FirebaseDatabase mFireBaseDatabase = FirebaseDatabase.getInstance();
            DatabaseReference databaseReference = mFireBaseDatabase.getReference(columnName);
            databaseReference.child(key).setValue(value);
            databaseReference.addValueEventListener(valueEventListener);
        }
    }

    /**
     * 儲存資料
     * @param key
     * @param columnName
     * @param value
     * @param valueEventListener 連續監聽
     */
    public static void SaveDateSingleValueEvent(String columnName, String key,  String value, 
                                                    ValueEventListener valueEventListener) {
        if(columnName != null && key != null) {
            FirebaseDatabase mFireBaseDatabase = FirebaseDatabase.getInstance();
            DatabaseReference databaseReference = mFireBaseDatabase.getReference(columnName);
            databaseReference.child(key).setValue(value);
            databaseReference.addListenerForSingleValueEvent(valueEventListener);
        }
    }

}

5 . 介紹 FireBase 儲存的格式
FireBase 是以 JSONTree 儲存
和我們常見的 DB 儲存方法是不太相同
採用重點式儲存
 Key 加上 Value
可以參考官方範例 : Structure Your Database

6 . 上方程式碼常用到的置入參數
{
  "Members" : {
    "Allen" : {
      "NO" : "002",
      "Phone" : "02-22226666",
      "Sex" : "男"
    },
    "Tina" : {
      "NO" : "003",
      "Phone" : "02-22226666",
      "Sex" : "女"
    }
  }
}


Reference : 如果要取所有會員資料,那在輸入參數內輸入 : Members
                    如果要取 Tina 會員資料,那在輸入參數內輸入 : Members/Tina
Key :  有點像是 Java Map 感覺,如果要取 Allen 的編號,Key 輸入 : NO
Value : 同上

7 . 重點 !!!
為什麼要有持續監聽和單次監聽
addValueEventListener :持續監聽
持續監聽是資料只要有變化,就會有改變的狀態。

addListenerForSingleValueEvent  : 單次監聽
單次監聽是,我這次儲存完資料後立即取得到回饋
並且結束工作。

2016年10月31日 星期一

Website-FireBase 的前置作業

Google 的 FireBase 不僅提供行動裝置的服務
也提供在網頁端的服務
讓我們在開發上又省了許多麻煩事

這篇帶來的是如何在網頁上添加 FireBase基本參數
1 . 切換到專案管理













2 . 新增項目為 ?













3 . 生成對應參數,並且將參數複製













將剛剛複製出來的參數寫入程式碼內
<!DOCTYPE HTML>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<html> 
  <script>
    // Initialize Firebase
    // 請自行更改下方的參數
    var config = {
      apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
      authDomain: "bbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
      databaseURL: "ccccccccccccccccccccccccccccc",
      storageBucket: "dddddddddddddddddddddddd",
      messagingSenderId: "eeeeeeeeeeeeeeeeeeee"
    };
    firebase.initializeApp(config);
    
  </script>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>標題</title>
  </head>
  <body>
    Hello World
    
  </body>
</html>

參考資料 : Add Firebase to your JavaScript Project
歡迎轉載,請註明出處。

2016年10月16日 星期日

Website-搜尋引擎排名 ( SEO )

我們不是只是做網頁嗎 ?
為什麼要提到 SEO ?

或許只是單純做自己的網頁沒有甚麼 " 曝光 " 需求
但是就已公司行號來說
那就天差地別囉

如果使用者要找到您、了解公司的產品 ...等
如果再搜尋完後出現在第一項
大家一定會馬上點開 ( 心想 : 這一定是我想要的 )
反之,如果出現的結果是在很後面
我想使用者點擊的意願就會降得很低吧
然後就石沉大海( 撲通 ~ )















SEO 簡單來說就是曝光度
SEO 執行的越好,大家越容易找到你
反之,越差的話,連一根毛都找不到

這裡舉幾點能夠增加的做法
1 . 網頁內容有對應的關鍵字
2 . 網頁標題( <title>鳴黎<title> )
3 . 網頁宣告的語言( UTF-8、Big5 )
4 . 利用原生的元件包覆在標籤內
5 . 網域名稱是否有關連
6 . 網頁專案下的檔名是否有關鍵字
7 . 被搜尋引擎的原生元件( Google 廣告、Google 瀏覽人數 )
8 . 網頁內添加多個關鍵字 ( 賣 : 香蕉,添加 : 水果、金黃色、一串...等 )

有網友提出一些想法 :
1 . 我直接加一堆不相干的關鍵字就好的呀,大家都找的到我 !
Ans : 其實搜尋引擎也不會這麼傻,只要你的網頁不相干,品質分數會降低,然後消失。

2 . 有 SEO 相關公司說他們的一定會排在前 10 名 !
Ans : 痾,這是有一點點機會的,至於為什麼你聽聽就好。

參考資料 : SEO是搜尋引擎優化,不是關鍵字排名,別被排名保證第一的話術給騙了
參考資料 : [SEO必看] Google 官方免費《搜尋引擎最佳化初學者指南》電子書-香腸炒魷魚
參考資料 : 網站評測工具

歡迎轉載,請註明出處。

2016年10月14日 星期五

Website-如何在網路上找到我的網頁?

前幾篇在介紹如何架設個人網站
但是現在網站架設完畢後
似乎有一個問題存在
別人要如何找到我 ?
輸入網址 ?
輸入 IP ?
越想越奇怪

阿蛤~! 去 Google 輸入關鍵字
因該就會出現我的個人網站了吧

事實上並非如此
首先您必須先在搜尋引擎註冊
然後完成供應商需要的認證

Google : Google Search Console

Yaoo : Yahoo Submit Your Site


歡迎轉載,請注明出處。

2016年10月8日 星期六

Website-如何架設自己的網站( 導覽 )

前面發布一系列的教學後
就來整理接下來的架設流程與思路
如果有錯誤的地方
請務必提出
歡迎指教

首先
我們先看以下的流程圖
是不是您所想要的
我們依照你們的需求貼上路徑












2 . 自己架設網頁 ?
我承認再架設過程中常常挫敗
但也讓我得到不少經驗
也整理出最佳步驟
1 ) 新增 / 編寫網頁 index.html
<!DOCTYPE html>
<html>
    <title>Hello Html</title>
    <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

    </body>
</html> 

2 ) 執行伺服器
最主要是啟動伺服器的服務
Window : 執行 Tomcat
Linux : RaspberryPi-安裝 / 架設 Apache Server ( Linux )

3 ) 查詢主機 IP 位置
Window :  ipconfig
Linux : 命令提示字元 ifconfig

4 ) 確認小烏龜 ( 數據機 ) 有無固定 IP
Website-註冊專屬自己的固定 IP

5 ) 設定小烏龜 Port 口












( 以下圖示為分享器的設定參考 )


















6 ) 申請網域名稱
如何購買網域名稱 ( Domians )_( 一 )?

7 ) 設定 DNS













3 . 自己網域,其他官方提供?
當然沒問題,但是基本上還是要收費的
費用大多為 : 伺服器

如果選擇付款
通常對方會請您依照設定
將 IP 位址和協定填寫在您的 DNS
以便於轉址到官方主機




4 . 官方全包 ?
當然也有,但是天下沒有白吃的午餐
以下的事件都有可能發生 :
你的網域是在廠商的底下
你的網頁被植入廣告
你的網頁無法客製化














結論
這幾種方法都有他的優劣之處
希望此篇有解決到各位大大的問題

參考資料 : http://www.slideshare.net/twtamio/ipwf2412

歡迎轉載,請註明出處。

Website-如何購買網域名稱 ( Domians )_( 二 )?






註冊網域廠商幾十家
我要如何篩選
1 . 公司規模
2 . 服務對象
3 . 不是便宜就好

我要選國內還是國外 ? 如 : GoDaddy
如果您是第一次註冊
建議國內為主
最主要是控制介面都為中文
尋找服務人員也較容易

我要註冊哪一種網域?
這最主要看您的需求
如果單純想台灣的區塊
那就 XXX.tw
注意 : 註冊過後,你就擁有權限別人不可再註冊

這次我們用 : PChome 買網址為範例

1 . 輸入您要的網域名稱













2 . 選擇方案( 如果是初次使用,建議先試用一年 )
























































Website-如何購買網域名稱 ( Domians )_( 一 )?

如我們標題所介紹的
我們為什麼要買網域名稱?
如何購買?
買了之後誰管理?

我相信很多人跟我有一樣的問題
然後找了很多的網站
卻還找不到原因

我這裡就一步一步帶領大家
為啥要買網域?
我想請問一個問題
A : 請問您家大概的位置 ?
B : GPS : 25.0473085,121.5174124 <--- IP 位置
( 想必 A 一定很想翻你白眼吧 )
如果這時 B 回答
B : <--- 網域名稱













Website-註冊專屬自己的固定 IP

前幾篇我們有介紹 : 如何注冊網域

接下來
這篇是要教您如何申請固定 IP
也就是說
讓別人知道您的正確位置( 如何找到您 )
為甚麼要設定
我原來不是就有 IP ,為什麼還要再申請?
如果沒有特別設定
那就是浮動 IP ( 簡單的說,可能會隨著主機開關機...等被變更 )
別人是無法找到您

目前有兩種方法 :
1 . 直接跟電信商( 中華電信 )申請
2 . 購買虛擬主機然後取得到對應 參數 ( 尚未完成 )

首先介紹直接跟電信商申請
1 . 服務聯結














2 . 向下拖曳,並且確認合約內容。

















3 . 輸入資料,並且將電子郵件完成確認設定
再次登入將會取得一組 固定 IP













4 . 記得更改數據機連線帳號













參考資料 : 教你如何慎選選擇主機商,小心主機商權限比天還高!

2016年10月5日 星期三

RaspberryPi-安裝 / 架設 FTP ( Linux )

有了 FTP
我們在檔案傳輸方便了不少

這節就來介紹如何簡易的在 Linux 架設 FTP

思考路線 :
1 . 首先在主機內安裝 vsftpd
2 . 更改 ftp 設定
3 . 新增並建立對應檔案位置
3 . 建立帳號與密碼
3 . 重新啟動 ftp
3 . 在 Window 端下載 : FileZilla 並且輸入對應參數

1 . 安裝 FTP
sudo apt-get install vdftpd
並且確認線上下載

2 . 開啟設定文件
通常設定檔案沒特別設定,都會在 etc 底下
cd /etc
sudo nano vsftpd.conf

3 . 更改設定
1) ( 因為簡化安裝,所以暫時性關閉 )
anonymous_enable=YES

2 )
local_enable=YES

3 )
write_enable=YES

4)
chroot_local_user=YES

4 . 重新啟動 FTP
sudo service vsftpd restart 
--------------------------------------------------------
註冊會員
1 . 註冊帳號
sudo useradd peter // 取名一位叫 : Peter 的使用者
2 . 設定密碼
sudo passwd peter // 設定此使用者的密碼
3 . 帳號對應檔案路徑
sudo usermod -d /var/www peter // peter 專屬路徑存取
4 .可使用者可以藉由 : FileZilla存取













歡迎轉載,請註明出處。

2016年10月1日 星期六

RaspberryPi-安裝 / 架設 Apache Server ( Linux )

我們在架設網站時候
不可或缺的就是 :
1 . 網路位址
2 . 網頁
3 . 伺服器

這一篇主要是如何在 Raspberry ( Linux ) 架設 Server
思考路線 :
1 . 首先在主機內安裝 Apache
2 . 開啟 Server
3 . 確認 Server 是否被啟動以及 IP 位置
4 . 在瀏覽器輸入 : localhost 確認有網頁是否有顯示

1 . 更新系統資訊
sudo apt-get update

2. 安裝 Apache 2 至主機
sudo apt-get install apache2

3 . 可以藉由以下指令控制 Server
sudo /etc/init.d/apache2 start
sudo /etc/init.d/apache2 stop
sudo /etc/init.d/apache2 restart

4 .將專案 / 網頁放置在 /var/www/html 底下


參考資料 : How to install and run Apache web server in Ubuntu Linux

2016年9月27日 星期二

Android-AndroidStudio 2.2 新增功能( 連結彙整 )

終於到的 AndroidStudio 2.2 正式版本的發佈
更新重點 :
1 . 新版 Layout 版面設計
2 . 編譯速度加快( 這很有感 !!! )
3 . 測試個案錄製
其實還有一些還沒寫出來
以下連結可以參考

參考資料 : Android Studio 2.2 来啦 
參考資料 : 新版Android Studio 2.2的新功能真佛心

2016年9月19日 星期一

Website-使用 WordPress 自己架專屬的網站_註冊

您是否有跟我一樣

有想要架設自己的網站
但不知道該如何下手 ?

我有想法但是版面不會設計

我想 WordPress 會是您最好的選擇

但是 !!!
你要知道你做這網站的目的 !
你要知道你做這網站的目的 !
你要知道你做這網站的目的 !

首先依照步驟來註冊帳號吧














此選項會影響提供版面的風格( 後續還是可更改 )








































可以掛載 WordPress 底下
或者自行提供 ( 需升級,如下圖 )

























註冊成功














控制台














參考資料 : 從零到有教你架出一個網站:架網站真的很簡單!

2016年8月5日 星期五

Css-基本認知( 四 )_佈局方法

我們在上一篇有介紹 : 基本樣式

接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去 Div 的位置與大小
如下圖 :

















什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行

在網頁中,我們有幾種佈局的方法 ;

  • 流動模型 ( Flow )
  • 浮動模型 ( Float )
  • 層次模型 ( Layout )

浮動模型

剛剛有提到 Div 是直接佔用一整行
那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )
( * 如果有兩個以上的塊狀,要被調整的前一個塊狀要設定 )
例如上圖 : Div_2 要靠 Div_1 右邊,所以要對 Div_1 設置

用法說明備註
float:left;調整 Div 區塊對應位置left ( 靠左 )、right ( 靠右 )















層次模型

模型層用法說明
絕對位置position:absolute;模塊移動到對應的座標位置
相對位置position:relative;模塊移動到對應的座標位置
但實際是占用到原本的空間
固定位置position:fixed;模塊移動到對應的座標位置
不隨網頁的滾動產生移動

<!DOCTYPE html>
<html>
<style>
#box1{
    width:150px;
    height:150px;
    border:2px red solid;
    position:absolute; // 可更改參數看這三種的差異
    left:50px;
    top:50px;
}
</style>
<body>
    <div id="box1"></div>
    <div>Hello world !!!</div> 
</body>
</html>


























歡迎轉載,請註明出處。

2016年8月4日 星期四

Css-基本認知( 三 )_基本樣式

前幾篇我們有介紹甚麼是 Css 、宣告樣式

這一篇最主要是最常用到的樣式
比如說是 : 文字、粗細、顏色...等。

List :
  • 文字
  • 邊框
  • 填充 ( Padding )
  • 邊界 ( Margin )
  • 填充和邊界的差異 ?

1 . 常用於文字系列

用法說明備註
font-family:"Microsoft Yahei";文字字體
font-size:"12px";文字大小
color:"#555";文字顏色
font-weight:bold;粗體
font-style:italic;斜體
text-decoration:underline;底線
text-decoration:line-through;刪除線
text-indent:2em;字句空兩字
line-height:2em;上下行間距
letter-spacing:20px;文字間距
text-align:center;對齊方式felt、right、center
模塊也適用

2 . 邊框系列

用法說明備註
border-width:3px;線寬
border-style:solid;邊框形狀dashed( 虛線 )、 dotted( 點線 )
solid( 實線 )
border-color:yellow;邊框顏色

一般邊框
div{
    border : 3px solid yellow;
}
等於
div{
    border-width:3px;
    border-style:solid;
    border-color:yellow;
}

特殊邊框
border-top:1px solid red; // 上方
border-right:1px solid red; // 置右
border-left:1px solid red; // 置左

3 . 填充

上右下左
div{padding:10px;}

上下 、 左右
div{padding:10px 20px;}

上右下左( 順時針 )
div{padding:20px 10px 15px 30px;}
等於
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

4 . 邊界

上右下左
div{margin:10px;}

上下 、 左右
div{margin:10px 20px;}

上右下左( 順時針 )
div{margin:20px 10px 15px 30px;}
等於
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}


5 . 填充和邊界的差異


padding 和 margin 最大的差別是 :
padding : 在邊框內
margin : 在邊框外


歡迎轉載,請註明出處。