2013年2月27日 星期三

小練習:用PHP+MySQL+Ajax做模仿yahoo首頁的新聞Tab


用PHP+MySQL+Ajax做模仿yahoo首頁的新聞Tab 
Demo URL : http://yiying2.ueuo.com/news_board/
(免費空間還沒被砍之前應該都看得到)
My GitHub: https://github.com/winwu/AjaxPractive-NewsBoard_Tab.git  (有需要的話可以參考)

我今天試做了一個仿yahoo首頁(台灣版)的新聞消息Tab，我是說操作起來很像，但是實作方向有點不太一樣，因為我想要練習ajax...所以我用ajax去要資料，我後來發現yahoo好像是一開始就把資料load出來了，而我這個做法變成是會一直去做http request的請求，不是很符合前端優化的標準，我知錯了...但是我的本意只是想要知道到怎麼用ajax的到想要的資料，這只是一個練習(不要這麼嚴肅><)。


畫面上簡單來說就是，左邊欄我做了一個顯示新聞的區塊，並且依照category去分幾個Tab。
右欄是一個form，可以送一筆完整的新聞資料到database，而去觸發左邊欄位的Tab會更新最新的兩筆該category的資料。
每觸發一次Tab，就可以看到送出一筆請求。(如下圖)






並且可以看到成功要到的資料:




page speed檢查:
用page speed檢查一下，竟然還有86分，可能是資料量少吧xdd




心得與結論:
  • 滑鼠滑過tab的行為要用mouseover而不能用hover，因為hover會產生兩次request，而mouseover只會產生一次
  •  $.ajaxSetup({ cache: true });//其實這行有沒有寫都一樣，只是一個題外話，順便測試一下而已，基本上cache的值，本來就預設是true，設定false表示你不想讓瀏覽器去抓cache。
    這個畫面，是$.ajaxSetup({cache:false});時所產生的request:
    當cache是false時，送出去的request會自動產生_=[TIMESTAMP]的參數，取得最新的頁面結果。



於 沒有留言:
標籤： ,

CGI的練習之怎麼接到GET的值

小練習: 用CGI送出一個form。
接到form get出來的值，並顯示在頁面上。

其實這個練習的成功非常的詭異，首先我是把檔案放在XAMPP的cgi-bin裡面，檔名是ch01.cgi，但是用來解譯的perl是另外用activePerl裝的perl，而且cgi檔，打錯一行，後面就都不會執行。

執行頁面沒有特別的困難，就像平常在localhost一樣，只要在瀏覽器打上localhost\cgi-bin\ch01.cgi就可以成功執行，但若程式有問題，很容遇到Server Error...

ch01.cgi
 #!c:\perl64\bin\perl.exe -w  
 #上面這行表示用哪一隻程式來解譯  
 #有的書寫說，在window系統下有沒有這行都無所謂  
 #恩..不過在我的windows下，這行一定要有，如果忘記這行會顯示Server Error....  
 use CGI;  
 #use 表示使用後面的模組  
 print  "Content-type: text/html\n\n";  
 print  '<html>';  
 print  '<head>';  
 print  '<meta name="author" content="Kay Vogelgesang">';  
 print  '</head>';  
 print  "<body>This is my first CGI<br>";  
 print  "<form>  
 <input type='hidden' name='action' value='learn_perl'>  
 <input type='hidden' name='status' value='good'>  
 Please Enter your name:<input type='text' name='user'>  
 <input type='submit' value='送出'/></form>";  
 print  "<strong>以下是get的資料</strong><hr>";  
 my $query = CGI->new;  
 my %data = $query->Vars;  
 #get data use name=>value, this will "export" the form values  
  foreach my $param (keys %data) {  
    print "$param = $data{$param}"."<br>";  
  }  
 #純量變數(scalar)是$開頭 $query  
 #陣列(Array)是@開頭 ex:@myarray   
 #雜湊(Hash)是%開頭 ex:%hash  
 print  "<br>直接把\$query print出來是: <strong>" . $query ."</strong><br>";  
 print  "<br><strong>把個別的get欄位print出來</strong><hr>";  
 print  "GET的user值為". $data{'user'} ."<br>";  
 print  "GET的action的值為". $data{'action'} ."<br>";  
 print  "GET的status的值為".$data{'status'} ."<br>";  
  if ($data{'user'} ne ' '){  
   print "<h1>hello <span style='color:tan'>". $data{user} ."</span>,Welcome!</h1>";   
   #也可以這樣寫<h1>hello$data{user}</h1>,  
  }else{  
   print "<h1>please enter your name!</h1>";  
  }  
 
 print "</body></html>";

要取的這個cgi送出去的get參數值
建立一個$query的變數，將CGI->new指定給$query
將$query->Vars指定給%data這個hash(雜湊)
接著再將%data foreach出來，可得所有get的值跟value

  • Demo 畫面 (未送出input值)


  • Demo 畫面 (送出input值後)





 才學疏淺，若有錯誤還麻煩糾正我一下，謝謝。
於 沒有留言:
標籤：

2013年2月26日 星期二

在windows下執行Perl的-ActivePerl!

在windows作業系統下，我想要執行Perl
可是我本身已經有裝XAMPP在我的電腦上，其實XAMPP已經配有perl了，可是我怎麼練習都失敗，後來我在網路上爬文，發現很多人都介紹ActivePerl所以就安裝了ActivePerl了。
ActivePerl真的很猛又很好用，值得一試。

下載網址在這裡: http://www.activestate.com/activeperl



安裝步驟一如往常就是一直"下一步"，詳情我就不介紹了


因為我沒有什麼額外特別的設定，我相信大部分的使用者也是差不多跟我一樣，總之安裝完之後你會在你的C:\看到perl的目錄，(除非你安裝在其他槽)，我的目錄是在C:\Perl64\  (32位元的會看到Perl資料夾，64位元的會看到Perl64的資料夾)

安裝後檢查perl的版本
打開CMD，輸入perl -v
可以看到版本說明，作者Larry Wall等資訊。


指令 start c:\perl64\html\index.html
可以開啟ActivePerl User Guide的網頁



另外安裝過ActivePerl之後也會安裝Perl Pcakage Manager
你可以在程式集找到他。



於 沒有留言:

純手工製作圖片popup效果

自己做圖片popup的感覺挺好玩的，
雖然現在網路上有很好用的fancybox，
可是我很想知道如果自己做要怎麼做，然後我就用個超級簡略版!
有空再來把它改進成一個plugin，我也很想挑戰寫plugin，只是我想會很low而已。><

我把整個範例檔都放到我的github了
https://github.com/winwu/Handmade-image_popup
可以看到完整的html跟js檔案

功能說明:
  • 點選任何一張圖都會呈現popup效果
  • popup效果出來時，點選關閉或是頁面其他地方，也會關閉popup效果

其實想到這個popup的效果，我當初唯一想到的一件事情就是，當我按下頁面中的任何一張圖片，我要讓他有跳(彈)出來的效果，所以我想說我必須要準備一個容器(div)，當作圖片popup時的容器，(當然也有其他做法)，一開始沒有點選任何圖片時，這個容器是display:none，也就是不需要顯示他，當我按下某一張圖片時，這個容器就必須顯示出來，不但要display:block，而且有些相關的css設定，還有背景要壓灰等等，這些都透過javascript來達成。

附圖javascript部分: (截圖下來比較快)

只是個人平常的練習，看看就好:P

於 沒有留言:
標籤：

2013年2月16日 星期六

Grunt- Javascript Project的建置工具

Grunt- javascript project的建置工具
(不知道這樣翻會不會很奇怪~"~)
英文是: Grunt is a task-based command line build tool for JavaScript projects

這是我最近在網路上看到的一個工具，想說來了解一下，看看之後發現想要用這個工具其實需要一定的門檻，雖然我很想嘗試不過我好像沒這個機會...只好了解先!

上面的官方網站點進去之後發現頁面很單純，要嘛就是去參觀github,不然就是看看他們的Document， 左邊攔可以看到"Getting Started"的小標，裡面寫著你可以用npm去安裝，看到npm就讓人想到node.js javascript...，如果我的推斷沒錯的話Grunt就是以node.js去建立的，被包成一個package，經由npm(Node package manager)將它下載下來。


蒐集的教學&介紹連結:

相關影片:

(上面這部非常基礎 約4分鐘)
此影片引用自:http://www.youtube.com/watch?feature=player_embedded&v=LdqUiDyhzt8



(這片我覺得還不錯!)
此影片引用自:http://www.youtube.com/watch?feature=player_embedded&v=LoStSbRRA3I


這一部有講到Grunt的部分比較少，雖然片長很長，但是也很精采
此影片引用自:http://www.youtube.com/watch?v=vDbbz-BdyYc&list=PLg9HYGREnFM72iFbTWcRQeU44Wi2mLwLi&feature=player_embedded



此影片引用自:http://www.youtube.com/watch?feature=player_embedded&v=q3Sqljpr-Vc




20130513補充:
Grunt.js用在前端開發上 作者:vitaminx

於 沒有留言:
標籤： ,

2013年2月3日 星期日

ipad mini 32GB 開箱圖

 長話短說先來講一下感言好了 :

  1. 終於買到了 終於捨得花錢買了
  2. 很傷荷包，真的很傷.... 但是很開心，心情複雜的不知道該如何形容
  3. 然後我應該會更努力工作吧，賺的都不夠花了Orz
  4. 我買的是wifi版，我想在台北應該夠用
  5. 考慮了一個多月，沒想到還守不住阿.... 










於 2 則留言:

2013年2月1日 星期五

工作半年多心得


  • 每個人都喜歡去訂規則，但總要有人配合他人的規則。
  • 每個人的code style不一樣，所以並沒有甚麼是最好。
  • 分享。
  • 想的久不一定做的久，做得快不一定做得好。
  • 厲害的人不一定會得到尊重，重點是要先沾到厲害的邊。
  • 說要是來當前端，後半期有60%都在寫codeigniter的php，雖然說這也不錯，但有點小失望就是...，可惜的是一進來的時候網站已經被規劃完了，我所接觸到的，幾乎只有換皮跟js部份而已。
  • 如果每個人都只想挑想做的，那這個辦公室豈不是天下大亂!? 
  • 每個人都想做簡單的，那這個辦公室豈不是天下大亂!? 
  • 員工獎懲寫好玩的，那這個辦公室豈不是天下大亂!? 
  • 雖然我笨，但我不懶阿，我自己認為懶跟聰明在工作上其實是需要一定的平衡
    1. 懶，但很聰明=>safe=>因為公司需要你
    2. 不懶，但不聰明=>soso=>但要想辦法變強
    3. 又懶又不聰明=>danger，除非有隱情，不然你只是沒被發現而已
  • 每個都覺得自己最認真,最努力,貢獻最多，但那看在長官的眼裡應該是自以為是，那是因為你不是主管，所以你看不出整體的差異化，所以別傻傻地去要求甚麼，要想自己的把握什麼
  • 如果沒有事情，可以想一下能為大家做什麼，而不是在座位上玩自己的!?
  • 雖然我沒經過IE6,7,8的年代(我是說自從我開始接觸前端之後)，但是我還是討厭IE，他唯一的優點就是測試剛上線的網站沒有cache測起來還蠻準的這樣
  • 工作範軸&email發信之必殺技巧，整個部門的人都拉到cc名單就對了!
  • 可以學一點linux的指令還不錯，但我不夠靈巧，必殺技: grep -nr "XD".
  • 天吶!，原來php是這樣寫
  • 天吶!，原來javascript是這樣寫
  • 天吶!，原來網站是這樣規劃的
  • 天吶!，我來這裡半年了
  • 天吶!，我好想加薪
  • 天吶!，可不可以讓我多寫一點javascript
  • 最後....天吶!，我尾牙只有抽到500元禮券><



於 4 則留言:
標籤：
訂閱： 文章 (Atom)

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...