400262161 的部落格

POST#2 資工二乙 400262161 王冠仁

  期末的尾聲將近,回顧這學期的總總課程,與開學時所想所學的是否都有達到了呢?很高興我們這組期末發表很成功,但是我依舊沒有克服上台報告的緊張感,看著隊友報告撐場面,卻不敢去聽他們說了什麼,只怕聽了之後之前彩排的部分會忘光,後面DEMO給大家看時會出什麼紕漏,我承認我還是只會實作卻不會報告自己做什麼的那種人,好擔心我的畢業專題阿!

  這堂課我學到很多Web的技術,雖然上台報告不行,但專題部分我將課堂上所學的幾乎都實做出來了,除了Ajax沒用到以外其他應該都有吧!多虧了老師、助教、學長們的建議,不厭其煩的提供我那些實作方法是可行的,知道實作方法後自己上網查資料並code出來,增進了我不少自主學習的能力。

  雖然不知道以前學長姐們的期末專題做怎麼樣,但是很高興老師說我們這一屆的專題有從谷底往上爬的感覺,就我們這組的專題來看的話,我的滿意度只有60分吧!有一些想做的功能沒有做出來,聊天室的排版也沒有花很多心力,其他地方也都還有進步的空間。

第一組 How funny^^ 期末專題

專題題目:howfunny 聊天室

組員姓名:

  資工二甲 400261179 彭柔瑄

  資工二乙 400262161 王冠仁

  資工二乙 400262422 高振傑

  資工二乙 400262721 謝旻修

動機和專題介紹:

  這個專題的動機原本是要做出像Facebook差不多的社群平台,讓大家可以把日常生活中遇到的、想分享的、想發洩的事留言在這,不過最後做出來的跟原本想的似乎不太一樣,倒像是在做及時通。

  專題中有一半以上有用到資料庫,包括了帳號密碼、聊天室的內容都是存在資料庫。首頁部份,使用者可以選擇登入或是申請帳號,登入後可以修改個人的資料,當然也可以留言,功能並不是詪多,有許多可以增加和加強的地方。

使用技術和遇到的困難:

  使用的軟體有:XAMPP(Apache2.4.3 PHP5.4.7 MySQL)

  使用的技術包括了HTML、CSS、Javascript、PHP、jQuery、Server sent events

Lab5 資工二乙 400262161 王冠仁

ˊ  這次的Lab是要做PHP和MySQL,其實PHP和搭配MySQL已經很久了,Client端透過PHP向Server端的資料庫送出query,Server端再將結果送回Client端,不過要怎麼實做呢?首先我們必須要有Apache(http Server)、PHP和MySQL,如果在windows的環境下將這三個軟體個別安裝的話,還需要做一些設定才能將這個軟體整合起來,所以我採用XAMPP,他整合了Apache、PHP和MySQL,並且附有phpmyadmin用圖形化介面去控管MySQL(一般的MySQL是要輸入指令),對於初 學者來說是非常好學習的。

  Client端透過GET或者POST將資料送給PHP,如下:

<form action="XXX.php" method="POST">

  <input type="text" name="message">

  <input type="submit">

</form>

資工二乙 400262161 王冠仁

  這次lab4的主題是HTML5,在HTML5中Support許多新功能和新tag,我們這組的期末專題中就有用到新的input類型date,可以出現日曆來幫助我們輸入,省去我們去判斷那一年是否是閏年,不過我家的IE9似乎並不Support這個tag,只能在Chrome上正常運作,在w3school中的範例也不是每個Browser都可以用。

  HTML5中我感到有興趣的tag有<video>和<audio>,可以撥放自己的影片和音樂,可惜我並沒有特別喜愛的影片和音樂,所以在lab4的DEMO中沒有出現,而是HTML5的Web Srorage的功能和Drag/drop,並且用<iframe>放了自己最近蠻喜歡的youtube影片,由於架在自己的Apache上所以不附網址囉!

Lab3 400262161 王冠仁

  隨著javascript發展越來越成熟,為了方便寫作(例如用簡短的程式碼表示一連串的動作),許多library如雨後春筍般地出現,使得明明是相同的功能,寫法卻變得五花八門,演進的過程中不實用的library會被淘汰,而實用的則會留下並加以改進,其中jQuery是最被廣泛使用的library,在幾年前會jQuery的話競爭優勢會比別人強,到了現在jQuery已經是非學不可的了。

Lab2 400262161 王冠仁

之前用Google Sites有架一個網站

所以Lab直接放在那邊Demo囉!!

之前偶然看到有人在youtube上PO自己繪畫的過程

雖然他們不是用PhotoShop而是用Paint tool SAI

但可以看出用好幾個圖層來完成完整的一張圖

比小畫家那種只有一個圖層的好用很多

你可以決定現在要畫哪個圖曾將他選取

其他圖層就不會被干擾到(小畫家常常手一偏就要回到上一步從頭來過)

這種繪圖方式更方便使用者快速地完成一張圖

所以這次Lab我採用一個圖層疊上另一個我自己畫的圖層

點此連結

我必須承認我畫畫技術真的不是很好......

對於使用新軟體還是沒有辦法很快上手呀!

 

POST#1 400262161 王冠仁 Adjust myself to adapt!!

  開學好幾個禮拜過去了,在這堂課學到許多Web相關的技術,自己也嘗試寫了一些HTML,能設計自己的網頁實在讓人很期待,卻也因為不知道該怎麼設計而煩惱,這想法真的相當矛盾呀!一開始我還像小學生一樣將txt檔改成html,聽了老師介紹了DreamWeaver後,才發現自己怎麼那麼蠢,竟然自己打HTML,DreamWeaver會自動幫你產生程式碼,只要專注在設計上就可以了。

  雖然課程很充實,卻有一種適應不良的感覺,要快速入門一套新的軟體實在不簡單,之前lab1的WireShark,和DreamWeaver以及PhotoShop,後面爾者要學會使用不難(線上都有教學),但要練到出神入化就不是短短幾個禮拜能做到的,我使用過的功能或許連1%都不到吧!他們功能強大到讓我覺得只要用到其中50%的功能就已經算出神入化了。

  另外我用GoogleSite做了一個網頁,之後的作業沒有差錯的話應該會放在那,不過好像沒辦法用CSS(欸!?),我會先找找有沒有解決的方法,沒辦法再換吧!

My google site: https://sites.google.com/site/can20302/

資工二乙 400262161 王冠仁

  這個Lab是藉由Wireshark這個軟體來觀察網路卡上所擷取到的封包,透過它可以讓我們知道,我們平常在使用的網路是靠這些小小的封包Request和Response來完成的,其中Request的方式又分為兩種(1)GET(2)POST,兩者的差別為

(1)GET是將參數放在HTML Header一起傳送,這種方式會將你的參數顯示在網址上,一般人可能將網址上的參數改一下就能看到別人的資料了,所以在傳送私密的資料時(例如:帳號、密碼),絕對不要用這種方式。

(2)POST將參數放在HTML Body內傳送,如此一來參數就不會顯示在網址上,自然無法透過修改網址來得到別人的資料,這種方式比GET安全一點,不過還是可以透過工具(例如Wireshark)來看到Body內的資料。

以上兩種方式看起來都不安全,但是若要送出Request訊息一定要使用兩者之一,所以若是要傳送私密訊息時,最好還是透過加密和解密,但如果所有訊息在網路上都加密和解密的話,光是處理加密和解密的時間就能讓一個網站塞車了。

以下為我的Demo實作:

當我登入系上的謠言報時,擷取的其中一個封包

400262161 資工二乙 王冠仁

  我是資工二乙的王冠仁,要認出我似乎不會很困難,班上同學說遠遠就可以看出那個人是我了,經常在系上跑來跑去,特徵是有點長的頭髮(或許該剪了~"~),假日有時會打工造成星期一精神狀態不好(例如上學期的遠距醫療),由於生活費靠自己所以個性比較向"錢"看~。

  我不太會表達自己的想法是我的缺點,梅老師的課都會需要上台報告,所以是一個磨練的機會,這是我選這門課的動機之一,也期望能在這門課學會上台說出自己的想法。此外大林老師(我們班導)也建議我學一些網路上的程式,不要侷限在單機上,因此需要Web的一些基礎原理與知識,這也成了我選課動機。

  上學期修了老師的遠距醫療,對Web有些許了解,在第一週上課時雖然老師上的很快,但我依然能跟上進度,讓我蠻訝異,這學期期望不僅能了解Web的技術外,還要能自己架一個網站出來,不過目前不知道能架在哪邊,有點不知所措。

  接下來介紹一下我的專長,除了基本程式能力OK之外,就是睡覺,我超會睡的,寒假整整睡了一個禮拜(起床只有吃東西,吃完繼續睡),我還有睡午覺的習慣,所以可能中午精神會突然不太好(不過通常是過12點之後,對上課沒有引響)

最後附上我的Linkedin網址:

第六組-Term Project : Patients like me & Medscape

我們是如何選擇專題的?

 

其實我們現階段社會上有許多忙碌的事情,以至於我們不能隨時注意到自我身心健康,甚至去醫院檢查,但可以透過PatientsLikeMe與Medscape來查詢自我身體健康的指標。

PatientsLikeMe主要是查詢病情還有治療方法,而且可以透過此網站認識不同地方的人,查詢完畢後還可以透過Medscape查詢藥物如何使用,這樣2邊都可以相輔相成。

 

---------------------------------我是分隔線------------------------------------------

頁面