Kris的電腦筆記: 網頁製作

顯示具有 網頁製作 標籤的文章。顯示所有文章

2010年8月16日星期一

google map api

原來把Google map放在網頁上還挺容易的!!
我的成果

不過我的目的不只是要放一個點，還要放很多點，而且要從資料庫內抓點來放!!

<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));

//設定要顯示的控制項
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addMapType(G_PHYSICAL_MAP);

//決定你 Google 地圖的中心點位置(緯度, 經度)和縮放大小以及預設的地圖模式
map.setCenter(new GLatLng(23.753611, 120.3), 8, G_HYBRID_MAP);
</script>

//已經將資料放在陣列 $loc 中
//因為資料庫的經緯度資料是度分秒的，所以要先將他們轉成二度分帶
//先用php做個迴圈讀資料，然後再用javascript將每一個點點上去
<?php
for ($i=0;$i<count($loc);$i++){
$loc[$i]['Y']=$loc[$i]['DegY']+$loc[$i]['MinY']/60+$loc[$i]['SecY']/3600;
$loc[$i]['X']=$loc[$i]['DegX']+$loc[$i]['MinX']/60+$loc[$i]['SecX']/3600;
?>

<script type="text/javascript">
//標示在 Google 地圖上的經緯度
var point<?php echo $i;?> = new GLatLng(<?php echo $loc[$i]['Y'];?>, <?php echo $loc[$i]['X'];?>);
var marker<?php echo $i;?> = new GMarker(point<?php echo $i;?>);
map.addOverlay(marker<?php echo $i;?>);

//在地圖上放置標點說明，可以放文字、連結、圖，就如同一班html的寫法
var html<?php echo $i;?> = "<?php echo $i;?>";

GEvent.addListener(marker<?php echo $i;?>, "click", function() {
marker<?php echo $i;?>.openInfoWindowHtml(html<?php echo $i;?>);
});
map.addOverlay(marker<?php echo $i;?>);

//]]>
</script>
<?php };?>

這樣就可以在同一張圖上顯示很多點了，而且還可以有內容說明喔

參考資料:
Google Map 的中文製作簡介
Google Maps API 實作範例

2010年3月4日星期四

自動完成 autocomplete

最近花了一段時間在搞這個東西。就是希望在表單的文字框輸入文字時，可以連結到資料庫尋找相關的字詞以提供使用者參考，像是在google搜尋時，輸入一個a，就會出現建議選單。

因為對寫程式做網頁還很粗淺，很多時候連要用什麼關鍵字來查詢都不確定，先是花了一段時間瞭解我要的功能叫『自動完成』，又花了一段時間搞懂該如何在網站上使用。

這是一個jQuery的套件，jQuery是JavaScript的函式庫。話說我連JavaScript都還看不懂了，一開始時壓根搞不清楚要如何使用這個別人寫好的套件...。買了兩本書來研究，終於還是被我給研究成功了。哈哈。雖然只是會用，內部的東西還是不太清楚，但能用就好了嗎是不。

我是下載這個網站的Autocomplete套件。
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
內含有的功能很多，我僅先選取最基本的部份來做。

要使用的檔案有
1.jquery.js - 在lib資料夾下。這是jQuery的基本檔，要用套件前必須先載入這個檔。
2.jquery.autocomplete.js - 自動完成的套件。包含自動完成的基本功能。
3.jquery.autocomplete.css - 為建議選單的樣式。

先載入以上檔案。


<head>...
<link href="../css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.autocomplete.js" type="text/javascript"></script>
...
</head>

在body內建立表單文字框。

<input type="text" name="ref[author]" id="author" class="author_choice" />

在文字框下加入自動完成的程式碼。

<script type="text/javascript">
$(function(){
$("#author").focus().autocomplete("authorlist.php", {
//author為文字框的id。資料來源為authorlist.php檔
//有許多參數可以設定，以下列出可能會用到的:
minChars:0,
//當輸入多少字元時出現建議選單，若設定為0，則當文字框被點選而尚未有文字輸入時，也會有建議選單出現
width: 200,
//建議選單的寬度
selectFirst: true,
//自動選取建議選單的第一個值
scrollHeight: 300,
//設定建議選單產生捲軸 (scroll: true(預設))時可以設定建議選單的高度
autoFill: true
//自動在文字框欄位中填入建議值
});
});
</script>

在預設狀態中，建議選單一次只會出現10筆，若希望出現多一點，可至 jquery.autocomplete.js 檔案中的第一段修改。

$.fn.extend({
  autocomplete: function(urlOrData, options) {
      var isUrl = typeof urlOrData == "string";
      options = $.extend({}, $.Autocompleter.defaults, {
          url: isUrl ? urlOrData : null,
          data: isUrl ? null : urlOrData,
          delay: isUrl ? $.Autocompleter.defaults.delay : 10,
          max: options && !options.scroll ? 10 : 150
      }, options);

將10改成想要的數字即可。

前面所說的設定也可以直接在 jquery.autocomplete.js 檔案中更改預設值。

我的資料是用php連結資料庫所產生。
表單會傳送給php的是 $_GET['q']，所以要以 $_GET['q'] 為查詢參數，例如:

<?php
$param=$_GET['q'];

mysql_select_db($database_PlantName, $PlantName);
$query_author = "SELECT distinct total_sp.author FROM total_sp where author like '$param%'";
?>

而最後要將每一個值一一讀出。

<?php
$author = mysql_query($query_author, $PlantName) or die(mysql_error());
$row_author = mysql_fetch_assoc($author);
$totalRows_author = mysql_num_rows($author);

do {
    echo $row_author['author']."\n";
} while ($row_author = mysql_fetch_assoc($author));
?>

建議選單的資料載入有兩種方式，一種是像我用的以php連結資料庫的方式，另一個是直接鍵入資料的方式。因為我是用資料庫產生選單的，所以只介紹這一種，另一種方式請參考: http://jsgears.com/thread-114-1-1.html

2009年12月25日星期五

php 讀取txt檔自動分行

<?php
$file = fopen("test.txt", "r");

//輸出文本中所有的行，直到文件結束為止。
while(! feof($file))
  {
  echo fgets($file). "<br />";
  }
//當讀出文件一行後，就在後面加上 <br> 讓html知道要換行
fclose($file);
?>

fopen 是開啟檔案的程式
feof 是檢測是否已到文件末尾
fgets 是讀取文字檔的程式，一次讀一行，直到 /n (分行符號)

參考資料:
PHP: 讀取檔案 fgets 和 fread 的差異
W3School: PHP feof()函數

2009年12月11日星期五

只顯示圖片的某個部份

有些時候圖片太大，只想顯示圖片的某個部份，又不想切圖的時候，可以使用這個方法。

就在圖片的前面加入css的設定值，如

<div style ="height:50px; width:50px; overflow:hidden;">
<div style = "margin: -25px 0 0 0;">
<img src=" url/img.jpg "/>
</div>
</div>

先用一層 div 區塊來固定圖片的大小，並設定超過區塊大小的圖片即影藏，再用第二區塊來控制要顯現圖片的哪一部份，然後用margin調整圖片的位置，就可以任意顯現圖片的任一部分嚕~~

圖片超連結後有邊框!!

主要是IE的顯示會有問題, 試了好久，終於找到答案了!! 為避免忘記，趕快來PO一下。

方法非常簡單，只要在img的設定內加上 border="0" 就好嚕!!

2009年8月21日星期五

讓iframe自動調整高度

找了好幾個方法，就以這個方法簡單又有效~~

首先，加入iframe的語法。

<iframe src="./source"(欲連結的網頁) name="mainframe" width="98%" 
marginwidth="0" marginheight="0" scrolling="No" 
frameborder="0" id="mainframe" margin-left="20" ></iframe>

在到欲連結的網頁裡，在head下面加入以下程式碼。

<head> 　
　　 <script>
　 　　　 function resize(){
　 　　　　 parent.document.getElementById("mainframe").height=document.body.scrollHeight; 　　　
　　　　 }
　　 </script>
</head>

並在body裡加入:

<body onload="resize();" >

這樣就可以嚕~~

還有另一個方法也不錯。只要在同一個檔案內編寫就好。在有iframe的頁面的head之下加入以下程式碼。

<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
   if (iframeid && !window.opera){
   if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
   iframeid.height = iframeid.contentDocument.body.offsetHeight;
   }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
   iframeid.height = iframeid.Document.body.scrollHeight;
   }
   }
}
}
</script>

iframe內加入onload="Javascript:SetCwinHeight()"

<iframe src="./NEWS" name="mainframe" width="98%" 
height="300" marginwidth="0" marginheight="0" 
onload="Javascript:SetCwinHeight()" 
 scrolling="No" frameborder="0" 
id="mainframe" margin-left="20" ></iframe>

因為我的iframe是包在contentRight裏，若contentRight的高度設為自動，則contentRight一開始的高度會很小，所以將contentRight 設一個 min-height:700px 就可以嚕。

2009年8月20日星期四

IETester - 讓電腦同時有IE5.5, IE6, IE7, IE8

這是一個還蠻好用的軟體，尤其是在寫網頁的時候，可以讓電腦有IE6可以做測試。

雖然還不太穩...

[下載]IETester 調整CSS的相容性，讓電腦同時有IE5.5、IE6、IE7、IE8！

2009年8月18日星期二

ie6 hack

【教學】 IE 6 專用的 CSS hack

CSS 於IE6、IE7、Firefox間的兼容hack

2009年7月27日星期一

選項按鈕群組

延續表單搜尋功能

現在我想要設定要搜尋的關鍵字是中文名或是學名。
在原本的表單下方，插入選項按鈕群組。
1. 名稱是rgkeyword。選項按鈕第一個改為中文名查詢，值為1，另一個是學名查詢，值為2。
2. 在繫結底下新增一個表單變數為rgkeyword。

換到搜尋結果的頁面裡，更改rsSP資料集(呈現結果的資料集)的資料。
1. 新增參數key2，現行階段值為 $_POST['rgkeyword']。
2. 更改SQL值。

WHERE left(Code,7) = colname OR (`Chinese name` like %key% and key2 =1) OR (`Scientific name` like %key% and key2 =2)

這樣就可以嚕~~

2009年7月24日星期五

如果...，就...

今天主要研究這個東西。

如：
1. 如果reSP資料集中的欄位volume有資料，則顯示"volume"

<?php if ($row_rsSP['volume'] > 0) { // Show if recordset not empty ?>
volume
<?php } // Show if recordset not empty ?>

2. 如果reSP資料集中的欄位Endemin的值為"Yes"，則顯示"Endemic"

<p><?php if ($row_rsSP['Endemic'] == "Yes") { // Show if recordset not empty ?>
   Endemic
<?php } // Show if recordset not empty ?></p>

其實很簡單的，只是花了一點時間才搞懂。原本以為可能得去認真學PHP，沒想到，哈，就被我試出來了。(得意~~)

因為有一個欄位的組合就得要寫很多這種判斷式阿。希望真能成功完成。

----

今天已經跟老師說好我要來弄這個網站的事了。加油。

表單搜尋功能

每日都要有新進度，趁著還在熱頭上，就多寫一些。

今天練習的是做一個搜尋框來搜尋關鍵字。

首先，先做一個有搜尋框的頁面。
1. 插入 > 表單 > 表單。表單屬性中的動作為查詢後要出現的頁面。方法為POST。
2. 在表單裏加一個文字框。文字框的ID訂為search。
3. 再加一個按鈕，ID為enter，值為送出，動作為送出表單。
4. 點選search文字框，在行為的+處點選檢驗表單，勾選值必要。
5. 在繫結處點+，選擇表單變數，填入search。

這次要搜尋的是物種名稱，依昨天做的genus.php的方法建立一個新的species.php頁面。
資料集是rsSP。

1. 點選資料集，再變數的地方新增一個變數，依圖所示輸入。執行階段值就是他要接收的值，為由POST傳回來的search，就是剛剛在搜尋頁面設的表單變數。然後再SQL指令裡的where後面多加入OR `chinese name` like %key%這句。因為這個頁面是連接昨天做的genus.php頁面，所以where的第一句是和genus.php頁面連接的。加入這句的目的是要告訴資料庫，如果"chinese name"欄位包含key變數的值的話就要呈現。請注意，因為chinese name這個欄位名有兩個字，所以要用``包起來，若是只有一個字就不用。是`，esc鍵下面，有~的那個鍵，而不是單引號。%是許多字元的意思，類似*的功能。

這樣就可以搜尋了!!

之後可以加一點進階的功能。

2. 在繫結處點+，選擇表單變數，填入search。
3. 在原本的ul外另設兩個段落或ul，其中一個打上"搜尋的是:"，然後把繫結處產生的Form > search拉到:的後面。
4. 另一個打上"找不到啦"。
5. 點選原本的ul，在伺服器行為處點選+ > 顯示區域 > 如果資料集不是空的，即顯示。
6. 點選"找不到啦"的那個ul，在伺服器行為處點選+ > 顯示區域 > 如果資料集是空的，即顯示。

以上，程式碼大約如圖。同區塊用相同顏色的線連起來。

這樣阿，就會在搜尋結果頁面上出現搜尋的字串，如果找的到就會出現資料，如果找不到就會出現"找不到啦"。

2009年7月23日星期四

原來是要設sitemap阿

之前一直很困擾，做好的網站沒有辦法讓google搜尋到。應該是說，這是一個資料庫網站，但是並沒有辦法在google裏搜尋資料庫裡的相關內容時，連結到這個網站裡。據說是因為google並沒有辦法直接搜尋資料庫裡的內容的關係。但是卻可以搜尋到其他類似的資料庫網站。所以一定有辦法可以解決這個問題才是。

今天終於讓我發現了!!原來是要做一個sitemap.xml上傳到google裏，讓她們知道可以來這裡搜尋阿~~

雖然還是搞不清楚應該要怎麼做，但總算有個頭緒了。

幾個參考文章：
Google Sitemaps 教學
【SEO】如何在BlogSpot提交Sitmap？ (Google篇)

2009年7月22日星期三

依科名檢視屬名

這篇算是今天的成果。做個筆記，以免明天就忘了...。

1. 先建立一個科名頁面 main.php
2. 在body下設一個 div class="content"
3. 匯入資料庫plantname
4. 建立資料集rsFamily (應用程式 > 繫結 > +)
SELECT *
FROM char_family_vol
WHERE Code_fam LIKE '5%' (篩選以5為開頭的，因為這些才有屬名的資料)
ORDER BY Family ASC (ASC是遞增，DESC是遞減)
5. 在 div 下設 ul 區塊，下在設li。
6. 將在資料集下的需求欄位拉入li裏。
如，畫面會變為{rsFamily.Family} ({rsFamily.ch_family} ) 括號是自己加的。
7. 設定li的css樣式表：點選下方的

，再點選css樣式右下的新增符號，新增.content li(為進階)→css的規則定義中的清單的項目符號影像→選箭頭圖樣。
8. 點選下方的

，再點選伺服器行為的 +，選重複區域，暫設為10(隨時可更改)。

到此完成第一頁。
依此法做出第二頁genus.php。
內容為{rsgenus.genus} ({rsgenus.chgenus})

再來是將兩個頁面連結。

先設定第一頁。
1. 選取{rsFamily.Family}，點下方屬性的連結欄位旁的資料夾，選取檔案為genus.php。
2. 點選下方url旁的參數。
3. 設定名稱為code_fam。
4. 點選值旁邊的閃電。
5. 選擇code_fam。

再來設定第二頁。
1. 點開資料集，如圖設定篩選器。

登登，這樣就好囉。

按F12開啟第一頁的頁面後，會出現如圖左側的科名資料，點選夾竹桃科，就會開起如圖右側的屬名資料嚕。不過搞不清楚為何左側第二頁的箭頭符號出不來就是了。

訂閱：文章 (Atom)

Kris的電腦筆記

2010年8月16日星期一

google map api

2010年3月4日星期四

自動完成 autocomplete

2009年12月25日星期五

php 讀取txt檔自動分行

2009年12月11日星期五

只顯示圖片的某個部份

圖片超連結後有邊框!!

2009年8月21日星期五

讓iframe自動調整高度

2009年8月20日星期四

IETester - 讓電腦同時有IE5.5, IE6, IE7, IE8

2009年8月18日星期二

ie6 hack

2009年7月27日星期一

選項按鈕群組

2009年7月24日星期五

如果...，就...

表單搜尋功能

2009年7月23日星期四

原來是要設sitemap阿

2009年7月22日星期三

依科名檢視屬名

初心者的練習筆記

關於網頁製作

標籤

網誌存檔

好站連結

2010年8月16日 星期一

2010年3月4日 星期四

2009年12月25日 星期五

2009年12月11日 星期五

2009年8月21日 星期五

2009年8月20日 星期四

2009年8月18日 星期二

2009年7月27日 星期一

2009年7月24日 星期五

2009年7月23日 星期四

2009年7月22日 星期三

初心者的練習筆記

關於網頁製作

標籤

網誌存檔

好站連結

2010年8月16日星期一

2010年3月4日星期四

2009年12月25日星期五

2009年12月11日星期五

2009年8月21日星期五

2009年8月20日星期四

2009年8月18日星期二

2009年7月27日星期一

2009年7月24日星期五

2009年7月23日星期四

2009年7月22日星期三