大家好
小弟沒有任何網頁程式設計、開發的經驗，對HTML,XML或JavaScript也完全不懂，
但近來公司有 桃園機場 航班顯示即時資訊 的需求。
1.客製化網頁、格式，同步/非同步 請求 網頁伺服器即時資料，伺服器接收並處理傳來的表單，然後產生一個新的網頁。
2. 我有下列網頁伺服器所能提供的結果，一是動態網頁，另一是文字檔(隨時更新)
http://www.taoyuan-airport.com/chinese/flight_depart
http://www.taoyuan-airport.com/uploads/flightx/a_flight_v4.txt
請問如果我要達成這樣的任務，我要從何開始? 基本觀念從那一套語言建立?
該運用何種工具書? 何種設計軟體? 來開發自有客製化表格 的網頁，數據資料來自於遠端網頁伺服器。
請程式設計的專家們提供意見，在此感激不盡，謝謝。
已邀請的邦友 {{ invite_list.length }}/5
完全不懂就搞這個...
要不要乾脆撥個預算請專業的做阿...
你這樣感覺就像...
剛出生就想飛...的概念....= =
不過...還是針對你的問題...回答..
1.完全不懂的情況下，要嘛補習，要嘛買書，線上也有很多教學，個人推薦六角學院。
2.至於買什麼書?哪間補習班?見仁見智...我個人是都以網路上找資料自學。
3.語言部分，最基本就是HTML、CSS，畫面要漂亮生動就需要CSS+javascript，後端資料有很多種..我自己是學PHP。
4.設計軟體也很多種，想要方便簡單就DreamWeaver，想要手動Key程式碼的快感，像我就是這類人，我是用Sublime。
大概就這樣囉~~
如果這專案沒有急迫性(或是只是你自己想練習用)
那去我推薦的六角學院看看吧
我上面講的東西他都有
反之..如果有急迫性...
建議..還是說服上頭撥個預算請網頁公司製作吧
先不說功能面，叫新手做這個國際型門戶的頁面，就算功能寫好了美觀會被幹死吧 ... 同為美觀苦手的我表示覺得同情
還是弄個預算找人做比較實際+1
對阿~~
像我...會寫程式歸會寫程式...
我美觀配色完全不行啊..
所以..
順便補充一下我回答沒說到的
5.可能需要使用3分努力上一點美術課程，再加上7分天份
以網頁來講...
美術部分我認為最重要的兩個就是切版(或說切圖)、配色
尤其切版!!
近年來響應式網頁很紅(甚麼是響應式網頁這邊不多談，請自行Google)
切版切不好..
響應式就可能變得不美觀、不人性化
切得好的範例
你可以搜尋響應式網頁範例或成品
隨便搜尋都有一堆~
king742171兄，不用跟他說那麼多啦。
什麼觀念都沒有要入門，還不懂虛心求教的話，比那幾篇說要學卻抓不到竅門的還糟糕。
我不相信一個商業專案可以等到他搞懂 HTML、CSS、javascript、一門後端語言、資料庫、伺服器架設 後還沒到期的。
以他列的那兩個網站，隨便一個都夠他搞個幾年的。
1.請問如果我要達成這樣的任務，我要從何開始?
A.學會一種程式語言
2.基本觀念從那一套語言建立?
A.PHP
3.該運用何種工具書?
A.PHP程式語言教學
4.何種設計軟體?
A.PHP
選我正解
PHP打天下!!!!!
(想貼熊俠的按讚貼圖..但是熊俠貼圖不見了..救命啊小財神)
1.請問如果我要達成這樣的任務，我要從何開始?
A.學會一種程式語言
2.基本觀念從那一套語言建立?
A.ASP.NET
3.該運用何種工具書?
A.ASP.NET程式語言教學
4.何種設計軟體?
A.VS
1.請問如果我要達成這樣的任務，我要從何開始?
A.學會一種程式語言
2.基本觀念從那一套語言建立?
A.python
3.該運用何種工具書?
A.python程式語言教學
4.何種設計軟體?
A.text edit
1.請問如果我要達成這樣的任務，我要從何開始?
A.學會一種程式語言
2.基本觀念從那一套語言建立?
A.ruby
3.該運用何種工具書?
A.ruby程式語言教學
4.何種設計軟體?
A.text edit
族繁不及備載
如果是單純顯示 .txt檔的航班資訊其實滿簡單的…
難得是資訊同步問題…因為這個檔案隨時會更新…
班機停飛 晚點 有的沒的…
所以如果是要拿來讓客戶訂機票的話就不建議使用…
因為垃圾進垃圾出…如果你無法保證你的輸入來源的正確性的話…你所產生的東西一樣會是垃圾。
以下為推你入坑教學連結：
https://www.webteach.tw/?p=1434
這個問題挺有興趣，
我的開發經驗不是挺豐富，
如果我遇到這個差事，
我google一下，整理一下解決的思路。
1。就網頁即時更新的部分，我可能會用setInterval，https://www.w3schools.com/howto/howto_js_countdown.asp
把航班資訊放在div裏，更新。
2。解析txt檔，這是常用的csv格式，
第一部分，是url 的txt檔接收的部分， 可參考，https://stackoverflow.com/questions/28828029/html-read-txt-file-from-url-location-in-javascript
第二部分， 對csv格式，解析，
搜尋，js csv to json，有一些現成的函式庫可用，
把每一筆記錄的每個欄位解出來。
放到table裏，比較容易。如果自己產生table，tr，td很麻煩，
可以把json 餵給 datatable這類的現成JQUERY套件(挺強的，排序，過濾、格式化都做掉)，
https://datatables.net/examples/data_sources/js_array.html
它接受的JSON格式幾乎和CSV格式一致。
3。套上bootstrap的網頁框架。
可用 https://bootswatch.com/ ，選一種佈景風格。
它有示範的網頁。https://bootswatch.com/darkly/#tables
把它的table id , 換成你的 id就好。
你可以試一下，有問題，再貼上來討論。範圍盡量小一點。你的code精簡一點，別人比較容易回答。
1的話，太頻繁大概會被ban。
最近才被 CORS (https://zh.wikipedia.org/wiki/%E8%B7%A8%E4%BE%86%E6%BA%90%E8%B3%87%E6%BA%90%E5%85%B1%E4%BA%AB) 整到。是新北消防局的soap(xml)資料交換服務。
本來用$.ajax({ ... dataType: "xml"}) , 很好解的問題，變成為了 CORS ，得另外想辦法。 因為敝公司是用java tomcat，所以我寫了servlet jax-ws soap client , SERVER端接收 soap XML response 文件，再把它送給 前端js 去解析資料。
本來是
soap -> 瀏覽器js接收->網頁。
變成
soap -> servlet接收 ->瀏覽器js接收->網頁。
剛才測了一下。
$.get( "http://www.taoyuan-airport.com/uploads/flightx/a_flight_v4.txt", function( data ) {
var text = data;
console.log(text);
});
同樣得到錯誤訊息 ，
Failed to load http://www.taoyuan-airport.com/uploads/flightx/a_flight_v4.txt: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.21' is therefore not allowed access.
桃機的航班資訊 資料交換，也有 CORS 問題。
沒法js 直接抓。
之前寫的方式，是user 按下button，才抓資料。
沒用setInterval，沒被ban過。
看看時間間隔設長一點。或是其他方式避掉，這段較沒經驗。
謝謝指教
websocket broadcast
我做了一個測試，網址在，http://lifeofmircle.com/tauAir/tau.html，
源碼放在 ，https://github.com/timloo0710/TauAirPort/。
datatable 本身也有查詢功能。全欄位檢索。
所以我就沒有另外做查詢功能了。
http://www.taoyuan-airport.com/uploads/flightx/Readme.pdf ，這裏可以查 .txt檔各欄位的定義。我也是照抄上來的。
第一 你的撰寫的語言有確定了嗎?
第二 資料結構有先設計嗎? 目前只看到你要抓的來源!!抓到後的資料處理未見到?
第三 你所要呈現的方式文字還是圖表?
第四 任何語言都可以做到你的需求,樓上很多前輩都給很多意見了.
第五 祝你成功工作達成,有任何問題請在發上來詢問唷!!
iThome鐵人賽
看影片追技術